PENGENALAN KOMPONEN UI LANJUTAN PADA ANDROID STUDIO

Berikut adalah komponen UI lanjutan pada Android Studio :

A. Praktikum Apps.1 (Komponen Spinner)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.

Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.

Akan muncul tampilan seperti dibawah ini. Kita hanya perlu memberi nama project pada “Name” dan pilih lokasi penyimpanan project-nya akan disimpan difolder mana pada bagian “Save location”, selebihnya cukup biarkan saja. Untuk name kita bernama “Komponen Spinner”, dan Save location kita contohkan di folder Tugas PAB. Jika sudah, klik “Finish”.

Setelah itu akan muncul tampilan seperti yang ada dibawah ini, untuk penulisan script string caranya pilih menu values dan klik string.xlm, dan ketikkam script seperti dibawah ini :

<string name="app_name">Modul4</string>

<string-array name="hari">

<item>Senin</item>

<item>Selasa</item>

<item>Kamis</item>

<item>Jumat</item>

<item>Sabtu</item>

<item>Minggu</item>

</string-array>

</resources>

Lalu klik activity_main.xml yang ada diatas dan ketikkan script dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="30dp"

android:layout_x="20dp"

android:layout_y="21dp"

android:text="Hari Ini :" />

<Spinner

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="30dp"

android:layout_x="87dp"

android:layout_y="20dp"

android:entries="@array/hari" />

</LinearLayout>

Maka, jika di Run/dijalankan akan muncul seperti ini :

B. Praktikum Apps.2 (Komponen Toggel Button)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen Toggle Button”.

Ketikkan script yang ada dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="30dp"

android:layout_x="14dp"

android:layout_y="79dp"

android:text="Tombol ON/OFF Flash"

android:textSize="18sp"

android:textStyle="bold" />

<ToggleButton

android:id="@+id/togglebutton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="5dp"

android:layout_marginTop="20dp"

android:layout_x="215dp"

android:layout_y="63dp"

android:text="ToggleButton"

android:textOff="Flash Mati"

android:textOn="Flash Hidup" />

</LinearLayout>

Dan setelah dijalankan akan muncul tampilan seperti dibawah ini :

C. Praktikum Apps.3 (Komponen Switch On/Off)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen Switch OnOff”.

Lalu ketikkan script yang ada dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:layout_x="19dp"

android:layout_y="141dp"

android:text="Switch Testing :"

android:textSize="18sp"

android:textStyle="bold" />

<Switch

android:id="@+id/simpleSwitch"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="15dp"

android:layout_marginTop="20dp"

android:layout_x="183dp"

android:layout_y="139dp"

android:showText="true"

android:text="Switch"

android:textOff="OFF"

android:textOn="ON"

android:textSize="18sp"

android:textStyle="bold" />

</LinearLayout>

Setelah dijalankan maka akan muncul tampilan :

D. Praktikum Apps.4 (Komponen ProgressBar)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen Progress Bar”.

Lalu ketikkan script yang ada dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_x="13dp"

android:layout_y="195dp"

android:text="Mohon Tunggu. . ."

android:textSize="18sp"

android:textStyle="bold" />

<ProgressBar

android:id="@+id/progressBar_cyclic"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:layout_marginLeft="30dp"

android:layout_marginBottom="10dp"

android:layout_x="55dp"

android:layout_y="235dp"

android:minWidth="20dp"

android:minHeight="20dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_x="191dp"

android:layout_y="196dp"

android:text="Sedang Menyimpan Data"

android:textSize="18sp"

android:textStyle="bold" />

<ProgressBar

android:id="@+id/progressBar"

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginLeft="10dp"

android:layout_marginTop="0dp"

android:layout_x="191dp"

android:layout_y="229dp"

android:indeterminate="false"

android:max="100"

android:minWidth="200dp"

android:minHeight="50dp"

android:progress="1" />

</LinearLayout>

Jika di Run/dijalankan akan menampilkan seperti yang ada dibawah ini :

E. Praktikum Apps.5 (Komponen SeekBar)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen Seek Bar”.

Ketikkan script yang ada dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Atur Volume :" />

<SeekBar

android:id="@+id/seekBar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scrollbarSize="10dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

</LinearLayout>

Lalu kita dijalankan, dan akan muncul tampilan seperti ini :

F. Praktikum Apps.6 (Komponen RatingBar)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen Rating Bar”.

Lalu ketikkan script yang ada dibawah ini :

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

<LinearLayout 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=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_x="14dp"

android:layout_y="323dp"

android:text="Rate This App"

android:textSize="24sp"

android:textStyle="bold" />

<RatingBar

android:id="@+id/ratingBar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_x="9dp"

android:layout_y="387dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

Lalu dijalankan/di Run, akan muncul tampilan seperti ini :

G. Praktikum Apps.7 (Komponen ScrollView)

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Scroll View”.

Sama halnya dengan yang diatas, untuk membuat string kita klik values yang ada disebelah kiri, lalu klik string dan ketikkan script ini :

<string name="app_name">Tugas</string>

Android Studio adalah Lingkungan Pengembangan Terpadu – Integrated Development Environment (IDE) untuk pengembangan aplikasi Android, berdasarkan IntelliJ IDEA . Selain merupakan editor code IntelliJ dan alat pengembang yang berdaya guna, Android Studio menawarkan lebih banyak fitur.

</string>

</resources>

Lalu ketikkan script yang ada dibawah ini :

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

<LinearLayout 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"

android:orientation="vertical"

tools:context=".MainActivity">

<ScrollView

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tugas"

android:textSize="40dp" />

</ScrollView>

</LinearLayout>

Dan ketika dijalankan maka, tampilannya seperti ini :

H. Tugas Modul 4

Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.
Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Tugas Modul4”.