Android Fundamentals 1.2 Part A: UI Interaktif
Artikel ini memuat langkah-langkah membuat aplikasi HelloToast yang mana akan menampilkan UI pada ponsel Android.
Alat dan aplikasi yang diperlukan:
- PC/Desktop dengan Sistem Operasi Windows
- Java Development Kit (JDK) versi 11
- Android Studio versi 3.3
Membuat dan Eksplor Proyek Baru
Keterangan:
- File activity_main.xml sedang dibuka.
- Panel Palettes menampilkan elemen UI yang dapat kamu gunakan pada layout aplikasi.
- Component Tree menampilkan urutan view dari elemen UI.
- Tampilan elemen UI dari aplikasi.
- Tab Attributes menampilkan panel Attributes untuk mengatur properties dari sebuah elemen UI.
- Tab Design untuk melakukan modifikasi elemen.
Menambahkan Elemen-Elemen View pada Layout Editor
- Buka Android Studio dan buat proyek baru dengan parameter berikut:
2. Jalankan aplikasi menggunakan AVD.
3. Pilih Text>Text View pada panel Palettes. Klik tulisan Hello Toast pada layout dan tekan tombol Delete pada keyboard.
4. Drag and drop elemen Button dari Palettes.
5. Pada panel Attributes, Klik dua kali width control hingga berubah menjadi Match Contraints (garis spiral) seperti gambar di bawah ini. Lakukan pada button2 dan button3.
6. Ubah parameter Attributes button2 menjadi seperti berikut.
ID : button_toast
Button>background: @color/colorPrimary. Pilih warna #FF0009D.
TextView>text: Toast
TextView>textColor: @android:color/white
Beri parameter yang sama untuk button3.
Menambahkan TextView dan Mengatur Atributnya
- Drag and drop elemen TextView. Hubungkan TextView dengan TOAST (button_toast) .
8. Isi parameter TextView dengan ketentuan berikut:
Tab Design
ID: show_count
layout width: match_constraint
layout height: match_constraint
TextView>text: 0
TextView>textSize: 160sp
TextView>textColor: @color/colorPrimary.
TextView>textStyle: bold
View all attributes>background: #FFF000
View all attributes>gravity: center_vertical
Tab Text
Pada tag TextView line 53, tuliskan kode android:textAlignment=”center”
Edit Layout pada XML
- Buka file activity_main.xml.
- Perhatikan bahwa setiap kode android:text (android:text=”Toast” , android:text=”Count” , android:text=”0”) selalu terhighlight.
3. Klik pada android:text=”Toast”.
4. Tekan Alt+Enter pada keyboard dan pilih Extract String Resource.
5. Isi button_label_toast pada Resource Name. Kemudian klik OK.
6. Sebuah file values/res/string.xml berhasil dibuat. Tulisan Toast akan terganti dengan @string/button_label_toast.
7. Ulangi langkah ke-5 pada tulisan “Count” (Resource name: button_label_count)dan “0” (Resource name: count_initial_value).
8. Klik pada panel Project>Android>app>res>values>strings.xml.
9. Tambahkan kode <string name=”toast_message”>Hello Toast!</string> untuk digunakan pada langkah selanjutnya yakni menampilkan pesan.
Menambahkan onClick handler untuk Elemen Button
- Buka file activity_main.xml.
- Pada tag
<Button
android:id=”@+id/button_toast”
…
/>
tambahkan kode android:onClick=”showToast” sebelum tag tag penutup (/>). Apabila showToast bergaris bawah merah, maka arahkan dan klik kursor pada tulisan showToast>tekan Alt+Enter pada keyboard>pilih Create’countUp(View)’ in MainActivity. Maka, akan muncul kode baru pada file MainActivity.java.
Pada tag
<Button
android:id=”@+id/button_count”
…
/>
tambahkan kode android:onClick=”countUp” sebelum tag tag penutup (/>).
Apabila showToast dan countUp bergaris bawah merah, maka arahkan dan klik kursor pada tulisan countUp>tekan Alt+Enter pada keyboard>pilih Create’countUp(View)’ in MainActivity. Maka, akan muncul kode baru pada file MainActivity.java.
3. Dari file activity_main.xml, sekarang pindah ke file MainActivity.java.
4. Pada baris kode showToast, tambahkan kode berikut.
Toast toast = Toast.makeText(this, R.string.toast_message, Toast.LENGTH_SHORT);
toast.show();
Kode pada MainActivity.java
package com.example.hellotoast;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private int mCount = 0;
private TextView mShowCount;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowCount = (TextView) findViewById(R.id.show_count);
}
public void showToast(View view) {
Toast toast = Toast.makeText(this, R.string.toast_message,
Toast.LENGTH_SHORT);
toast.show();
}
public void countUp(View view) {
mCount++;
if (mShowCount != null)
mShowCount.setText(Integer.toString(mCount));
}
}
5. Jalankan aplikasi.
Sumber: