Memahami ViewGroup di Android Studio Untuk Membangun UI

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

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.

Berikut ini adalah contoh sederhana dalam menggunakan ViewGroup Linear Layout

<LinearLayout

android:layout_width="match_parent"

ndroid:layout_height="match_parent"
android:orientation="vertical">

android:layout_width="match_parent"
<TextView

android:text="Daftar Siswa"
android:layout_height="wrap_content"

android:textAlignment="center"
android:textSize="30sp"
        android:layout_margin="10dp"/>

android:layout_height="wrap_content"
<TextView
        android:layout_width="match_parent"

android:textAlignment="center"/>
android:text="Aji Sudrajat"
        android:textSize="24sp"
    <TextView

android:text="Bayu Adi Pratama"
android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp"

android:layout_height="wrap_content"
android:textAlignment="center"/>
    <TextView
        android:layout_width="match_parent"
        android:text="Moch. Nazmi"

</LinearLayout>
android:textSize="24sp"

android:textAlignment="center"/>

Dan ini adalah tampilan ketika menggunakan kode diatas tersebut.



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:textSize="30sp"
android:text="Bawah"

android:layout_centerHorizontal="true"/>
android:layout_alignParentBottom="true"
    <TextView

android:layout_height="wrap_content"
android:layout_width="wrap_content"
        android:text="Atas"
        android:textSize="30sp"

</RelativeLayout>
android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"/>




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:text="Tengah"
android:id="@+id/textview_1"
        android:textSize="30sp"

android:layout_margin="5dp"/>
android:layout_centerInParent="true" 
    <TextView
        android:layout_width="wrap_content"

android:textSize="30sp"
android:layout_height="wrap_content"
        android:id="@+id/textview_2"
        android:text="Kiri"

android:layout_width="wrap_content"
android:layout_toLeftOf="@id/textview_1"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_height="wrap_content"

android:layout_centerVertical="true"/>
android:id="@+id/textview_3"
        android:text="Kanan"
        android:textSize="30sp"
        android:layout_toRightOf="@id/textview_1"

</RelativeLayout>




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.

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.

Sumber : https://bangropi.com/viewgroup-di-android-studio/