Pengenalan Layout User Interface Android Studio

Assalamu alaikum warahmatullahi wabarakatu,  salam sejahtera bagi kita semua, kali ini saya akan membahas tentang Pengenalan Layout User Interface Android Studio, banyak sekali referensi yang menjelaskan tentang Pengenalan Layout User Interface Android Studio, dan di sini saya akan implementasikan mengenai Layout User Interface Android Studio  dengan harapan semoga tulisan ini  akan menambah pengetahuan dan pemahaman kita mengenai Layout User Interface Android Studio, Amin.

User Interface merupakan tampilan antar muka pada sebuah aplikasi baik itu pada platform desktop, web dan mobile. Selain itu, User Interface juga berada pada posisi yang paling depan ketika berhadapan langsung dengan pengguna.

Pengenalan Nama-Nama Komponen/View UI Android (Layout)

1.  Linear Layout

LinearLayout adalah sekelompok tampilan yang menyejajarkan semua child dalam satu arah, secara vertikal atau horizontal. Kita bisa menetapkan arah layout dengan atribut android:orientation ... .  dengan maksud ... nantinya akan digantikan sesuai dengan jenis orientation yang kita inginkan baik vertical ataupun hoizontal. LinearLayout akan mengikuti margin antara child dan gravity (sejajar kanan, tengah, atau kiri) setiap child.

Sebagai contoh Linear Layout dengan Orientation Vertical dan Horizontal

1.1. Script XML Linear Layout dengan menggunakan Orientaion Vertical

<?xml version="1.0" encoding="utf-8"?>

<!-- Pengaturan Layout Linear-->

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

    android:layout_width="match_parent" 

    android:layout_height="match_parent"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical">

    <!-- Pengaturan Textview 1-->

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:background="@android:color/holo_red_dark"

        android:text="1"

        android:textColor="@android:color/white"

        android:textSize="36sp"

        android:gravity="center"/>

    

    <!-- Pengaturan Textview 2-->

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:background="@android:color/holo_blue_dark"

        android:text="2"

        android:textColor="@android:color/white"

        android:textSize="36sp"

        android:gravity="center"/>

    <!-- Pengaturan Textview 3-->

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:background="@android:color/holo_green_dark"

        android:text="3"

        android:textColor="@android:color/white"

        android:textSize="36sp"

        android:gravity="center"/>

</LinearLayout>

1.2. Script XML Linear Layout dengan menggunakan Orientaion Horizontal

Dari script di atas, perhatikan bagian comment <!-- Pengaturan Layout Linear--> kita hanya tinggal menggantikan Script XML -nya menjadi  android:orientation="horizontal".

Chalenge Linear Layout

2. Relative Layout

Relative Layout merupakan layout yang berfungsi untuk mengatur tata letak komponen atau widget aplikasi android dengan cara relative (secara bebas) tidak hanya vertikal atau horizontal saja seperti pada Linear Layout.

Sebagai contoh Relative Layout

2.1. Script XML Relative Layout

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="@android:color/holo_orange_dark"
        android:text="Top Left" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:background="@android:color/holo_blue_dark"
        android:text="Top Center" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@android:color/holo_orange_dark"
        android:text="Top Right" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_blue_dark"
        android:text="Center Screen" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="false"
        android:layout_centerVertical="true"
        android:background="@android:color/holo_orange_dark"
        android:text="Right Center" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@android:color/holo_orange_dark"
        android:text="Left Center" />
</RelativeLayout>

Atau dengan cara lain kita dapat menggunakan Template Design kemudian meletakkan object masing-masing yang kita butuhkan, selanjutnya atur text, background dan layout pada attribut, cek hasilnya di View Blueprint seperti tampilan gambar berikut:

Chalenge Relative Layout

Bagikan Artikel ini