PROGRAMA KOMPUTER

TUGAS KE – 4

NAMA KELOMPOK :
1. Ryan Isroun Najah (1913003)
2. I Gede Putu Artha Pratama (1913006)
3. I Gusti Agung Bagus W (1913009)
4. Edward Togap Samuel S (1913017)
5. Rizal Rahman (1913031)

TEKNIK INDUSTRI S-1

FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2020
 DESKRIPSI APLIKASI

Aplikasi ini bernama Hayuk Login yang memiliki fungsi untuk Login maupun Signup pada
Facebook, Twitter, GoogleAccount.
Pada aplikasi ini menggunakan 2 Actifity, yang pertama Activity untuk Login dan yang kedua
Activity untuk Signup
Penjelasan Layout yang digunakan:
1. ConstraintLayout

Kemudian untuk penggunaan Layout activity yang pertama menggunakan ConstraintLayout.

Sebenarnya ConstraintLayout mirip dengan RelativeLayout, karena letak View bergantung pada
View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya di RelativeLayout
kita bisa meletakkan sebuah View di atas, bawah, atau samping View lain, tapi ConstraintLayout
jauh lebih Fleksibel dan lebih mudah digunakan pada Layout Editor. Pada ConstraintLayout,
setiap View memiliki tali (Constraint) yang menarik tiap sisinya, yang mana tali tersebut bisa kita
atur Elastisitas, Margin, dsb. Tali tersebut wajib kita “ikatkan” kepada anchor point atau suatu
titik yang dapat berupa sisi dari Parent Layout, View lain, ataupun titik bantu (helper) yang bisa
kita buat sendiri.
2. RelativeLayout
Kemudian untuk penggunaan Layout activity yang kedua menggunakan RelativeLayout.
Relative Layout adalah layout yang penataan nya ini adalah penataan yang menempatkan widget-
widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas/di bawah widget
lainnya atau dengan kata lain Relative merupakan layout yang penataannya lebih bebas (Relative)
sehingga bisa di tata di mana saja.
 PENJELASAN PROPERTIES KOMPONEN PADA FILE (activity_main.xml)

<androidx.constraintlayout.widget.ConstraintLayout : Layout yang

digunakan untuk mengatur posisi dan ukuran tampilan dengan cara yang fleksibel.
android:layout_width="match_parent" : Untuk membuat lebar komponen
dapat mengikuti layar atau screen pada perangkat Android.
android:layout_height="match_parent" : Untuk membuat tinggi komponen
dapat mengikuti layar atau screen pada perangkat Android.
tools:context=".MainActivity" : Memberitahukan informasi akses

android:background="@drawable/login"> : Memberi Background pada

tampilan.

<Button :  untuk membrikan perintah tertentu pada tampilan

android:id="@+id/BtnLogin" : Digunakan untuk memberi nama pada button

android:layout_width="wrap_content" : Memberi tau tampilan untuk

menyetel ukuran lebarnya ke dimensi yang diperlukan agar konten sesuai dengan
tampilan.
android:layout_height="wrap_content" : Memberi tau tampilan untuk
menyetel ukuran tingginya ke dimensi yang diperlukan agar konten sesuai dengan
tampilan.
android:background="@drawable/loginbuttonshape":Memberi Background
pada tampilan.
android:text="LOGIN" : Digunakan untuk menampilkan text

android:textColorHighlight="#673AB7" : Untuk menyesuaikan warna

background dari teks terpilih
app:layout_constraintBottom_toBottomOf="parent" = digunakan untuk
mengatur tampilan yang ada dibawah agar sejajar dengan tampilan yang dibawah lainnya
app:layout_constraintEnd_toEndOf="parent" = digunakan untuk membatasi
tampilan dari ujung ke ujung lainnya
app:layout_constraintHorizontal_bias="0.0 = digunakan untuk
memusatkan widget saat ada kendala berlawanan, dengan cara merubah posisi secara
horizontal untuk mendukung satu sisi dari yang lain Menggunakan attribute bias
app:layout_constraintStart_toStartOf="parent" = digunakan untu
mambatasi tampilan dari awal ke awal lainnya.
app:layout_constraintTop_toTopOf="parent" = digunakan untuk mengatur
tampilan yang ada diatas agar sejajar dengan tampilan yang diatas lainnya
app:layout_constraintVertical_bias="0.225" = digunakan untuk
memusatkan widget saat ada kendala berlawanan, dengan cara merubah posisi secara
vertikal untuk mendukung satu sisi dari yang lain Menggunakan attribute bias

