Layout Dasar: Buat Projek Baru

Buat Projek Baru

Pertama buat projek android baru:

Buka Android Studio
Buat Projek Baru
- Jika Android Studio dalam keadaan membuka projek sebelumnya, anda bisa mengklik menu File > New > New Project
- Jika Android Studio dalam keadaan tidak membuka projek apa pun dengan kata lain ia berada pada jendela Welcome, maka anda bisa mengklik tombol + Start a new Android Studio Project
Jika anda masih kurang familiar dalam pembuatan projek android, anda bisa mengikuti seri tutorial sebelum ini yaitu membuat aplikasi pertama dengan kotlin pada Android Studio.
Pada jendela Choose your project, pilih EmptyActivity
Lalu isi konfigurasi projek sebagaimana pada Gambar 1.

Gambar 1: konfigurasi projek
Tunggu beberapa saat hingga proses gradle sync selesai.

Import Beberapa Icon Material Design Ke Dalam Projek

Import 8 icon dari material design pada table 1 berikut ke dalam projek Android Studio anda. Untuk langkah-langkahnya, silahkan baca tutorial Cara Menambahkan Icon Material Design ke Dalam Android Studio.

Name	Save as	Color
business	`ic_business_near_black_24dp`	#525252
email	`ic_email_near_black_24dp`	#525252
expand_less	`ic_expand_less_near_black_24dp`	#525252
expand_more	`ic_expand_more_near_black_24dp`	#525252
people	`ic_people_near_black_24dp`	#525252
person	`ic_person_near_black_24dp`	#525252
phone	`ic_phone_near_black_24dp`	#525252
location on	`ic_location_on_near_black_24dp`	#525252

Table 1: table material design icon

Pastikan icon disimpan dengan nama yang sesuai pada Table 1 agar bisa mengikuti tutorial ini dengan mudah.

Ubah build.gradle pada module app

Di dalam projek ini kita akan menampilkan file vector. Sehingga perlu menambahkan konfigurasi tersebut. Silakan buka file build.gradle untuk module app. Lalu tambahkan konfigurasi android.defaultConfig.vectorDrawables.useSupportLibrary dan beri nilai true.

Lihat baris yang ter-highlight berikut ini:

android {
    ...
    defaultConfig {
        applicationId "com.jagongoding.belajarlayoutdasar"
        minSdkVersion 15
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }
    ...
}

Tambahkan Variabel String

Tambahkan 4 variable string berikut pada file res/values/string.xml.

<!-- file res/values/string.xml -->
...
<string name="linear_layout">Linear Layout</string>
<string name="constraint_layout">Constraint Layout</string>
<string name="relative_layout">Relative Layout</string>
<string name="lorem">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices vitae auctor eu augue ut lectus arcu. Nunc sed augue lacus viverra vitae. Eu non diam phasellus vestibulum lorem sed. Aliquam eleifend mi in nulla posuere. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Sed viverra tellus in hac. Molestie nunc non blandit massa enim nec dui nunc mattis. Vivamus arcu felis bibendum ut tristique et egestas. Volutpat odio facilisis mauris sit amet. Turpis tincidunt id aliquet risus feugiat in ante metus dictum. Tincidunt id aliquet risus feugiat in ante. Sit amet risus nullam eget felis eget nunc.
    Ut tristique et egestas quis ipsum. Eget duis at tellus at urna condimentum. Diam vulputate ut pharetra sit. Nulla aliquet porttitor lacus luctus accumsan tortor. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nulla porttitor massa id neque. Id consectetur purus ut faucibus pulvinar. Eget dolor morbi non arcu risus quis varius quam quisque. Eget velit aliquet sagittis id consectetur purus ut faucibus. Non blandit massa enim nec dui. Amet mauris commodo quis imperdiet. Rhoncus mattis rhoncus urna neque viverra. Morbi tempus iaculis urna id volutpat lacus laoreet. Ultrices neque ornare aenean euismod elementum nisi quis. Posuere morbi leo urna molestie at elementum. Leo urna molestie at elementum. Commodo ullamcorper a lacus vestibulum sed arcu non. Nibh tortor id aliquet lectus proin nibh nisl. Blandit turpis cursus in hac habitasse platea dictumst. Et tortor consequat id porta nibh venenatis cras sed felis.
    Faucibus scelerisque eleifend donec pretium vulputate sapien. Accumsan sit amet nulla facilisi. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Ornare quam viverra orci sagittis eu volutpat odio facilisis. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Sagittis eu volutpat odio facilisis mauris. Amet consectetur adipiscing elit pellentesque habitant morbi. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Massa tempor nec feugiat nisl pretium fusce id velit ut. Cursus in hac habitasse platea. Porta lorem mollis aliquam ut porttitor leo a diam. Volutpat odio facilisis mauris sit. Diam in arcu cursus euismod. Pharetra convallis posuere morbi leo urna molestie at elementum. Enim lobortis scelerisque fermentum dui faucibus. Volutpat blandit aliquam etiam erat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. In egestas erat imperdiet sed euismod. Massa massa ultricies mi quis. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit.
    Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor. Elementum curabitur vitae nunc sed velit dignissim sodales. Eros donec ac odio tempor orci dapibus ultrices. Quam nulla porttitor massa id neque aliquam vestibulum morbi. Id eu nisl nunc mi ipsum faucibus. In arcu cursus euismod quis viverra nibh cras pulvinar mattis. Sit amet consectetur adipiscing elit pellentesque. Blandit cursus risus at ultrices mi tempus imperdiet. Senectus et netus et malesuada. Blandit turpis cursus in hac. Elit sed vulputate mi sit amet mauris commodo quis. Scelerisque purus semper eget duis at tellus. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Odio facilisis mauris sit amet massa vitae. Nibh venenatis cras sed felis. Amet venenatis urna cursus eget nunc. Dolor sit amet consectetur adipiscing elit ut aliquam.
    Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Mauris in aliquam sem fringilla ut morbi. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Augue eget arcu dictum varius duis at consectetur. Gravida arcu ac tortor dignissim convallis aenean. A diam maecenas sed enim ut sem viverra aliquet eget. Tempor orci dapibus ultrices in. In hac habitasse platea dictumst quisque sagittis purus sit. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus.
