Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Android

Belajar Dasar Android Studio Views dan ViewGroup

Posting Komentar
Assalamualaikum wr.wb, kali ini kita akan Belajar mengenai Dasar - Dasar pada Android Studio yaitu Views dan ViewGroup.
Pada Dasarnya suatu halaman pada aplikasi Android dibangun degan dua komponen utama yaitu:
Views dan ViewGroup. Tentunya artikel ini admin buat selengkap mungkin sehingga teman- teman menjadi lebih paham mengenai materi Views dan ViewGroup ini.

Tentunya pembelajaran kali ini sangat penting karena merupakan dasar - dasar untuk kita dapat membuat aplikasi berbasis android, tentunya dengan menggunakan tools Android Studio. Banyak point yang akan kita bahas seperti Linierlayout, FrameLayout, RelativeLayout, TabelLayout serta ScrollView.

Bagi teman- teman yang ingin belajar mengenai Android serta database Mysql silahkan kunjungi:
Tutorial CRUD Android Studio dengan MySQL

Tentunya banyak hal yang akan kita pelajari pada artikel Belajar Dasar Android Studio Views dan ViewGroup ini tetapi kita akan memfokuskan untuk membahas mengenai Views dan ViewGroup pada Android Studio.

 Oke langsung saja teman - teman simak pembahasan dibawah ini:

Teori Pendahuluan 

Pada artikel ini, Teman - teman akan mempelajari mengenai komponen View dan komponen ViewGroup. Tentunya kedua komponen tersebut dapat berkolaborasi sehingga dapat membentuk antar muka yang lebih elegan dan terlihat lebih menarik.

Pada dasarnya semua element- element pengguna dalam aplikasi android dibangun dengan menggunakan dua buah komponen utama, adalah view dan viewsgroup.

Sebuah view dapat kita katakan sebagai objek yang dapat menggambarkan komponen - komponen tampilan pada layar yang mana pengguna atau user dapat melihat dan dapat berinteraksi secara langsung.

Dibawah ini merupakan contoh turunan dari komponen view:
  • TextView, komponen ini dapat kita gunakan untuk menampilkan teks ke layar sehingga dapat menampilkan tulisan- tulisan yang dapat dilihat oleh pengguna.
  • Button, komponen ini merupakan komponen yang cukup penting karena komponen ini dapat membuat pengguna dapat berinteraksi serta melakukan sesuatu dengan aplikasi.
  • ImageView, komponen ini dapat kita gunakan untuk menampilkan gambar sehingga dapat membuat tampilan menjadi lebih menarik jika dilihatnya.
  • ListView, Listview ini dapat kita gunakan untuk menampilkan suatu informasi yang jumlahnya banyak kedalam bentuk list, sehingga lebih rapi untuk dilihat.
  • GridView, Komponen GridView ini dapat kita gunakan untuk menampilkan suautu data ataupun suatu informasi dalam bentuk grid
  • RadioButton, Komponen ini juga tidak kalah pentingnya dengan komponen button karena pemungkinkan pengguna dapat memilih salah satu dari banyaknya pilihan yang tersedia, contoh pengaplikasiannya adalah pada pemilihan jenis kelami: yaitu laki- laki dan perempuan.
  • Checkbox, Komponen ini juga salah satu yang penting tentunya, karena dapat memungkinkan pengguna dalam memilih lebih dari satu pilihan yang disediakan 
Sedangkan ViewGroup merupakan suatu objek yang dapat menampung atau mewadahi objek - objek seperti view ataupun viewgroup itu sendiri sehingga dapat membentuk suatu kesatuan yang utuh dalam hal tampilan suatu aplikasi android.

Dibawah ini merupakan contoh komponen pada viewgroup:
  • LinearLayout
  • Frame Layout
  • RelativeLayout
  • TableLayout
  • ScrollView
  • Satuan Dimensi
Untuk Skemanya silahkan teman- teman perhatikan gambar dibawah ini:

 Jika kita terjemahkan kedalam sebuah viewgroup tentunya akan ditampung dua buah komponen view serta satu kompoenen viewgroup yang isinya terdiri dari 3 buah komponen view.

