Modul Pembuatan FAR Movie Streaming App

Dalam modul kali ini kita akan mencoba membuat aplikasi Web Streaming berupa layouting dan
juga dapat terkoneksi dengan API menggunakan software Android Studio Bumblebee. Pada
Project kali ini saya menggunakan HP sebagai rendering file dan juga menggunakan software
Virtual Device.

Langkah-Langkahnya adalah sebagai berikut;

1. Membuat Empty Activity
Buatlah sebuah Empty Activity dengan nama bebas, pada project kali ini saya
menggunakan nama “Movie StreamingFerri” dengan minimum SDK: API 21 Android 5.0
(Lollipop), selanjutnya tinggal di next saja.
2. Membuat Setup Home Banner (Model Class)
Pergi ke project kita, lalu cari Source Java Root pada sebelah kiri layar komputer, pilih
nama folder package “com.ferri.moviestreamingferri” klik kanan pada folder tersebut
lalu pilih “Package” selanjutnya buat package baru dengan nama
“com.ferri.moviestreamingferri.model”, tujuannya yaitu untuk membuat sebuah folder
package baru.

Selanjutnya buat Java Class baru dengan nama “Banner Movies” , lalu pergi ke Class yang tadi
dibuat kemudian lakukan inisialisasi sebagai berikut;
public class BannerMovies {

Integer id;
String movieName;
String imageUrl;
String fileUrl;
Jika sudah, lakukan Generate Constructor pada kolom kosong dibawahnya dengan menekan
Alt+Insert, tandai semuanya lalu klik Ok.

Setelah generate akan muncul syntax baru seperti dibawah ini, abaikan dulu saja.
public BannerMovies(Integer id, String movieName, String imageUrl,
String fileUrl) {
this.id = id;
this.movieName = movieName;
this.imageUrl = imageUrl;
this.fileUrl = fileUrl;
}

Selanjutnya klik Generate Setter dan Getter pada kolom kosong seperti cara diatas, ditandai
semua lalu klik OK.
 Setelah generate akan muncul syntax baru seperti dibawah ini, abaikan dulu saja.
public Integer getId() {
return id;
}

public void setId(Integer id) {

this.id = id;
}

public String getMovieName() {

return movieName;
}

public void setMovieName(String movieName) {

this.movieName = movieName;
}

public String getImageUrl() {

return imageUrl;
}

public void setImageUrl(String imageUrl) {

this.imageUrl = imageUrl;
}

public String getFileUrl() {

return fileUrl;
}

public void setFileUrl(String fileUrl) {

this.fileUrl = fileUrl;
}

Setelah model Jadi, mari ke langkah selanjutnya.

3. Membuat Desain UI (Utama)

• Pertama-tama, pergilah ke resource file activity_main.xml kita.
• Hapus String Hello World, pastikan terlebih dahulu sudah menyalakan Show
System UI yang ada pada ikon mata.
• Ubahlah warna background dengan mengetikan “background” pada pencarian
attribut.
• Ubah warna backgroud menjadi : #153866
• Pergi ke dalam package “res/values” lalu buat file “styles.xml” menggunakan klik
kanan>file>new>values resource file.

• Lakukan inisialisasi di styles.xml untuk memberikan pewarnaan, sebagai berikut;

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base Application Theme -->
<style name="AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<!-- Ubah Tema Disini -->
<item name="colorPrimary">#000000</item>
<item name="colorPrimaryDark">@color/PrimaryDark</item>
<item name="colorAccent">@color/teal_200</item>
</style>
</resources>

• Lakukan inisialisasi juga untuk pewarnaan di colors.xml yang letaknya di package

“res/values> colors.xml”
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="PrimaryDark">#153866</color>
</resources>
• Buatlah sebuah layout Constraint
• Tarik Textview kedalam Screen Layar, lalu lakukan layouting sebagai berikut

• Pada Textview tadi, ubah textnya menjadi FAR Movie Streaming App, Selanjutnya
lakukan penyesuaian fontsize, fontstyle dll.
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="120dp"
android:fontFamily="@font/rammetto_one"
android:text="FAR Movie Streaming App"
android:textColor="@color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

• Selanjutnya, seret kembali ke layar pada tab pencarian pallete, dengan nama “tab
layout”. Jika sudah maka akan muncul tampilan kotak , dengan default di atas.
Selanjutnya seret kotak tablayout nya kebawah sampai batas navigasi bar bawah.
Kemudian lakukan penyesuaian, memberikan penamaan yang sesuai dan id
“tabLayout”.

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="391dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="649dp"
android:layout_marginEnd="16dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:layout_constraintVertical_bias="1.0"
app:tabIndicator="@color/black"
app:tabSelectedTextColor="#037ffc"
app:tabTextColor="@color/black">

<com.google.android.material.tabs.TabItem
android:id="@+id/beranda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beranda" />

<com.google.android.material.tabs.TabItem
android:id="@+id/tvSerial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TV Serial" />

<com.google.android.material.tabs.TabItem
android:id="@+id/film"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Film" />

<com.google.android.material.tabs.TabItem
android:id="@+id/lokal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Lokal " />
</com.google.android.material.tabs.TabLayout>

Sehingga tampilannya menjadi seperti ini;