Linear Layout (1/2)

Pengertian

Seperti yang telah kami sebutkan sebelumnya bahwasanya Linear Layout adalah layout yang meletakkan semua objek View yang ada di dalamnya dalam satu arah yang sama, entah secara vertikal mau pun secara horizontal [1]. Penentuan arah tersebut bisa diatur dalam atribut android:orientation.

Pada Gambar 1 adalah ilustrasi bagaimana Linear Layout menempatkan children view-nya.

Gambar 1: linear layout (sumber)

Sayangnya di antara kelemahan LinearLayout adalah: kita tidak bisa menyusun widget dengan bebas karena LinearLayout membatasi layout hanya pada satu arah saja: horizontal atau vertikal. Dan jika kita membutuhkan layout yang agak rumit, kita harus membuat susunan hirarki yang dalam. Yang mana ini membuat performa aplikasi kita menjadi lebih lambat.

Oleh karena itu Google sendiri menyarankan kita untuk menggunakan ConstraintLayout karena ia jauh lebih fleksibel dan bisa digunakan untuk membangun layout yang rumit tanpa perlu membuat hirarki yang dalam.

Tujuan Tutorial

Pastikan anda telah menyelesaikan tutorial sebelumnya yaitu membuat projek baru untuk belajar layout android dasar. Pada tutorial ini, kita akan membuat activity baru dengan nama LinearLayoutActivity. Lalu menambahkan aksi untuk tombol btnLinearLayout pada MainActivity agar ketika tombol diketuk, ia akan menjalankan activity baru.

Lihat ilustrasi pada Gambar 2:

Gambar 2: ketika tombol btnLinearLayout diketuk, sistem akan menampilkan activity LinearLayoutActivity

Buat Activity Baru

Pada tutorial sebelumnya kita telah memiliki MainActivity dengan tiga buah tombol. Pada step ini kita akan membuat activity baru.

1. Buat activity baru dengan tipe Empty Activity.

2. Beri nama activity baru dengan LinearActivityLayout.

3. Centang pilihan generate layout file.

4. Buka file manifest.xml, definisikan label dan parentActivityName dari LinearLayoutActivity.

   <activity android:name=".LinearLayoutActivity"
           android:label="@string/linear_layout"
           android:parentActivityName=".MainActivity"></activity>
   

Panggil Activity Baru Ketika Tombol Diklik

Skenario selanjutnya adalah memberikan aksi kepada tombol btnLinearLayout di MainActivity agar ketika diketuk, ia akan menampilkan activity yang baru kita buat yaitu LinearLayoutActivity.

1. Buka file MainActivity.kt

2. Buat fungsi baru dengan nama showLinearLayoutActivity(view: View)

3. Buat intent yang mengarah ke kelas LinearLayoutActivity

4. Panggil fungsi startActivity lalu masukkan intent yang telah dibuat sebagai parameter.

   // file MainActivity.kt
   fun showLinearLayoutActivity(view: View) {
       val intent = Intent(this, LinearLayoutActivity::class.java)
       startActivity(intent)
   }
   

5. Jangan lupa edit file res/layout/activity_main.xml lalu pada tombol btnLinearLayout, tambahkan atribut android:onClick dengan nama fungsi yang telah kita buat di atas.

   <!-- File res/layout/activity_main.xml -->
   <Button
       android:id="@+id/btnLinearLayout"
       ...
       android:onClick="showLinearLayoutActivity"
       ... />
   

6. Setelah berhasil tanpa error, silakan jalankan aplikasi lalu coba ketuk tombol Linear Layout. Harusnya activity baru yang telah kita buat akan tampil, tetapi tentu saja activity tersebut kosongan karena kita tadi memilih Empty Activity.

Jika anda agak bingung pada langkah ini dan juga langkah sebelumnya, anda bisa mengikuti tutorial kami sebelum ini yang membahas lebih detail tentang cara menampilkan activity baru.

Ubah Layout Menjadi LinearLayout

Ketika tadi kita membuat activity baru, Android Studio otomatis menambahkan layout utamanya dengan ConstraintLayout.

Akan tetapi karena di sini kita akan mempelajari LinearLayout, kita mau tidak mau harus mengganti layout default tersebut menjadi layout yang kita inginkan. Ikuti langkah-langkah berikut:

1. Buka file res/layout/activity_linear_layout.xml.

2. Pastikan tab Design dalam keadaan aktif.

3. Aktifkan Component Tree panel, anda akan dapati bahwa layout utama adalah ConstraintLayout.

4. Klik kanan layout tersebut, lalu pilih Convert View.

5. Pilih LinearLayout sebagai layout baru.

   

Setelah layout utama telah berubah menjadi LinearLayout, kita akan mulai membangun tata letak layout baru dari mulai pondasinya.

Tata Letak Inti

Untuk membangun layout seperti pada Gambar 1 di atas, kita harus membagi terlebih dahulu layout kita menjadi dua bagian secara vertical. Bagian atas dan bagian bawah. Bagian atas untuk form, dan bagian bawah untuk tombol.