<imageView = salah satu widget yang digunakan untuk menampilkan gambar atau
memunculkan gambar yang ingin ditampilkan dalam satu activity.
android:id="@+id/imageView" = digunakan untuk memberikan nama pada image
view
android:layout_width="50dp" = Membuat lebar tampilan dengan ukuran 50dp

android:layout_height="50dp" = Membuat tinggi tampilan dengan ukuran 50dp

app:layout_constraintBottom_toBottomOf="parent" = digunakan untuk

mengatur tampilan yang ada dibawah agar sejajar dengan tampilan yang dibawah lainnya
app:layout_constraintEnd_toEndOf="parent" = digunakan untuk membatasi
tampilan dari ujung ke ujung lainnya
app:layout_constraintHorizontal_bias="0.047 = digunakan untuk
memusatkan widget saat ada kendala berlawanan, dengan cara merubah posisi secara
horizontal untuk mendukung satu sisi dari yang lain Menggunakan attribute bias
app:layout_constraintStart_toStartOf="parent" = digunakan untu
mambatasi tampilan dari awal ke awal lainnya.
app:layout_constraintTop_toTopOf="parent" = digunakan untuk mengatur
tampilan yang ada diatas agar sejajar dengan tampilan yang diatas lainnya
app:layout_constraintVertical_bias="0.089" = digunakan untuk
memusatkan widget saat ada kendala berlawanan, dengan cara merubah posisi secara
vertikal untuk mendukung satu sisi dari yang lain Menggunakan attribute bias

<TextView = salah satu widget yang digunakan untuk mengganti font , memunculkan
text yang ingin ditampilkan dalam satu activity dan masih banyak lagi fungsinya
android:id="@+id/textView" = digunakan untuk memberikan nama pada text
view
android:layout_width="wrap_content" : Memberi tau tampilan untuk
menyetel ukuran lebarnya ke dimensi yang diperlukan agar konten sesuai dengan
tampilan.
android:layout_height="wrap_content" : Memberi tau tampilan untuk
menyetel ukuran tingginya ke dimensi yang diperlukan agar konten sesuai dengan
tampilan.
android:text="Login" = digunakan untuk menampilkan text

android:textSize="30sp" = digunakan untuk mengatur ukuran text

app:layout_constraintBottom_toBottomOf="parent" = digunakan untuk

mengatur tampilan yang ada dibawah agar sejajar dengan tampilan yang dibawah lainnya
app:layout_constraintEnd_toEndOf="parent" = digunakan untuk membatasi
tampilan dari ujung ke ujung lainnya
app:layout_constraintStart_toStartOf="parent" = digunakan untu
mambatasi tampilan dari awal ke awal lainnya.
app:layout_constraintTop_toTopOf="parent" = digunakan untuk mengatur
tampilan yang ada diatas agar sejajar dengan tampilan yang diatas lainnya
app:layout_constraintVertical_bias="0.225" = digunakan untuk
memusatkan widget saat ada kendala berlawanan, dengan cara merubah posisi secara
vertikal untuk mendukung satu sisi dari yang lain Menggunakan attribute bias
tools:ignore="MissingConstraints" /> = digunakan untuk melihat
kesalahan dan peringatan
android:textAlignment="center" = digunakan untuk melakukan pengaturan posisi teks
(perataan)
android:layout_marginTop="100dp" = digunakan untuk mengatur batas atas text dengan
ukuran 100dp
android:layout_marginLeft="150dp" = digunakan untuk mengatur batas kiri text dengan
ukuran 150dp
<EditText = adalah cara standar untuk memasukkan teks diaplikasi Android. Jika
pengguna diminta untuk memasukkan suatu teks, maka View ini lah yang menjadi sarana
utama untuk melakukannya.

