2.4. Pengenalan UI dan layout

Komponen UI

Elemen-elemen dasar UI pada Android dibagi menjadi dua jenis, View dan ViewGroup. View adalah komponen yang tampil pada layar dan bisa berinteraksi dengan user. Sedangkan view group merupakan komponen yang berperan mengkoordinasi komponen-komponen view lainnya. Beberapa contoh komponen View dan ViewGroup disajikan pada tabel berikut.

Secara hierarki, dapat dijelaskan seperti Gambar berikut.

Layout

Layout didefinisikan sebagai struktur visual sebuah tampilan UI. Layout dapat dibuat dengan dua cara (1) melalui xml dan (2) dibuat secara runtime menggunakan Java. Supaya lebih mudah, kita menggunakan cara pertama melalui xml. Berikut ini contoh menampilkan Button menggunakan xml.

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="login"
        android:id="@+id/buttonLoagin"
        android:layout_gravity="center_horizontal" />

Biasanya setiap layout berpasangan dengan Activity mewakili satu halaman aplikasi. Misalnya activity_login.xml berpasangan dengan LoginActivity.java. Ilustrasinya sebagai berikut.

Selama proses mengembangkan aplikasi Android, kita tidak akan terlepas dari dua bahasa ini, xml dan java. Tampilan layout ditulis dengan xml. Kemudian layout tersebut dikontrol menggunakan Java. Antara layout xml dan activity dipasangkan dengan perintah setContentView().

public class LoginActivity extends AppComppatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login.xml);
    }
}