</string>
...

Pada kode program di atas kita menambahkan 4 variable yaitu linear_layout, constraint_layout, dan relative_layout. Lalu variable yang ke-4 adalah variable lorem yang berisi teks Lorem Ipsum yang panjang. Variable ini nantinya kita gunakan untuk mencoba testing ScrollView; apakah activity kita bisa di-scroll dengan baik atau tidak ketika panjang teks melebihi tinggi parent.

Tambahkan 3 Tombol Utama

Lanjut ke file res/layout/activity_main.xml. Hapus elemen <TextView> agar main activity menjadi kosong.

Kemudian tambahkan 3 tombol utama. Masing-masing tombol tersebut memiliki konfigurasi seperti berikut:

Tombol Linear Layout
- id: @+id/btnLinearLayout
- text: @string/linear_layout
Tombol Relative Layout
- id: @+id/btnRelativeLayout
- text: @string/relative_layout
Tombol Constraint Layout
- id: @+id/btnConstraintLayout
- text: @string/constraint_layout

Atur ketiga tombol di atas dengan menggunakan fitur Layout Editor pada Android Studio agar bisa tampil seperti pada Gambar 2:

Gambar 2: konfigurasi projek

Jika anda masih kebingungan atau belum punya ide bagaimana cara membuat tata letak seperti di atas, anda bisa merujuk kembali ke tutorial kami sebelumnya yaitu Membuat Userface Sederhana Android - Kotlin. Lalu coba praktikkan apa yang telah anda pelajari tersebut pada kasus ini.

Kode Sumber activity_main.xml

Jika telah mencoba dan masih belum menemukan titik terang, atau mungkin sudah berhasil membuat tampilan seperti di atas namun ingin mencocokkan dengan punya kami, silakan lihat kode program berikut ini untuk file res/layout/activity_main.xml:

<!-- File res/layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <Button
        android:id="@+id/btnLinearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="@string/linear_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnRelativeLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="@string/relative_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnLinearLayout" />

    <Button
        android:id="@+id/btnConstraintLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="@string/constraint_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnRelativeLayout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Jalankan Aplikasi Anda

Setelah memastikan semuanya beres. Anda bisa menjalankan projek aplikasi anda pada real device mau pun emulator untuk melihat secara langsung hasil dari apa yang telah anda kerjakan.

Langkah Selanjutnya

Saat ini 3 tombol pada aplikasi kita masih belum menerima aksi apa pun ketika diketuk. Pada langkah-langkah selanjutnya kita akan membuat 3 activity dengan 3 layout yang berbeda untuk menampilkan satu tata letak form yang identik satu sama lain. Dan tugas ke-3 tombol di atas adalah untuk menampilkan Activity yang sesuai.