android:id="@+id/editText" = digunakan untuk memberikan nama pada edit text

android:layout_width="192dp" = Membuat lebar tampilan dengan ukuran 192dp

android:layout_height="47dp" = Membuat tinggi tampilan dengan ukuran 47dp

android:background="@drawable/textviewshape" = memberikan background pada tampilan

app:layout_constraintBottom_toBottomOf="parent" = digunakan untuk mengatur tampilan

yang ada dibawah agar sejajar dengan tampilan yang dibawah lainnya
app:layout_constraintEnd_toEndOf="parent" = digunakan untuk membatasi tampilan dari
ujung ke ujung lainnya
app:layout_constraintHorizontal_bias="0.0" = digunakan untuk memusatkan widget saat
ada kendala berlawanan, dengan cara merubah posisi secara horizontal untuk mendukung
satu sisi dari yang lain Menggunakan attribute bias
app:layout_constraintStart_toStartOf"@+id/textView" = digunakan untu mambatasi
tampilan dari awal ke awal lainnya.

app:layout_constraintTop_toTopOf="parent" = digunakan untuk mengatur tampilan yang

ada diatas agar sejajar dengan tampilan yang diatas lainnya
app:layout_constraintVertical_bias="0.043" = digunakan untuk memusatkan widget saat
ada kendala berlawanan, dengan cara merubah posisi secara vertikal untuk mendukung
satu sisi dari yang lain Menggunakan attribute bias
</androidx.constraintlayout.widget.ConstraintLayout>
 PENJELASAN PROPERTIES KOMPONEN PADA FILE (activity_lognup.xml)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android = Digunakan
untuk membuat layout dengan penataan lebih bebas (Relative) sehingga bisa di tata di
mana saja.
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"
android:background="@drawable/signup"
tools:context=".Lognup"

<Button
android:id="@+id/BtnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="215dp" = digunakan untuk mengatur jarak dengan obejek di atas
android:background="@drawable/signupbuttonshape"
android:text="login" />

<Button
android:id="@+id/BtnSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="270dp"
android:background="@drawable/loginbuttonshape"
android:text="SignUp" />

<ImageView
android:id="@+id/imageView7"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="340dp"
android:layout_marginLeft="20dp" = digunakan untuk mengatur jarak dengan obejek di kiri
app:srcCompat="@drawable/facebook" />

<ImageView
android:id="@+id/imageView8"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="400dp"
android:layout_marginLeft="20dp"
app:srcCompat="@drawable/twitter" />

<ImageView
android:id="@+id/imageView9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="460dp"
android:layout_marginLeft="20dp"
app:srcCompat="@drawable/google" />

<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SignUp"
android:layout_marginTop="100dp"
android:layout_marginLeft="150dp"
android:textSize="30sp" />

<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="180dp"
android:text="Username" />

<EditText
android:layout_width="192dp"
android:layout_height="47dp"
android:id="@+id/Username"
android:layout_marginLeft="150dp"
android:layout_marginTop="205dp"
android:alpha="0.23" = Untuk Animasi fade-in atau fade-out. Menunjukkan AlphaAnimation
android:background="@drawable/textviewshape" />

<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="255dp"

<EditText
android:layout_width="192dp"
android:layout_height="47dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="280dp"
android:alpha="0.23"
android:background="@drawable/textviewshape" />

<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="335dp"
android:text="Confirm Password" />

<EditText
android:layout_width="192dp"
android:layout_height="47dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="360dp"
android:id="@+id/Password"
android:alpha="0.23"
android:background="@drawable/textviewshape" />

<Button
android:id="@+id/Signup"
android:layout_width="130dp"
android:layout_height="39dp"
android:layout_marginLeft="190dp"
android:layout_marginTop="497dp"
android:background="@drawable/buttonshape"
android:text="Signup" />

<TextView
android:id="@+id/Hasil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="230dp"
android:layout_marginTop="537dp"
android:text="Status" />

</RelativeLayout>

Note : Untuk penjelasan Property di file Activity_lognup.xml yang tidak saya cantumkan
berarti penjelasannya sudah sama dengan Penjelasan yang ada di file Activity.main.xml