Belajar Memahami ViewGroup di Android Studio Untuk Membangun UI

Saat kita membuat sebuah aplikasi android, tentunya kita tidak hanya menggunakan satu widget atau view saja. Kita pasti akan menggunakan beberapa widget dan view untuk membentuk tampilan aplikasi yang kita inginkan. Untuk itu kita perlu menggunakan sesuatu untuk mengorganisir, mengelompokkan atau memuat view-view tersebut. Hal ini perlu dilakukan karena view-view tersebut tidak dapat memposisikan diri dimana atau bagaimana mereka akan tampil di layar ponsel kita nantinya. Karena itu kita perlu menggunakan tampilan group atau ViewGroup di Android Studio untuk memuat view-view tersebut. Sebelum kita masuk ke pembahasan, ada baiknya anda sudah membaca artikel saya yang sebelumnya mengenai Belajar Mengenal XML di Android Studio.

ViewGroup di Android Studio

ViewGroup adalah sebuah view spesial yang bisa memuat view lainnya. Saya sering menyebut view yang ada di dalam ViewGroup sebagai “anak”.

Terdapat tiga ViewGroup di Android Studio yang sering digunakan, yaitu Linear Layout, Relative Layout dan Constraint Layout. Untuk pemula saya tidak menyarankan untuk menggunakan Constraint Layout terlebih dahulu, dan dalam artikel ini saya hanya akan membahas mengenai Linear Layout dan Relative Layout.

Masing-masing dari ViewGroup memiliki aturan tersendiri dalam mengelompokkan dan mengatur posisi dari setiap anaknya.

ViewGroup Linear Layout

Apa yang terlintas dibenak anda saat mendengar kata “Linear”?

Yap, Garis lurus.

Seperti namanya ViewGroup di Android Studio yang satu ini mengatur posisi anaknya secara lurus satu sama lain, baik itu lurus kebawah (vertikal) atau lurus ke samping (horizontal). Untuk menggunakan ViewGroup di Linear Layout anda perlu menambahkan atribut android:orientation. Atribut ini hanya memiliki dua nilai yaitu vertical dan horizontal. Selain itu ViewGroup Linear Layout ini sangat mudah digunakan.

Ketika anda menggunakan Linear Layout sebagai ViewGroup, maka view pertama dalam ViewGroup tersebut secara default akan diletakkan di pojok kiri atas dari layar ponsel anda. Kemudian akan diikuti oleh beberapa view yang lainnya, baik itu secara horizontal atau vertikal.

Contoh 1 Linear Layout

Catatan: Anda juga bisa mengubah posisi View yang berada di pojok kiri dengan menggunakan beberapa atribut, seperti “android:textAlignment”

Berikut ini adalah contoh sederhana dalam menggunakan ViewGroup Linear Layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Daftar Siswa"
        android:textSize="30sp"
        android:textAlignment="center"
        android:layout_margin="10dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Aji Sudrajat"
        android:textSize="24sp"
        android:textAlignment="center"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Bayu Adi Pratama"
        android:textSize="24sp"
        android:textAlignment="center"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Moch. Nazmi"
        android:textSize="24sp"
        android:textAlignment="center"/>
</LinearLayout>

Dan ini adalah tampilan ketika menggunakan kode diatas tersebut.

Contoh 2 Linear Layout

Baca juga: Belajar Menggunakan Linear Layout di Android Studio

ViewGroup Relative Layout

ViewGroup Relative Layout ini lebih fleksibel dibandingkan dengan Linear Layout. Dengan menggunakan Relative Layout ini anda bisa membuat tampilan yang tidak bisa dilakukan oleh Linear Layout. Misalkan jika Linear Layout harus memulai dari pojok kiri kanan atas, maka dengan Relative Layout ini anda dapat menampilkan view di tengah-tengah layar ponsel anda.

Dalam segi penggunaan, Relative Layout ini memang lebih rumit dibandingkan dengan Linear Layout. Ada dua cara yang dapat anda lakukan untuk membuat tampilan pada aplikasi android. Pertama, dengan Relative Layout anda bisa menempatkan view-view yang ada di dalamnya relatif terhadap tampilan induk ViewGroup tersebut. Kedua adalah anda bisa menempatkan view-view tersebut relatif terhadap view yang lainnya.

