PRAKTIKUM ANTARMUKA PENGGUNA

ANDROID STUDIO

Untuk memenuhi tugas mata kuliah Pemrograman Mobile Android

yang dibina oleh
Alif Akbar Fitrawan S.Pd., M.Kom.

Oleh
Rizki Abdul Gofur
361755401182

POLITEKNIK NEGERI BANYUWANGI

PROGRAM STUDI TEKNIK INFORMATIKA

MARET 2019
Hasil percobaan layout 1 – login page

Illustration 1: Layout login tested on Xiaomi

Redmi Note 5
Coding Layout 1 – login page (activity_login.xml)

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Login">
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
android:layout_marginEnd="16dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText2" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@string/username"
app:layout_constraintStart_toStartOf="@+id/editText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="@string/password"
app:layout_constraintStart_toStartOf="@+id/editText2"
app:layout_constraintTop_toBottomOf="@+id/editText" />
<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:autofillHints=""
android:ems="10"
android:hint="Insert your name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<EditText
android:id="@+id/editText2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
 android:hint="Insert your password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="6dp"
android:layout_marginBottom="18dp"
android:text="Don't have account yet? Sign up now!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:layout_marginBottom="9dp"
android:text="Sign Up"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView3" />
</android.support.constraint.ConstraintLayout>
Hasil percobaan layout 2 – Menu

Illustration 2: Layout 2 - Menu tested on Xiaomi

Redmi Note 5
Coding layout 2 – Menu (activity_menu.xml)

<?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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".Menu"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="59dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="59dp"
android:text="Dashboard"
app:layout_constraintBottom_toTopOf="@+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginEnd="60dp"
android:text="Order"
app:layout_constraintBottom_toTopOf="@+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button3" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginEnd="60dp"
android:text="Product"
app:layout_constraintBottom_toTopOf="@+id/button6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/button4" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="59dp"
android:layout_marginEnd="59dp"
android:text="Report"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button5" />
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="58dp"
android:layout_marginEnd="58dp"
android:text="Setting"
app:layout_constraintBottom_toTopOf="@+id/button8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button6" />
<Button
android:id="@+id/button8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="58dp"
android:layout_marginEnd="58dp"
android:text="logout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button7" />
</android.support.constraint.ConstraintLayout>
 Hasil percobaan layout 3
– Sign Up

Illustration 3: Layout 3 - Sign Up tested on

Xiaomi Redmi Note 5
Coding layout 3 – Sign Up (activity_signup.xml)

<?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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".SignUp"
tools:layout_editor_absoluteY="81dp">
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="63dp"
android:layout_marginBottom="61dp"
android:text="Sign Up"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/textView10"
app:layout_constraintTop_toTopOf="@+id/spinner" />
<EditText
android:id="@+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Insert your name"
android:inputType="textPersonName"
app:layout_constraintBottom_toTopOf="@+id/textView5"
app:layout_constraintStart_toStartOf="@+id/textView4" />
<TextView
 android:id="@+id/textView4"
android:layout_width="78dp"
android:layout_height="22dp"
android:layout_marginStart="16dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="319dp"
android:text="Full Name"
app:layout_constraintBottom_toTopOf="@+id/spinner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/editText5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Insert your store name"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="@+id/textView6"
app:layout_constraintTop_toBottomOf="@+id/textView6" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:layout_marginTop="43dp"
android:layout_marginBottom="44dp"
android:text="Number Phone"
app:layout_constraintBottom_toBottomOf="@+id/editText9"
app:layout_constraintStart_toStartOf="@+id/editText3"
app:layout_constraintTop_toBottomOf="@+id/textView4" />
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginTop="1dp"
android:text="Your store name"
app:layout_constraintStart_toStartOf="@+id/editText9"
app:layout_constraintTop_toBottomOf="@+id/editText9" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:text="E-mail"
app:layout_constraintStart_toStartOf="@+id/editText5"
app:layout_constraintTop_toTopOf="@+id/editText5" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="Password"
app:layout_constraintStart_toStartOf="@+id/editText10"
app:layout_constraintTop_toBottomOf="@+id/editText10" />
<EditText
android:id="@+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:ems="10"
android:hint="Insert your password"
android:inputType="textPassword"
app:layout_constraintStart_toStartOf="@+id/textView8"
app:layout_constraintTop_toTopOf="@+id/textView8" />
<EditText
android:id="@+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="81dp"
 android:ems="10"
android:hint="Insert your phone number"
android:inputType="phone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/editText10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:ems="10"
android:hint="Insert your e-mail"
android:inputType="textEmailAddress"
app:layout_constraintStart_toStartOf="@+id/textView7"
app:layout_constraintTop_toTopOf="@+id/textView7" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="172dp"
android:text="Choose your packet :"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4"
app:layout_constraintVertical_bias="1.0" />
<Spinner
android:id="@+id/spinner"
android:layout_width="359dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="144dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView4" />
</android.support.constraint.ConstraintLayout>