Layout Tiruan.docx

TUGAS INDIVIDU Pemrograman Mobile “Membuat Layout Tiruan”

Oleh:

I Putu Kerta Yasa

1705551080

Dosen Pengampu: Anak Agung Ketut Agung Cahyawan Wiranatha, ST, MT

PROGRAM STUDI TEKNOLOGI INFORMASI FAKULTAS TEKNIK UNIVERSITAS UDAYANA BALI 2019

1.

Tampilan yang akan ditiru Tampilan yang akan ditiru adalah tampilan form registrasi pada aplikasi W3

Lessons. Adapun screenshot tampilan yang akan ditiru dapat dilihat pada Gambar 1.

Gambar 1 Screenshot Tampilan Yang Ditiru

Gambar 1 merupakam hasil screenshot tampilan yang akan ditiru dan akan dibuat dengan menggunakan aplikasi Android Studio. Tampilan yang ditiru diambil dari aplikasi W3 Lessons pada bagian form registrasi. Tampilan ini terdiri dari beberapa komponen yaitu satu buah logo W3 Lessons, tujuh buah icon, tiga buah textview, empat buah edittext, satu buah button register.

2.

Source Code Adapun source code dari tampilan yang telah ditiru dapat dilihat pada Kode

Program 1. <EditText android:id="@+id/editText6" android:layout_width="296dp" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="210dp" android:ems="10" android:hint="Retype_password" android:inputType="textPassword" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" />
android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="32dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:outlineSpotShadowColor="black" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/W3" /> <EditText android:id="@+id/editText" android:layout_width="296dp" android:layout_height="42dp" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="52dp" android:ems="10" android:hint="Username" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/textView" /> <EditText android:id="@+id/editText4" android:layout_width="296dp" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="120dp" android:ems="10" android:hint="Email" android:inputType="textEmailAddress" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" /> <EditText android:id="@+id/editText5" android:layout_width="296dp" android:layout_height="wrap_content" android:layout_marginStart="8dp"

android:layout_marginLeft="8dp" android:layout_marginTop="165dp" android:ems="10" android:hint="Password" android:inputType="textPassword" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" /> <Button android:id="@+id/button" android:layout_width="349dp" android:layout_height="34dp" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="270dp" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" android:background="#20B2AA" android:text="REGISTER NOW" android:textColor="#F5FFFA" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/imageView" />
android:layout_width="36dp" android:layout_height="37dp" android:layout_marginStart="24dp" android:layout_marginLeft="24dp" android:layout_marginTop="8dp" android:background="#FFFAFA" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@android:drawable/sym_action_email" />
android:layout_marginBottom="92dp" android:background="#FFFAFA" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/editText" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@android:drawable/ic_menu_my_calendar" /> Kode Program 1 Kode Program Tampilan Yang Ditiru

Kode Program 1 merupakan source code yang telah ditiru. Tampilan ini dibuat dengan menggunakan tipe constraint layout, dimana letak view bergantung pada view lain dalam satu layout ataupun parent layout-nya dan terdapat empat edittext, tiga textview serta memakai guidline yang merupakan semacam garis bayang yang tidak terlihat oleh User. Untuk membuatnya, klik tombol Guidlines pada Toolbar, kemudian pilih Add Vertical Guideline atau Add Horizontal Guidline sesuai kebutuhan. Kita bisa mengatur posisinya berdasarkan Dimension (dp) ataupun dengan Persentase (berdasarkan sisi layout).

3.

Hasil Tampilan Berikut adalah hasil screenshot tampilan dari form registrasi yang telah

ditiru.

Gambar 2 Tampilan Akhir

Gambar 2 merupakan screenshot hasil tampilan dari form registrasi yang telah ditiru. Hasil tampilan tidak begitu sama dengan tampilan yang ditiru karena susah mencari icon yang sesuai dengan tampilan form registrasi dari aplikasi W3 Lessons tetapi untuk tata letak dari komponen form-nya hapir sama dengan tampilan yang telah ditiru.