Mengenal Nama Komponen UI Android Studio (2)

Assalamu alaikum warahmatullahi wabarakatu,  salam sejahtera bagi kita semua, ketemu ladi dengan saya dan kali ini saya akan membahas Komponen UI Android Studio Bagian ke- 2, yang biasa digunakan oleh para developer, banyak sekali referensi yang menjelaskan tentang Komponen UI Android Studio , dan di sini saya akan mengimplementasikannya  dengan harapan semoga tulisan ini  akan menambah pengetahuan dan pemahaman kita mengenai Komponen UI Android Studio Bagian ke- 2 , Amin.

8. Toggle Button

Toggle Button adalah elemen android studio yang biasa digunakan untuk menampilkan status dicentang / tidak dicentang (Aktif / Nonaktif) pada tombol. Ini bermanfaat jika pengguna harus mengubah pengaturan misal,  dapat digunakan untuk Suara Nyala / Mati, Wifi, Bluetooth dll. 

Sesuai dengan contoh di atas, maka script xml nya dapat dituliskan sebagai berikut:

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Turn On/Off Flash"/>

    <ToggleButton

        android:id="@+id/toggleButton"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="8dp"

        android:layout_marginTop="80dp"

        android:text="ToggleButton"

        android:textOff="Off"

        android:textOn="On"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

9. 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 Switch saat ini. Ini biasanya digunakan dalam memilih on / off di Sound, Bluetooth, WiFi dll. Jadi hampir sama dengan fungsi Toggle Button. Sesuai dengan contoh di atas, maka script xml nya dapat dituliskan sebagai berikut:

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Switch Testing"/>

    <Switch

        android:id="@+id/simpleSwitch"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Switch"

        android:showText="true"

        android:textOn="ON"

        android:textOff="OFF"

        />

10. ProgressBar

ProgressBar adalah indikator tampilan grafis yang menunjukkan seberapa lama progress. Progress bar di android berguna karena sistem memberi informasi kepada user prihal waktu yang dibutuhkan untuk menyelesaikan tugasnya. Berdasarkan contoh di atas, maka script xml dan java nya dapat dituliskan sebagai berikut:

• Script XML

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Please Wait..."/>
    <ProgressBar
        android:id="@+id/progressBar_cyclic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:minWidth="50dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Saving Your Data"/>
    <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="23dp"
        android:layout_marginTop="0dp"
        android:indeterminate="false"
        android:max="100"
        android:minHeight="50dp"
        android:minWidth="200dp"
        android:progress="1" />

• Script Java

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ProgressBar progressBar;
    private int progressStatus = 0;
    private TextView textView;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        // Start long running operation in a background thread
        new Thread(new Runnable() {
            public void run() {
                while (progressStatus < 100) {
                    progressStatus += 1;
                    // Update the progress bar and display the
                    //current value in the text view
                    handler.post(new Runnable() {
                        public void run() {
                            progressBar.setProgress(progressStatus);
                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        Thread.sleep(200);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

11. SeekBar

SeekBar adalah sejenis ProgressBar dengan ibu jari yang dapat diseret. User dapat menyeret thum nail ke kiri dan ke kanan untuk memindahkan progres lagu,volume suara, dan lain-lain. Berdasarkan contoh di atas, maka script xml dapat dituliskan sebagai berikut:

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Adjust Volume"

        />

<SeekBar

    android:id="@+id/seekBar"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:layout_constraintEnd_toEndOf="parent"

    app:layout_constraintStart_toStartOf="parent"

    app:layout_constraintTop_toTopOf="parent" 

/>

12. RatingBar

Android RatingBar biasa digunakan untuk mendapatkan peringkat dari user. Peringkat mengembalikan angka floating-point, mungkin 2.0, 3.5, 4.0 dan lain sebagainya. Berdasarkan contoh di atas, maka script xml dapat dituliskan sebagai berikut:

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="Rate This App" />

    <RatingBar

        android:id="@+id/ratingBar"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

13. ScrollView

ScrollView adalah elemen widget yang biasa digunakan untuk menggulir UI, baik secara vertical maupun horizontal.  Berdasarkan contoh di atas, maka script xml dapat dituliskan sebagai berikut:

 <ScrollView android:layout_marginTop="30dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/scrollView">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview1" />
            <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Ini Textview2" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview3" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview4" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview5" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview6" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview7" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview8" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview9" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview10" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview11" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview12" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview13" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview14" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview15" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview16" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview17" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview18" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview19" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview20" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview21" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview22" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview23" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview24" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview25" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview26" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview27" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview28" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview29" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview30" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview31" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview32" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview33" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview34" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview35" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview36" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview37" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview38" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview39" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Ini Textview40" />

        </LinearLayout>

    </ScrollView>

14. Challenge
Buatlah UI seperti tampilan berikut:

Demikian contoh UI yang disertakan dengan script xml, dan semoga bermanfaat.

Bagikan Artikel ini