Memahami UI Android

Dalam latihan-latihan sebelumnya kita sudah mempelajari tentang class ‘Activity’ dan siklus hidupnya. Kita sudah tahu bahwa ‘activity’ menyediakan cara yang digunakan user untuk berinteraksi dengan app kita. Tetapi ‘activity’ sendiri sebenarnya tidak memiliki keberadaan di layar. Sebaliknya, activity akan menaruh berbagai macam ‘Views’ dan ‘ViewGroups’ ke layar. Topik ini kita akan mempelajari hal-hal seputar bagaimana membuat UI di Android, dan bagaimana user berinteraksi dengannya. Selain itu kita akan mempelajari bagaimana menangani perubahan-perubahan orientasi layar di perangkat Android kita.

Memahami berbagai macam komponen layar

Sebelumnya kita sudah tahu bahwa bagian mendasar dari app Android adalah activity. Activity menampilkan UI dari app kita yang mungkin akan berisi widget seperti button, label, textbox, dan seterusnya. Biasanya kita akan mendefinisikan UI kita di dalam file XML (misalnya ‘activity_main.xml’ yang ada di folder “res/layout” di dalam project kita), yang tampilannya kurang lebih adalah seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>

Pada saat runtime, app kita akan menampilkan UI XML di dalam method ‘onCreate()’ di dalam class ‘MainActivity’ dengan menggunakan method ‘setContentView()’:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

Pada saat kompilasi, masing-masing elemen di dalam file XML di-compile menjadi bentuk equivalennya dengan class GUI Android. Sistem Android kemudian membuat UI dari activity tersebut saat di-load.

Catatan:

Meskipun kita akan selalu merasa lebih mudah membuat UI dengan file XML, tetapi terkadang kita perlu mem-build UI kita secara dinamis saat runtime (misalnya, ketika membuat games). Jadi, sangatlah mungkin bahwa kita bisa membuat UI sepenuhnya dengan menggunakan kode. Nanti di dalam suatu latihan kita akan mencoba mempraktikannya.

Views dan ViewGroups

Suatu activity akan berisi ‘Views’ dan ‘ViewGroups’. View adalah sidget yang akan muncul di layar. Contohnya adalah ‘button’, ‘label’, dan ‘textbox’. Suatu view adalah turunan dari class ‘android.view.View’.

Satu atau beberapa view bisa dikelompokkan ke dalam suatu ViewGroup. ViewGroup (adalah jenis view yang spesial) akan memberikan layout dimana kita bisa menata dan mengurutkan berbagai macam view. Contoh dari ViewGroup antara lain adalah ‘LinearLayout’ dan ‘FrameLayout’. ViewGroup adalah turunan dari class ‘android.view.ViewGroup’.

Beberapa ViewGroups yang si-support Android adalah:

• LinearLayout
• AbsoluteLayout
• TableLayout
• RelativeLayout
• FrameLayout
• ScrollView

Beberapa topik dalam post ini akan menjelaskan masing-masing dari ViewGroup tersebut secara lebih detil.

Catatan: 

• Di dalam praktiknya sangatlah umum membuat kombinasi jenis-jenis layout tersebut untuk membuat UI yang kita inginkan.

• Untuk AbsoluteLayout ada masalah tampilan bila ditampilkan pada layar dengan resolusi yang tinggi. Karena itu AbsoluteLayout sudah deprecated (tidak digunakan lagi) sejak Android 1.5. Kita sebaiknya tidak menggunakan AbsoluteLayout untuk UI kita karena tidak di-support untuk versi Android di atas 1.5. Jadi kita sebaiknya menggunakan jenis Layout yang lain. Untuk itu kita juga tidak akan membahas AbsoluteLayout lebih dalam dalam tutorial blog ini.