Untuk dapat mendeklarasikan layout, teman - teman dapat menyediakan objek View dalam kode serta mulai untuk membangun pohon, namun tentunya cara termudah untuk dapat mendefinisikan layout dengan munggunakan file .XML . Pada file tersebut menawarkan struktur layout yang tentunya dapat dibaca manusia, hampir sama dengan tag HTML.

Salah satu contoh dalam suatu tampilan dalam file layout.xml untuk dapat merepserentasikan kolaborasi view dan viewgroup, silahkan teman - teman ikuti script dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>
Objek turuna viewGroup LinearLayout dapat dijadikan kontainer untuk objek turunan seperti view , button, textview. Beberapa komponen- komponen viewgroup seperti RelativeLayout, FrameLayout, LinearLayout dan TableLayout tentunya itu merupakan komponen yang paling sering digunakan untuk menjadi root ataupun parent dari komponen- komponen view.

Berikut ini merupakan definisi singkat serta inti dari komponen- komponen di atas sehingga terdapat penempatan komponen - kompoen child (view) di dalamnya:

1. LinearLayout Pada Android Studio

Pada linear layout akan tenempatkan komponen didalamnya secara vertical maupun secara horizontal. Linear layout ini memiliki attiribut weight untuk tiap- tiap child view yang dapat berguna untuk dapat menentukan porsi serta ukuran view dalam sebuah space atau ruang yang tersedia.
Silahkan perhatikan gambar dibawah ini:
Pada gambar 1 itu merupakan android:orientation="vertical" sedangkan 
Pada gambar 2 itu merupakan android:orientation="horizontal"

LinearLayout juga tentunya dapat mendukung penyimpanan bobot ke dalam masing- masing andak dengan atribut yaitu android:layout_weight, attribut ini dapat menetapkan nilai "penting" kedalam sebuah tampilan dalam arti seberapa ruang yang akan ditampilkan atau ditempatkan di layar. 

Potongan script berikut dapat menampilkan bagaimana bobot layout itu dapat berfungsi pada suatu aktivitas "kirim pesan". Untuk suatu kolom , baris pada subject serta tombol kirim masing masing hanya akan mengambil ketinggian yang diperlukan saja. Komfigurasi seperti ini dapat memungkinkan pesan itu sendiri untuk dapat menggambil sisa dari tetinggian aktivitas tersebut.
Silahk teman teman perhatikan perhatikan gambar dibawah ini berserta kode scriptnya:
Script:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>
Hasil:
Selanjutnya kita akan mempelajari mengenai relativelayout, silahkan teman- teman simak pembahasan dibawah ini:

2. RelativeLayout Pada Android Studio

RelativeLayout merupakan suatu grup yang dapat menampilkan tampilan sebagai turunan pada posisi relatif. Posisi dari setiap tampilan tentunya dapat kita tentukan sebagai posisi relatif terhadap element- element yang setara (Pada sebelah kira atau dibawah tampilan lainnya) atau pada posisi relatif terhadap RelativeLayout induk (sejajar dengan bagian kira, tengah atau bawah).
RelativeLayout merupakan sebuah utilitas yang tentunya paling efektif untuk mendesign suatu tampilan atau antar muka pengguna dikarenakan dapat menghilangkan sautu grup tampilang yang bertingkat serta menjaga suatu hierarki tata letak yang Teman - teman buat agar tetap sederhana, sehingga dapat meninggatkan performanya. Jika pada kenyataannya teman - teman menggunakan beberapa grup dengan LinearLayout bertingkat, maka teman -teman dapat menggantinya dengan RelativeLayout tunggal saja.

Untuk contoh seriap atribut yang dapat mengontrol posisi" relative dari setiap tampilan akan ditekankan, silahkan perhatikan gambar dan script dibawah ini:
Script:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp" >
        <EditText
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/reminder" />
        <Spinner
            android:id="@+id/dates"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/times" />
        <Spinner
            android:id="@id/times"
            android:layout_width="96dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/name"
            android:layout_alignParentRight="true" />
        <Button
            android:layout_width="96dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/times"
            android:layout_alignParentRight="true"
            android:text="@string/done" />
    </RelativeLayout>
    
