Warm Up Project, Make App Converter Meters to Inchies!
Desclaimer guys!
Hello everyone First of All thank you for visit my article in Medium, in this article i will present you my little project in android programming about converter to meters to inchies, i will delivers this article in Bahasa but some example or coding include in english.
Happy Coding All Readers!!
Teman-teman semua pada kali kita akan membuat sebuah project sederhana, kalau saya bilang ini termasuk “warm up project” project pemanasan untuk melatih kemampuan kita menuliskan sebuah kode yang kita implementasikan ke sebuah aplikasi yang bisa mengubah satuan meter menjadi satuan inchi.
Pertama-tama kita akan menggunakan Android Studio sebagai IDE dan JAVA sebagai bahasa pemrograman kali ini. Berikut App yang akan kita buat.
Berikut cara untuk mebuat app meters to inchies.
- Mendesign Layout dengan menggunakan featur drag and drop oleh android studio, kita mengatur layout dengan menggunakan Constrain Layout pada file activity_main.xml.
Jangan lupa setelah di drag dan drop kita juga mengatur Layout Constrain Widgetnya yang terletak di tab Attribute dibagian kanan
adapun widget yang kita masukan adalah :
- Image View
- Edit Text
- Button
- TextView
Nb: untuk textview kita tidak memberi nama karena textview akan kita atur sebagai yang akan menampilkan jawaban
jika ingin melihat kodingannya sperti ini:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.063"
app:srcCompat="@drawable/meters_inches" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="99dp"
android:layout_marginTop="63dp"
android:layout_marginEnd="99dp"
android:layout_marginBottom="480dp"
android:ems="10"
android:hint="Masukan Dalam Meter"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="162dp"
android:layout_marginTop="25dp"
android:layout_marginEnd="162dp"
android:layout_marginBottom="407dp"
android:text="Ubah"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText" />
<TextView
android:id="@+id/resultid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="176dp"
android:layout_marginTop="31dp"
android:layout_marginEnd="177dp"
android:layout_marginBottom="357dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>Kita akan akan masuk kepada file MainActivity.java, untuk menghubungkan fungsi dari app yang akan kita buat dengan layout yang telah kita buat tadi.
2. Deklarasi variable di MainActivity.java berdasarkan id yang telah kita tuliskan di layout activity_main.xml
public class MainActivity extends AppCompatActivity {
private EditText editText;
private Button button;
private TextView resultTextView;
........
........ }
3. Insialisasi variable-variable yang telah kita buat
public class MainActivity extends AppCompatActivity {
//TODO Deklarasi layout yang telah dibuat berdasarkan ID
private EditText editText;
private Button button;
private TextView resultTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//TODO inisialisasi variable dan menghubungkan kepada layout //yang telah dibuat editText = (EditText) findViewById(R.id.editText);
resultTextView = (TextView) findViewById(R.id.resultid);
button = (Button) findViewById(R.id.button); …………………}
4. Mengatur fungsi onClick dan juga mengatur logik yang berguna mengubah satuan panjang meter menjadi inci.
public class MainActivity extends AppCompatActivity {
...........................//TODO SetOnClick
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//TODO menaruuh logic untuk mengubah inputan menjadi inchi
double multipler = 39.37;
double result = 0.0;
double meterValue = Double.parseDouble(editText.getText().toString());
result = meterValue*multipler;
resultTextView.setText(Double.toString(result));
}
});}
5. Hasil Koding keseluruhan
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
//TODO Deklarasi layout yang telah dibuat berdasarkan ID
private EditText editText;
private Button button;
private TextView resultTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//TODO inisialisasi variable dan menghubungkan kepada layout yang telah dibuat
editText = (EditText) findViewById(R.id.editText);
resultTextView = (TextView) findViewById(R.id.resultid);
button = (Button) findViewById(R.id.button);
//TODO SetOnClick
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//TODO menaruuh logic untuk mengubah inputan menjadi inchi
double multipler = 39.37;
double result = 0.0;
double meterValue = Double.parseDouble(editText.getText().toString());
result = meterValue*multipler;
resultTextView.setText(Double.toString(result));
}
});
}
}Begitulah cara membuat applikasi yang bisa mengubah satuan meter menjadi inci.
Berikut saya berikan link referensi :
