SEKOLAH TINGGI MANAJEMEN INFORMATIKA

DAN KOMPUTER BANI SALEH

LAPORAN PRAKTIKUM KOMPUTER
Nama M Syahrul Fadillah Ruang Lab
NIM 43A87006160121 Mata Kuliah Pemrograman Mobile
Jurusan Teknik Informatika Praktikum 2
Dosen Muhamad Nur, S.Kom, Hari / Tanggal 5 Oktober 209
M.Kom
Judul: Project 2 – Membuat Desain Layout Lanjutan

1. Tujuan Praktikum

Mahasiswa mampu memahami dan mengerti perbedaan 3 jenis dasar layout pada
android yaitu constraint layout, linear layout, dan relative layout

2. Dasar Teori
3 Jenis layout pada android yaitu
1. Constraint Layout
Yaitu layout berdasarkan constraint (ikatan) dengan tujuan untuk membuat
tampilan lebih kompleks dan responsive, dengan kata lain jika posisi handphone
mengalami rotasi, layout dan tata letaknya tidak akan berantakan. Dengan
layout ini, desainer dapat melakukan drag and drop secara mudah tanpa harus
menggunakan script (ngoding).

2. Linear Layout
Merupakan metode yang digunakan untuk menempatkan posisi bagian sesuai
dengan keinginan secara horizontal ataupun vertical. Dengan kata lain untuk
membagikan atau memisah beberapa node atau bagian sesuai dengan
batasnya.

3. Relative Layout
Merupakan layout yg memiliki fungsi dapat mengatur tata letak node atau
komponen ataupun widget dengan cara relative ( bebas ) tidak hanya vertical
dan horizontal seperti pada linear layout. Layout ini dianggap sangat fleksibel
dan mudah dalam penggunaannya.
3. Langkah Praktikum

 Create New Project di Android Studio

 Masukkan nama project yang akan dibuat

 Siapkan gambar untuk background bagian atas, simpan dalam folder “drawable”

 Buat Relative Layout untuk memberikan tata letak backgroundnya

<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/bg1"></ImageView>
</RelativeLayout>

Hasil
 Berikan teks jam, hari dan tanggal pada background tersebut
Note : Letakkan didalam Relative Layout yg sebelumnya
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="50dp"
android:gravity="center_vertical"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="16:16"
android:textColor="@android:color/white"
android:textSize="20sp"></TextView>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Saturday, October 05, 2019"
android:textColor="@android:color/white"
android:textSize="16sp"></TextView>
</LinearLayout>

Hasil

 Buat Linear Layout diluar Relative Layout sebelumnya untuk membuat beberapa
bagian seperti status battery, alarm, dll
 Linear Layout untuk membuat status battery
o Siapkan vector dan background rounded untuk tab status yg akan dibuat
o Klik kanan pada drawable -> New -> Vector Asset

o Klik Logo Vector

o Cari logo yg akan dibuat

o Setelah dipilih, klik OK lalu Finish

o Buat Rounded untuk backgroundnya

o Ubah source codenya sbb

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4CAF50"></solid>
<corners android:radius="20dp"/>
</shape>

o Buat Linear Layout untuk penempatan posisi status battery beserta

keterangan teksnya
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/relativeLayout"
app:layout_constraintVertical_bias="0.498">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">

<LinearLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/bg_rounded"
android:gravity="center">

<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/ic_battery_charging_90_white_24dp"></ImageView>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="60dp"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Battery"
android:textColor="#777"
android:textSize="16sp"></TextView>
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="65%, 44.0, 2h remaining"
android:textColor="#777"
android:textSize="14sp"></TextView>
</LinearLayout>
</RelativeLayout>

Hasil

 Ulangi Linear Layout untuk semua status yg di inginkan berulang seperti cara
diatas, hanya berbeda pada logo vector dan warna backgrundnya saja

 Hasil Setelah dilakukan pengulangan

 Buat Tombol Dial Pad di bagian tengah kanan dengan source code sebagai
berikut
Note : Buat Ddiluar relative layout sebelumnya
<LinearLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="170dp"
android:layout_marginEnd="30dp"
 android:background="@drawable/bg_rounded_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center">

<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/ic_dialpad_white_24dp">
</ImageView>
</LinearLayout>

Hasil

4. Hasil Praktikum
 Hasil Design pada aplikasi android studio
  Hasil menggunakan AVD

5. Kesimpulan
Dari materi yang telah diajarkan, membuat layout menggunakan ketiga metode
tersebut akan sangat memudahkan desainer dalam mengatur tata letak dari sebuah
aplikasi mobile dengan hasil yang responsive.