Hasil:
Tahap selanjutnya kita akan mempelajari mengenai FrameLayout, silahkan teman- teman simak pembahasan dibawah ini:

3. FrameLayout Pada Android Studio

FrameLayout ini merupakan Layout yang paling sederhana, Layout ini dapat membuat komponen yang terdapat didalamnya menjadi menumpuk serta saling menutupi antara yang satu dengan yang lainnya.

Komponen yang paling terdahulu atau pertama ini pada layout ini akan menjadi suatu alas bagi komponen -komponen di atasnya. Pada materi penerapan fragment dalam materi sebelumnya, framelayout ini memiliki kemampuan untuk menjadi sebuah kontainer tentunya untuk frament - fragment yang terdalam dalam sebuah activity. Dibawah ini merupakan gambar ilustrasi terhadap fragment- fragment terhadap view atau child yang dimilikinya:
Untuk Contoh dari penggunaan FrameLayout, Silahkan teman- teman ikut script dibawah ini:
Script:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#1113">
  
    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@color/colorPrimary"
         />

    <Button
        android:layout_width="300px"
        android:layout_height="100px"
        android:layout_gravity="center"
        android:text="Tombol"
        android:background="@color/colorAccent"
        android:textColor="#fff"
        android:textSize="20sp" />
</FrameLayout>
Hasil:

Selanjutnya kita akan mempelajari Mengenai TableLayout, silahkan teman- teman simak pembahasan dibawah ini:

4. TableLayout Pada Android Studio

Suatu susunan komponen yang terdapat didalam tablelayout tentunya akan berada dalam daris serta kolom. Namun tentunya layout ini tidak akan dapat menampilkan garis pembatas untuk setiap baris, colom ataupun cel-nya.

TableLayout tentunya menempatkan turunannya kedalam suatu baris dan kolom. Tabel ini dapat memiliki jumlah kolom yang banyak tentunya tetap memperhatikan jumlah baris yang mempunyai sel terbanyak. 

Untuk conyoh pengampikasian dari TableLayout ini sendiri, silahkan teman -teman perhatikan gambar maupun script dibawah ini:

Script:

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">

        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Open..."
                android:padding="3dip" />
            <TextView
                android:text="Ctrl-O"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>

        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Save..."
                android:padding="3dip" />
            <TextView
                android:text="Ctrl-S"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>

        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Save As..."
                android:padding="3dip" />
            <TextView
                android:text="Ctrl-Shift-S"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>

        <View
            android:layout_height="2dip"
            android:background="#FF909090" />

        <TableRow>
            <TextView
                android:text="X"
                android:padding="3dip" />
            <TextView
                android:text="Import..."
                android:padding="3dip" />
        </TableRow>

        <TableRow>
            <TextView
                android:text="X"
                android:padding="3dip" />
            <TextView
                android:text="Export..."
                android:padding="3dip" />
            <TextView
                android:text="Ctrl-E"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>

        <View
            android:layout_height="2dip"
            android:background="#FF909090" />

        <TableRow>
            <TextView
                android:layout_column="1"
                android:text="Quit"
                android:padding="3dip" />
        </TableRow>
    </TableLayout>
    
Hasil:

5. ScrollView Pada Android Studio

ScrollView merupakan suatu Layout yang memungkinkan komponen- komponen lainnya kita geser baik secara vertical maupun secara horizontal, Komponen didalam scrollview hanya diperbolehkan satu parent utama yaitu relativelayout, framelayout, tablelayout, maupun linearlayout.

Pada bagian ini kita akan mempelajar mengenai ScrollView. ScrollView merupakan suatu container untuk tampilan UserInterface pada Android.  ScrollView juga dapat digunakan sehigga user dapat melakukan scroll secara horiontal maupun secara vertical pada suatu tampilan atau layout yang dibuat jika layout tersebut dirasa terlalu besar.