Bagian atas kita buat sebuah ScrollView karena elemen ini nantinya memungkinkan kita untuk men-scroll jika ukuran konten lebih besar dari ukuran layar, apa lagi ketika kibor android dalam keadaan aktif.

Sedang untuk bagian bawah, kita perlu membuat LinearLayout horizontal di bagian untuk menampung 2 tombol yang terletak secara sejajar dalam satu garis horizontal. Sehingga di dalam LinearLayout, kita menambahkan LinearLayout yang lainnya.

Elemen LinearLayout bagian bawah, tingginya akan menyesuaikan ukuran konten (yaitu ukuran Button). Ada pun elemen ScrollView akan memakan seluruh ruang yang tersisa. Dalam hal ini kita akan memanfaatkan atribut android:layout_weight yang kita set pada ScrollView, dan membiarkan LinearLayout bagian bawah tidak terdefinisikan agar ia tetap pada ukuran tinggi aslinya.

1. Buka file res/layout/activity_linear_layout.xml.

2. Aktifkan mode Text.

3. Pada view LinearLayout paling luar, tambahkan atribut android:orientation dengan nilai "vertical".

   android:orientation="vertical"
   

4. Tambahkan elemen <ScrollView> dengan atribut layout_width dan layout_height bernilai 0dp. Lalu tambahkan atribut layout_weight dan isi dengan angka 1.

   <ScrollView
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"></ScrollView>
   

   Nilai 0dp di atas tidak akan berpengaruh karena properti layout_height akan diatur oleh layout_weight yang telah kita definisikan. Ada pun jika layout_weight tidak kita definisikan, maka itu akan membuat ScrollView tidak bisa terlihat di layar.

5. Tambahkan <LinearLayout> dengan orientasi horizontal beserta dengan dua tombol seperti pada kode xml berikut:

   <LinearLayout
       android:padding="16dp"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <Button
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="Cancel"></Button>
       <Button
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="Save"></Button>
   </LinearLayout>
   

   Pada kode program di atas kita mendefinsikan atribut android:layout_width dari masing-masing Button dengan nilai 0dp. Secara normal ini tidak diperbolehkan. Akan tetapi karena kita mendefinisikan android:layout_weight dengan nilai masing-masing “1”, maka otomatis panjang dari elemen Button tersebut akan memenuhi 1/2 ruangan kosong yang tersedia.

   Atribut layout_weight akan menghitung bobot panjang atau tinggi suatu elemen. Jika LinearLayout yang parent orientasinya horizontal, maka layout_weight akan mengatur properti layout_width, ada pun jika LinearLayout yang parent orientasinya vertical, maka layout_weight akan mengatur properti layout_height sesuai dengan bobot yang telah didefinisikan.

   Anda bisa mengubah-ubah nilai layout_weight untuk bereksperimen agar mendapatkan gambaran yang lebih jelas.

6. Aktifkan tab Design lalu lihat hasilnya.

   Anda bisa perhatikan bahwa tombol Cancel dan tombol Save memenuhi panjang ruangan masing-masing sebanyak 50%. Itu karena keduanya sama-sama memiliki bobot 1. Coba anda ubah salah satu tombol hingga memiliki layout_weight = 2 dan yang lain tetap bernilai 1. Maka salah satu tombol akan memenuhi ruang sebesar 1/3 dan yang satunya lagi sebesar 2/3.

7. Untuk melakukan tes apakah <ScrollView> yang kita buat bisa bekerja dengan baik, kita coba tambahkan TextView di dalamnya. Lalu kita atur atribut android:text nya dengan nilai variable lorem ipsum yang telah kita buat pada tutorial sebelumnya.

   <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/lorem"></TextView>
   

8. Jalankan aplikasi yang sudah kita buat. Lalu tes apakah ScrollView dapat bekerja seperti seharusnya.

   

Mengatur Tata Letak Form

Kita telah memastikan bahwasanya semua telah bekerja dengan baik. Sekarang kita akan mulai untuk membuat tata letak untuk form.

Kita mulai bagian form dari baris paling atas. Di baris paling atas adalah kumpulan widget untuk input-an Name, terdapat tiga buah elemen yang sejajar secara horizontal. Elemen sebelah kiri adalah widget ImageView, elemen tengah adalah EditText, dan yang sebelah kanan adalah tombol berisi gambar yaitu widget ImageButton. Ketiga widget tersebut akan kita bungkus dengan LinearLayout beriorientasi horizontal.

Tambahkan Inputan Name

Langkah-langkah:

1. Hapus widget TextView yang berisi lorem ipsum.
2. ScrollView hanya bisa memiliki satu child View. Kita akan menempatkan satu LinearLayout vertical di sini.
3. Buat satu LinearLayout lagi dengan orientasi horizontal, ini akan kita jadikan untuk menghimpun inputan form baris pertama yaitu inputan Name.
4. Di dalam LinearLayout tersebut, kita buat 3 view berikut:
   • ImageView
     • id: @+id/imgName
     • width: wrap_content
     • height: wrap_content
     • srcCompat: @drawable/ic_person_near_black_24dp
   • EditText
     • id: @+id/etName
     • width: 0dp
     • height: wrap_content
     • weight: 1
   • ImageButton
     • id: @+id/imgBtnToggleName
     • width: wrap_content
     • height: wrap_content
     • srcCompat: @drawable/ic_expand_more_near_black_24dp

