4 Pemograman perangkat Bergerak (Mengenal Layout di Pemograman Android)

Kompetensi Dasar

3.2. Memahami teknik desain aplikasi mobile

4.2. Menyajikan desain aplikasi berbasis mobile

Materi pokok

Mengenal Layout

oke sebelumny saya ingin menanyakan dulu kepada temen-temen, pernahkah kalian mendengar kata-kata layout, ataukah sudah paham apa yang di maksud dengan layout ini? kalo belum nih jawabanya inget dan di catat ya...

Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android bisa terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan dimungkinkan adanya nested layout dalam satu file UI XML. Penjelasan mengenai XML Layout dapat dibaca pada http://developer.android.com/guide/topics/ui/declaring-layout.html

Terdapat empat jenis Layout utama di Android :

Linear Layout
Relative Layout
Frame Layout
Grid Layout

dari 4 macam layout ini Perbedaanya adalah pada penempatan komponen-komponen (child view) di dalamya,

sebelum saya melanjutkan penjelasan mengenai Layout ini ada baikannya kita belajar terlebih dahulu mengenai pengelolaan Tampilan di dalam Android.

di dalam Android tampilan (Views) secara garis besar menggunakan beberapa komponen tampilan yaitu

TextView = digunakan untuk menampilkan text
ImageView = digunakan untuk menampilkan image (gambar)
Button = diunkan untuk menampilkan tombol
CheckBok = digunakan untuk meampilkan cek bok/pilihan
EditText = digunakan untuk menginfutkan text kepada sistem
ProgressBar
ImageButton
DatePicker
WebView

Macam-macam View tersebut dapat kita kelompokkan menjadi satu wadah, yaitu dengan menggunakan ViewGroup.

sebelum ke pembahasan ViewGrup bagai mana cara membedakan tampilan pada Android coba perhatikan gambar di bawah ini

Coba kalian tebak ada berapa type tampilan pada halaman di atas?

oke pada gambar di bawah ini saya akan menjelaskanya

pada gambar di atas terdapat 5 type view yakni 1 ImageView 3 TextView dan 1 Button

cukup mudah kan menebaknya.

oke lanjut kepada pembelajaran berikutnya.

pertanyaanya bagaimana cara menampilkan seperti gambar tampilan di atas, ?

tampilan android biasanya di kelola oleh bahasa XML, apa itu XML? XML kepanjangan dari Extensible Markup Language, XML termasuk bahasa markup ,yang diprakarsai oleh W3C ,selaku Konsorsium World Wide Web, yang dimana XML , merupakan versi lanjutan dari HTML(Hypertext Markup Language). Jika HTML ,hanya menampilkan informasi ,XML memproses dan mengolah informasi. Informasi ini bisa kita sebut sebagai element. Setiap awalan element ,akan di awali dengan tag pembuka seperti < dan harus di akhiri dengan tag penutup />. Setiap element mempunyai detail-detail informasi ,yang biasa di sebut atribut. Masing-masing atribut , mempunyai nama dan value atau nilai. Sebagai contoh ,penerapan XML pada Aplikasi Android, untuk lebih jelasnya bisa dilihat,

oke kembali ke bahasan utama kita yakni tampilan xml di android yang populer di gunakan di setiap aplikasi

contoh format pengkodean XML

Name of view / component = TextView
Opened using <, and closed using />; self-closing tag or separate-closing tag
Attribute name → interface characteristic, position, etc. in Android Smartphone
Actual values → using quotation marks (“)
Use exact command

Oke nanti kita belajar lebih lanjut mengenai atribut dan nilai dari setiap komponen pada tampilan Android.

Selanjutnya saya akan menjelaskan dasar yang ke2 dalam pemograman tampilan android yakni ViewGrup

Apa itu ViewGroup ?

ViewGroup merupakan SubClass dari View yang bertugas sebagai wadah dari semua instance dari View. Contohnya antara lain :

LinearLayout
RelativeLayout
ListView
GridView

Contoh Penggunaan Lainya

TABLE LAYOUT
ABSOLUTE LAYOUT
FRAME LAYOUT
SCROLL VIEW

Daftar diatas merupakan ViewGroup yang sering dipergunakan saja. Dari pengertian di atas kita bisa simpulkan bahwa activity_main.xml mempunyai ViewGroup RelativeLayout yang berisikan TextView.

1. Linear Layout

Contoh Tampilan Dari Linier Layout

Contoh penggunaan Kode

Linear Layout Horizontal

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with horizontal orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
 <!-- Button1 -->
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple" />
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:text="Codestuffs" />
  <!-- Button3 -->

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="0dip"
        android:text=".com" 
        android:layout_weight="1"/>
 </LinearLayout>

Linear Layout Vertical

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with vertical orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 <!-- Button1 -->
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple" />
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:text="Codestuffs" />
  <!-- Button3 -->

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="0dip"
        android:text=".com" 
        android:layout_weight="1"/>
 </LinearLayout>

Coba Kalian Uji Coba Kode Di atas di android Studio atau bisa di Android Visualizer

Klik Di Sini untuk menuju ke Android Visualizer

2. Relative Layout

Gambaran Relative Layout

Contoh Tampilan

<?xml version="1.0" encoding="utf-8"?>
<!-Setting the relative layout with horizontal orientation--><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 <!-- Button1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Simple"/>
<!-- Button2 -->
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Codestuffs"<!-- Use of rightof to place button2 to right of button 1 -->
        android:layout_toRightOf="@+id/button1"/>
 



  <!-- Button3 -->

     <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=".com"<!-- Use of below to place button3 below button 2 -->
        android:layout_below="@+id/button2"/>
 </RelativeLayout>