Untuk membuat ScrollView , Silahkan teman -teman buat project baru telebih dahulu.
Selanjutnya membuat layout baru dengan nama apa saja tergantung dengan keinginan teman- teman

Kita akan membuatt Container yang akan kita gunakan untuk membuat ScrollView dengan LinearLayout didalamnya.

Pertama, Silahkan teman - teman tambahkan terlebih dahulu ScrollView dan attribut seperti script berikut ini:



<ScrollView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
</ScrollView>
Selanjutnya pada ScrollView silahkan tambahkan LinearLayout serta atributnya:
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">
</LinearLayout>
Setelah teman - teman mengetaui inti dari komponen scrollView silahkan teman- teman bebas untuk menambahkan UserInterface apa saja yang ingin teman- teman tampilkan di dalam LinearLayout, tentunya jika terlalu panjang maka tampilan akan secara otomatis discoll secara vertical

Catatan: Scrollview ini tidak dapat digunakan dengan ListView.

Untuk script lengkapnya, silahkan teman -teman ikuti script dibawah ini:
<ScrollView
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="100dp"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="Hello World"
        android:textSize="70dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="100dp"/>
</LinearLayout>
</ScrollView>
Jika aplikasi dijalankan maka pengguna dapat melakukan scroll pada tampilannya, untuk gambarnya silahkan teman- teman perhatikan gambar dibawah ini:

6. Satuan Dimensi di Android

Kita mengenal platform android ini sangat aneka ragam. mulai dari ukuran perangkatnya, spesifikasi, layar, hingga level operating systemnya.

Android sendiri tentunya memiliki satuan dimensi untuk ukuran tinggi maupun lebar sebuah komponen view maupun viewgroup. Dibawh ini adaah satuan esensi dari dimensi unit di android:

  1. Ekosistem pada android dikenal sebagai fragmentasi spesifikasi suatu perangkat yang sangat beragam atau bervareasi. Beragam perangkat Android tentunya memiliki perbedaan kerapatan pexel dan dimensi layar. 
  2. Untuk suatu tampilan yang konsisten dalam perangkat Android, tentunya terdapat 2 jenis satuan yaitu dp/dip (density-independent pixel) dan sp (scale-independent pixels).
  3. Satuan dip atau dp digunakan untuk suatu satuan dari nilai dimensinya, misal height (attribut: layout_height) dan width (attribut: layout_width) dari sebuah komponen view dan viewgroup.
  4. Satuan sp diperuntukan untuk digunakan pada ukuran teks, tentunya mempunyai perbedaan dengan dp, adalah suatu satuan android yang akan men-scale ukuran teks sesuai dengan ukuran di peranti (yang dapat kita akses melalui menu settings)
Contoh:
Misalkan terdapat dua buah lablet dengan ukuran diagonal layar 7-inch. Pada tabel pertama yaitu (A)

memiliki resolusi layar yaitu 1200x1920px 320dpi. Untuk tablet kedua (B) memiliki resolusi sebesar 2048x1536px 326dpi.

Pada sebuah tombol berukuran 300x300px tentunya akan tampak normal pada tablet A, tetapi tombol tersebut akan terlihat kecil jika kita lihat pada tablet B.

Teatapi tentunya akan berbeda jika kita menentukan tombol buttonnya dengan ukuran yang bergantung kepada density layar. Bila teman - teman menggunakan ukuran 300x300px, maka tombol tersebut akan terlihat baik tentunya pada beragam perangkat dengan resolusi dan ukuran yang berbeda.

Mungkin Sekian yang dapat Admin bagikan pada kesempatan kali ini, mudah - mudahan artikel yang admin buat dapat memberikan ilmu dan bermanfaat bagi para pembaca.

Terimakasih telah berkumjung dan membaca Artikel ini mengenai Belajar Dasar Android Studio Views dan ViewGroup.

 Semoga bermanfaat -- Salam Success :)

By: Muhammad Rizal Supriadi

Anda mungkin menyukai postingan ini