Perhatikan untuk widget EdiText, kita mendefinisikan layout_width-nya dengan nilai 0dp. Nilai tersebut tidak berpengaruh apa pun karena widget tersebut memiliki atribut lain yaitu layout_weight yang akan menentukan ukuran panjangnya.

Ini adalah kode program lengkap untuk ScrollView beserta satu baris input form di dalamnya, tentunya setelah kita atur-atur margin-nya agar sesuai dan proporsional.

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <!-- 
        Linear layout vertical, tingginya seukuran konten di dalamnya
        Jika tingginya lebih besar dari ukuran parent, maka ia akan bisa discroll karena 
        berada tepat sebagai anak elemen dari ScrollView -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- Linear layout untuk inputan Name -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imgName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="11dp"
                app:srcCompat="@drawable/ic_person_near_black_24dp"></ImageView>

            <EditText
                android:id="@+id/etName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:hint="Name"></EditText>

            <ImageButton
                android:id="@+id/imgBtnToggleName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/ic_expand_more_near_black_24dp"></ImageButton>
        </LinearLayout>

    </LinearLayout>
</ScrollView>

Tampilan Sementara:

Tambahkan Form Input Lainnya.

Kita telah menambahkan form input untuk baris pertama. Baris pertama memiliki 3 buah elemen. Sedangkan pada baris inputan form yang lainnya, masing-masing hanya memiliki 2 buah elemen yaitu elemen icon dan elemen input itu sendiri. Sehingga untuk menambahkannya pun relatif lebih mudah dari pada yang pertama.

Setiap widget akan kita beri id. Peraturannya adalah: setiap id diawali oleh inisial dari widget itu sendiri. Misalkan widget EditText, maka id-nya akan diawali et. Sedangkan jika widget-nya adalah adalah ImageView, maka nama id-nya akan diawali img. Ini bukan peraturan resmi, hanya untuk memudahkan saja.

Tambahkan inputan-inputan berikut:

• Form Inputan Phone
  • ImageView
    • id: @+id/imgPhone
    • app:srcCompat: @drawable/ic_phone_near_black_24dp
  • EditText
    • id: @+id/etPhone
    • hint: "Phone"
    • inputType: "phone"
• Form Inputan Email
  • ImageView
    • id: @+id/imgEmail
    • app:srcCompat: @drawable/ic_email_near_black_24dp
  • EditText
    • id: @+id/etEmail
    • hint: "Email"
    • inputType: "textEmailAddress"
• Form Inputan Work
  • ImageView
    • id: @+id/imgWork
    • app:srcCompat: @drawable/ic_business_near_black_24dp
  • EditText
    • id: @+id/etWork
    • hint: "Work"
• Form Inputan Groups
  • ImageView
    • id: @+id/imgGroups
    • app:srcCompat: @drawable/ic_people_near_black_24dp
  • EditText
    • id: @+id/etGroups
    • hint: "Groups"
• Form Inputan Address
  • ImageView
    • id: @+id/imgAddress
    • app:srcCompat: @drawable/ic_location_on_near_black_24dp
  • EditText
    • id: @+id/etAddress
    • hint: "Address"

Usahakan agar hasilnya bisa terlihat seperti di bawah. Jika anda sudah mentok, anda bisa melihat sumber kode versi lengkapnya di bagian bawah tutorial ini.

Toggle Input Nama

Selanjutnya kita akan membuat toggle input Name. Jadi ketika tombol expand diketuk, ia akan menampilkan field yang lebih banyak. Dan jika tombol tersebut diklik lagi, ia akan kembali ke bentuk semula.

Bagian ini insyaallah akan kita bahas pada tutorial selanjutnya.

Kode Sumber

<?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=".LinearLayoutActivity"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imgName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_person_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etName"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp"
                    android:hint="Name"></EditText>

                <ImageButton
                    android:id="@+id/imgBtnToggleName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/ic_expand_more_near_black_24dp"></ImageButton>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgPhone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_phone_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etPhone"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Phone"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgEmail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_email_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etEmail"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Email"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgWork"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_business_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etWork"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Work"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgGroups"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_people_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etGroups"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Groups"></EditText>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="16dp">
                <ImageView
                    android:id="@+id/imgAddress"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="11dp"
                    app:srcCompat="@drawable/ic_location_on_near_black_24dp"></ImageView>

                <EditText
                    android:id="@+id/etAddress"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="16dp"
                    android:hint="Address"></EditText>
            </LinearLayout>

        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Cancel"></Button>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Save"></Button>
    </LinearLayout>

</LinearLayout>

Referensi

[1] https://developer.android.com/guide/topics/ui/layout/linear

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.