Page| 12
PRAKTIKUM 2
DESAIN LAYOUT
1.1. Materi Pembelajaran
Mendesain Layout dan membuat proyek Antar muka sederhana
1.2. Kemampuan Akhir Pembelajaran
Sub CPMK 1: Dapat membangun basis antarmuka dengan desain Layout
XML
1.3. Materi Ajar
Android Studio menyediakan cara mudah untuk mendesain antarmuka pengguna.
File bernama “activity_main.xml” yang terletak di bawah folder “res/layout” berisi
semua informasi tata letak aktivitas saat ini.
Jika kami mencoba membuka file .xml di luar Android Studio, file tersebut akan
dibuka oleh editor teks atau browser. Namun, saat kita membuka file .xml di Android
Studio, file .xml akan dibaca dan menampilkan layout aktivitas yang sesuai dengan
komponennya. Untuk membuka activity_main.xml di Android Studio, silakan klik dua
kali di project explorer dan tata letak aktivitas akan ditampilkan di panel tengah
seperti yang ditunjukkan di bawah ini:
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 13
Seperti yang Anda lihat, tata letak aktivitas ditampilkan di panel tengah. Nama
aplikasi muncul di bagian atas aktivitas. Aktivitas kosong default berisi teks default
yang ditampilkan di dalam lingkaran pada gambar di atas. Di kiri atas panel tengah,
ada tab yang disebut "Palette" yang ditunjukkan di dalam persegi panjang pada
gambar. Ketika kita mengklik tab ini, palet yang ditunjukkan pada Gambar dibawah
muncul dari mana kita dapat menambahkan semua objek antarmuka pengguna
yang mungkin dan templat tata letak ke aktivitas.
Ketika tab palet diklik, dua panel dibuka: Palette yang ditunjukkan oleh persegi
panjang atas dan panel Component Tree di dalam persegi panjang bawah pada di
atas
Palete berisi beberapa grup seperti Widgets, Text Fields and Layouts. Kita dapat
dengan mudah menarik dan melepas komponen ini ke antarmuka pengguna. Di sisi
lain, Pohon Komponen mencantumkan komponen aktivitas secara hierarkis. Kita
akan melihat pemanfaatan komponen-komponen ini saat kita mengembangkan
aplikasi yang kompleks di bab-bab berikutnya. Namun, tujuan kami saat ini adalah
menulis teks di layar. Seperti yang Anda lihat dari Gambar 3.10, Android Studio
telah menempatkan teks "Hello World" di kiri atas tampilan.
Mari posisikan teks ini, yang terdiri dari widget TextView, ke tengah tampilan. Untuk
ini, pilih TextView ini lalu seret dan lepas ke tengah dengan bantuan garis pemandu
seperti yang ditunjukkan di bawah ini :
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 14
Setelah operasi drag and drop, TextView akan tetap dipilih. Kita sekarang
dapat mengubah properti TextView menggunakan panel Properties yang ada
di sebelah kanan tampilan Layout seperti yang ditunjukkan di dalam persegi
panjang pada Gambar 19. Silakan klik panah yang ditunjukkan di dalam
lingkaran pada gambar ini untuk membuka properti dasar yang dapat diedit
dari Tampilan Teks.
Properti yang dapat diedit dari komponen TextView ditampilkan di dalam persegi
panjang pada Gambar 20. Untuk menampilkan teks “Hello World” dengan cara yang
lebih baik, saya mengubah ukuran teksnya menjadi 24sp (sp = scale–independent
pixels) dan gayanya menjadi tebal dengan mengklik tombol B di bagian textStyle.
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 15
sekarang telah menyelesaikan pengaturan antarmuka pengguna. Karena kami tidak
ingin aplikasi pertama kami melakukan sesuatu yang interaktif, kami tidak perlu
menulis satu baris kode pun untuk saat ini. Tentu saja kami akan melakukan banyak
pengkodean di proyek yang akan datang, tetapi kami tidak memerlukan
pengkodean apa pun di sini.
Proejct Constraint Layout di Android Studio:
Di bawah ini kami mendesain layar Login sederhana di Constraint Layout. Kami
menggunakan ImageView, EditText, Button dan TextView untuk mendesain tata
letak di bawah ini.
Step 1: Buat proyek baru ConstraintLayout dan aktivitas Main Activity. Di sini kita
akan membuat Constraint Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80C938">
</android.support.constraint.ConstraintLayout>
Step 2: Tambahkan tampilan lain (tampilan gambar, editteks, tombol, dan tampilan
teks) dengan menambahkan batasan horizontal dan vertikal ke dalamnya:
<ImageView
android:layout_width="146dp"
android:layout_height="100dp"
android:src="@drawable/abhi_android"
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 16
android:id="@+id/imageView"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/editText"
android:layout_marginStart="16dp"
android:padding="12dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:hint="Email"
android:background="#ffffff"
android:layout_marginTop="232dp"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText2"
android:padding="12dp"
android:background="#ffffff"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:hint="Password"
android:layout_marginTop="304dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:text="SIGN IN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00773F"
android:id="@+id/button1"
android:layout_marginStart="16dp"
android:paddingLeft="30dp"
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 17
android:paddingRight="30dp"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="408dp"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:text="Don't have an account?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:textColor="#aaffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="480dp"
app:layout_constraintTop_toTopOf="parent" />
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 18
Step 3: Kode xml lengkap dari contoh Constraint Layout sederhana:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80C938">
<ImageView
android:layout_width="146dp"
android:layout_height="100dp"
android:src="@drawable/abhi_android"
android:id="@+id/imageView"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="@+id/editText"
android:layout_marginStart="16dp"
android:padding="12dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:hint="Email"
android:background="#ffffff"
android:layout_marginTop="232dp"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText2"
android:padding="12dp"
android:background="#ffffff"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 19
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:hint="Password"
android:layout_marginTop="304dp"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:text="SIGN IN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00773F"
android:id="@+id/button1"
android:layout_marginStart="16dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="408dp"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:text="Don't have an account?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:textColor="#aaffffff"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="480dp"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:
Sekarang lihat layout dalam mode desain untuk melihat Layout layar Login
sederhana yang dibuat menggunakan Constraint Layout.
Membangun Proyek dan Menjalankan di Emulator
Aplikasi Android pertama kami sekarang siap dijalankan di emulator. Ini mudah di
Android Studio. Kami telah menyiapkan emulator Nexus 5 di bab sebelumnya oleh
karena itu satu-satunya hal yang perlu kami lakukan adalah
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 20
i) membangun proyek,
ii) memilih emulator dan kemudian,
iii) menjalankan aplikasi kami di emulator.
untuk membangun dan menjalankan proyek, silakan klik tombol "Jalankan" seperti
yang ditunjukkan oleh panah pada Gambar 20. Dialog pemilihan emulator dan
perangkat yang ditunjukkan pada Gambar 21 akan muncul. Karena kami telah
membuat Nexus5 emulator sebelumnya, secara otomatis dipilih seperti yang
ditunjukkan di dalam persegi panjang. Jika kami telah menghubungkan perangkat
Android asli melalui kabel USB ke komputer, itu juga akan muncul di dialog ini.
Namun, karena tidak ada perangkat nyata yang terhubung untuk saat ini, dialog
memberikan peringatan di bagian atas yang ditunjukkan di dalam elips pada
gambar. Silakan klik "Next" dan kemudian emulator akan boot seperti perangkat
nyata. Dibutuhkan beberapa waktu tergantung pada kecepatan komputer Anda
untuk memulai emulator sepenuhnya (sekitar 20 detik).
Saat emulator mulai berjalan, Anda akan melihat layar Nexus 5 seperti yang
ditunjukkan pada Gambar dibawah ini. Anda dapat menggunakannya seperti
perangkat nyata (selain fitur panggilan dan SMS tentunya), dan Anda juga dapat
menggunakan kontrol di sebelah kanan bilah untuk mengubah properti umum
emulator jika Anda mau.
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
Page| 21
Memilih target untuk menjalankan aplikasi pertama kami
Emulator running our app
Agility, Encourage, Panduan Praktikum
Excellence And Humanity
Pemrograman Mobile Native
