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:

1. File activity_main.xml sedang dibuka.
2. Panel Palettes menampilkan elemen UI yang dapat kamu gunakan pada layout aplikasi.
3. Component Tree menampilkan urutan view dari elemen UI.
4. Tampilan elemen UI dari aplikasi.
5. Tab Attributes menampilkan panel Attributes untuk mengatur properties dari sebuah elemen UI.
6. Tab Design untuk melakukan modifikasi elemen.

Menambahkan Elemen-Elemen View pada Layout Editor

1. 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.

Sebelum TextView dihapus

Layout menjadi blank setelah TextView dihapus

4. Drag and drop elemen Button dari Palettes.

Elemen Button

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.

Component Tree>button2. Klik dua kali pada width controls (panel Attributes)

Width controls berubah menjadi Match to Constraints (garis spiral)

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.

Parameter ID, Button>background pada button2

Parameter TextView>text, TextView>textColor pada button2

Menambahkan TextView dan Mengatur Atributnya

1. 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

1. Buka file activity_main.xml.
2. 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

1. Buka file activity_main.xml.
2. 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.

Troubleshoot untuk countUp

Kode Java countUp pada 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.

Tampilan ketika tombol COUNT disentuh

Tampilan ketika tombol TOAST disentuh

Sumber:

https://codelabs.developers.google.com/codelabs/android-training-layout-editor-part-a/index.html?index=..%2F..android-training#3