Untuk lebih jelas cobalah amati dua kode di bawah ini.

Contoh Relatif terhadap tampilan induk

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bawah"
        android:textSize="30sp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Atas"
        android:textSize="30sp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

Contoh 1 Relative Layout

Contoh Relatif terhadap View lain

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview_1"
        android:text="Tengah"
        android:textSize="30sp"
        android:layout_centerInParent="true" 
        android:layout_margin="5dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview_2"
        android:text="Kiri"
        android:textSize="30sp"
        android:layout_toLeftOf="@id/textview_1"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview_3"
        android:text="Kanan"
        android:textSize="30sp"
        android:layout_toRightOf="@id/textview_1"
        android:layout_centerVertical="true"/>
</RelativeLayout>

Contoh 2 Relative Layout

Pada contoh yang pertama saya menggunakan atribut alignParentBottom dan alignParentTop. Atribut ini menandakan bahwa saya menggunakan acuan tampilan induk untuk menempatkan dan memposisikan kedua buah TextView tersebut. Dalam contoh ini saya menempatkan satu TextView di atas dan satu TextView di bawah tampilan induk.

Pada contoh yang kedua saya menggunakan TextView yang berada di tengah sebagai acuan untuk view yang lainnya. Dalam contoh ini saya menggunakan atribut toRightOf dan toLeftOf, untuk menempatkan satu view di kanan dan satu view di kiri. Karena masih banyak perlu kita pelajari mengenai Relative Layout ini, maka saya kan membahasnya pada artikel di bawah ini.

Baca Juga: Belajar Menggunakan Relative Layout di Android Studio

Rootview

Dalam menggunakan ViewGroup, anda bisa menambahkan ViewGroup lain di dalamnya. ViewGroup atau tampilan yang pertama kali digunakan untuk memuat seluruh tampilan yang lain disebut sebagai Tampilan Utama (Rootview).

Rootview berguna untuk memuat semua widget atau tampilan yang ditambahkan ke dalam aplikasi anda. Ketika anda membuat sebuah layout aplikasi, anda perlu membuat Tampilan Utama atau Rootview ini. Jika anda tidak membuat tampilan utama atau rootview, maka akan dipastikan kode yang anda buat akan error. Rootview ini bisa berupa viewgroup yaitu Linear Layout/Relative Layout/ConstraintLayout, atau juga bisa berupa tampilan lainya, seperti  scrollview atau bahkan listview.

Kode di bawah ini adalah contoh rootview dengan menggunakan linear layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
</LinearLayout>

Ketika anda mendefinisikan sebuah viewgroup atau tampilan lain menjadi tampilan utama, anda perlu menambahkan atribut xmlns (lihat contoh diatas). Atribut xmlns ini kepanjangan dari XML Namespace yang merupakan sebuah cara bagaimana anda mengakses semua atribut dan tag yang sudah ditentukan oleh google sebelumnya. Saat anda menggunakan kode dibawah ini.

xmlns:android="http://schemas.android.com/apk/res/android"

maka semua kunci, atribut dan tag yang tercantum di dalam namespace ini akan diimport. Jadi saat anda mengetikkan kata android: di dalam XML Editor maka akan muncul daftar autocomplete.

Dalam artikel ini sudah banyak yang saya jelaskan mengenai ViewGroup di Android Studio. Sebenarnya masih banyak yang kita perlu pelajari, tapi kalo saya memasukkan semuanya disini akan terlalu panjang dan mungkin anda akan jadi bingung. Jadi untuk masing-masing ViewGroup tersebut saya akan menjelaskannya di artikel yang terpisah.

Ok saya rasa sudah cukup sekian artikel dari saya. Semoga artikel ini bisa bermanfaat bagi anda yang sedang belajar pemrograman android dengan menggunakan Android Studio.

Jika anda memiliki kritik dan saran mengenai artikel atau blog saya ini, anda bisa mencantumkannya di kolom komentar. Dan jika anda ingin bertanya sesuatu pada saya, bisa anda sampaikan melalui halaman Hubungi Saya.

Terima Kasih.

2 thoughts on “Belajar Memahami ViewGroup di Android Studio Untuk Membangun UI

    • March 24, 2018 at 5:59 am
      Permalink

      Terima sudah berkunjung ke blog saya Bang Zidane 🙂

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.