Belajar Membuat Layout Aplikasi Android Part I

Layout merupakan salah satu elemen utama sebuah aplikasi Android. Pada kesempatan kali ini saya akan membahas bagaimana cara membuat layout sebuah aplikasi Android menggunakan Android Studio.

Dalam pembuatan layout di aplikasi Android, kalian dapat melakukannya dengan dua cara yaitu melalui XML dan Java. Pembuatan layout dengan XML dibuat dengan menuliskan komponen-komponen yang sebelumnya sudah dibuat oleh tim Android Google sehingga kalian dapat langsung memakainya. Selain menggunakan XML kalian juga bisa membuat layout langsung menggunakan Java.

Di tutorial Android Application kali ini saya hanya akan menjelaskan cara pembuatan layout menggunakan XML. Komponen utama pembuatan layout menggunakan XML adalah View dan ViewGroup.

View

View merupakan komponen yang menentukan objek apa yang dilihat oleh pengguna. Contoh View adalah Button, TextView, dan EditText.

ViewGroup

ViewGroup merupakan komponen yang dapat memiliki beberapa View dan memposisikannya sesuai kebutuhan. Ada banyak jenis ViewGroup namun yang akan dibahas secara mendalam dikelas ini adalah LinearLayout dan RelativeLayout.

LinearLayout

LinearLayout merupakan sebuah ViewGroup yang hanya dapat memposisikan komponen didalamnya dengan cara menyusun kesamping (horizontal) atau menyusun ke bawah (vertical).

Horizontal LinearLayout

Contoh Penggunaan Horizontal LinierLayout

CONTOH 1

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.community.counter.MainActivity"
    android:orientation="horizontal">
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Vertical LinearLayout

Contoh Penggunaan Vertical LinierLayout

CONTOH 2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.community.counter.MainActivity"
    android:orientation="vertical">
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

CATATAN

Perhatikan CONTOH 1 dan CONTOH 2, kedua source tersebut sama.
yang menjadi perbedaannya hanya pada baris android:orientation="horizontal"
dan android:orientation="vertical"