Mengenal Komponen Lanjutan Android Studio ( Spinner,Toggle Button,Switch Bar ,Progress Bar , Seek Bar , Rating Bar , ScrollView)



 

kali ini saya akan membahas bagaimana Mengenal Komponen Lanjutan Android Studio ( Spinner,Toggle Button,Switch Bar ,Progress Bar , Seek Bar , Rating Bar , ScrollView), banyak sekali referensi yang menjelaskan tentang Komponen UI Android Studio, dan di sini saya mengipmplementasikan  bagaimana Mengenal Komponen Lanjutan Android Studio ( Spinner,Toggle Button,Switch Bar ,Progress Bar , Seek Bar , Rating Bar , ScrollView)

Dengan harapan semoga tulisan ini  akan menambah pengetahuan dan pemahaman kita bagaimana Mengenal Komponen Lanjutan Android Studio ( Spinner,Toggle Button,Switch Bar ,Progress Bar , Seek Bar , Rating Bar , ScrollView) Amin.

1. Komponen Spinner

Komponen Spinner biasa digunakan untuk menampilkan list data yang salah satu dari data yang ditampilkan , nantinya akan dipilih

A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek

B. Menambahkan script pada file res/values/strings.xml  dengan script dibawah ini
<resources>
<string name="app_name">Modul4Spinner</string>

<string-array name="hari">
<item>Senin</item>
<item>Selasa</item>
<item>Rabu</item>
<item>Kamis</item>
<item>Jumat</item>
<item>Sabtu</item>
<item>Minggu</item>
</string-array>

</resources>

C. Menambahkan plain text , dan spinner dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

D. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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:text="Hari ini : "
android:textStyle="bold" />

<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/hari" />

</LinearLayout>

E.  Tampilan desain projek

 
F. Hasil output setelah di run project
 

 

2. Komponen Toggle Button

Elemen Toggle Button biasa digunakan untuk menampilkan status dicentang / tidakdicentang (Aktif / Nonaktif) pada tombol. Ini bermanfaat jika pengguna harus mengubah pengaturan misal, dapat digunakan untuk Suara Nyala / Mati, WiFi, Bluetooth dll.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek




B. Menambahkan plain text , dan Toggle button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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="20dp"
android:fontFamily="monospace"
android:text="Tombol ON/OF 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:text="ToggleButton"
android:textOff="Flash Mati"
android:textOn="Flash Hidup"
app:layout_constraintStart_toStartOf= "parent"
app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

 
D. Hasil output setelah di run project


 

3. Komponen Switch On/Off

Element Switch ON/OFF Switch adalah widget sakelar sakelar dua keadaan yang dapat memilih di antara dua opsi atau pilihan. Pada dasarnya adalah tombol off/on yang menunjukkan keadaan Switchsaat ini. Ini biasanya digunakan dalam memilih on/off di Sound, Bluetooth, WiFi dll. Jadi hampir sama dengan fungsiToggle Button.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek




B. Menambahkan plain text , dan Switch button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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="20dp"
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:showText="true"
android:text="switch"
android:textOff="OFF"
android:textOn="ON"
android:textSize="15dp"
android:textStyle="bold"
tools:ignore="UseSwitchCompatOrMaterialXml"
/>

</LinearLayout>

 
D. Hasil output setelah di run project

 

4. Komponen ProgressBar

ProgressBar adalah indikator tampilan grafis yang menunjukkan seberapa lama progress. Progress bar diandroid berguna karena sistem memberi informasi kepada user perihal waktu yang dibutuhkan untuk menyelesaikan tugasnya.


A.    Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek



B. Menambahkan plain text , dan Progress bar  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Mohon Tunggu"
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_marginLeft="10dp"
android:layout_centerVertical="true"
android:layout_marginBottom="30dp"
android:minWidth="20dp"
android:minHeight="20dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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:indeterminate="false"
android:max="100"
android:minWidth="200dp"
android:minHeight="90dp"
android:progress="50" />

</LinearLayout>

 
D. Hasil output setelah di run project



 

5. Komponen SeekBar

SeekBar adalah sejenis ProgressBar dengan ibu jari yang dapat diseret. User dapat menyeret thumbnail ke kiri dan ke kanan untuk memindahkan progres lagu, volume suara dan lain-lain.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek


B. Menambahkan plain text , dan Seek bar  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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:text="Atur Volume" />

<SeekBar
android:id="@+id/seekBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbarSize="10dp"
android:layout_weight="1" />

</LinearLayout>

 

D. Hasil output setelah di run project

 

 6. Komponen RatingBar

Android RatingBar biasa digunakan untuk mendapatkan peringkat dari user. Peringkat mengembalikan angka ploating-point, mungkin 2.0, 2.5, 4.0 dan lain sebagainya.


A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek

B. Menambahkan plain text , dan Rating bar  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textStyle="bold"
android:textSize="24dp"
android:text="Rate This App : " />

<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />

</LinearLayout>

 


D. Hasil output setelah di run project

 


7. Komponen ScrollView

A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek


B. Menambahkan plain text , dan Scroll View  dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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"
android:orientation="vertical"
tools:context=".MainActivity">

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 1 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 2 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 3 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 4 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 5 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 6 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 7 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 8 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 9 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 10 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 11 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 12 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 13 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 14 !" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:text="Hello World 15 !" />


</LinearLayout>
</ScrollView>

</LinearLayout>

 


D. Hasil output setelah di run project

 

8. Latihan Praktikum

A. Pertama jalankan aplikasi IDE Android Studio, caranya :
  • Pilih Start → Android Studio
  • Pilih → Start a new Android Studio Project
  • Pilih → Empty Activity → Next
    Mengonfigurasi projek

 

B. Menambahkan Button ,plain text , radiogroup , radio button dapat dilakukan dengan cara beri pallete dengan men drag ke lembar kerja 

C. Atau bisa dengan mengedit source code nya langsung dengan mengaktifkan menu Split atau Code di pojok kanan atas , dengan 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"
android:orientation="vertical"
tools:context=".MainActivity">

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:inputType="textPersonName" />

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword" />

<EditText
android:id="@+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress" />

<EditText
android:id="@+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="No HP"
android:inputType="phone"/>

<EditText
android:id="@+id/editText5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Website"
android:inputType="textWebEmailAddress" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp" >

<TextView
android:id="@+id/textView2"
android:layout_width="200dp"
android:layout_marginTop="7dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Jenis Kelamin" />

<RadioGroup
android:layout_toRightOf="@+id/txt_lbs_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerVertical="true"
android:id="@+id/radioGroup">

<RadioButton
android:layout_width="120dp"
android:layout_height="30dp"
android:layout_weight="1"
android:id="@+id/radioButton2"
android:layout_marginLeft="16dp"
android:checked="false"
android:text="Laki-Laki" />

<RadioButton
android:layout_width="120dp"
android:layout_height="30dp"
android:layout_weight="1"
android:id="@+id/radioButton"
android:checked="false"
android:layout_marginLeft="16dp"
android:text="Perempuan" />

</RadioGroup>



</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_y="421dp"
android:layout_x="0dp"
android:text="Register" />

<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="login" />

</LinearLayout>

 
D. Hasil output setelah di run project

 



Bagikan:

Post a Comment

Top Ads

Middle Ads 1

Middle Ads 2

Bottom Ads