Sabtu, 15 Maret 2014

Linear Layout dan Relative Layout

Linear Layout

Linear layout adalah layout yang terstruktur. linear layout akan meletakkan elemen yang ada di dalamnya secara berurutan tergantung orientationnya. jika  orientationnya vertical, maka peletakan elemen akan terurut kebawah. Sedangkan jika orientationnya horizontal (secara default, orientation horizontal tidak ditulis di dalam XML), maka peletakan elemennya akan terurut ke samping. Ini adalah layout paling sederhana di Android.

Berikut ini adalah contoh Linear Layout secara Vertical dengan menggunakan tools Android Eclipse V21.1.0. 

Code Listing Program Linear Layout Vertical :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_android"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- Menampilkan Text Judul -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/Text1"
        android:textColor="#FF0000"
        android:textSize="33sp"
        android:textStyle="bold" />

    <!-- Menampilkan Tombol -->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/ButtonNama"
        android:textColor="#FFFF00"
        android:textSize="14sp"
        android:textStyle="bold" />

    <!-- Menampilkan Gambar -->
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:contentDescription="@drawable/image_mario"
        android:src="@drawable/image_mario" />

    <!-- Menampilkan Rating -->
    <RatingBar
        android:layout_width="194dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <!-- Menampilkan Text dan TextField -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="@string/Text2"
        android:textColor="#FF8000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:inputType="text"
        android:text="@string/TextField1"
        android:textColor="#FFFF00"
        android:textSize="16sp"
        android:textStyle="italic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="150dp"
        android:text="@string/Text3"
        android:textColor="#FF8000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:inputType="text"
        android:text="@string/TextField2"
        android:textColor="#FFFF00"
        android:textSize="16sp"
        android:textStyle="italic" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="300dp"
        android:text="@string/Text4"
        android:textColor="#FF8000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:inputType="text"
        android:text="@string/TextField3"
        android:textColor="#FFFF00"
        android:textSize="16sp"
        android:textStyle="italic" />

    <!-- Menampilkan Tombol Gambar -->
    <ImageButton
        android:layout_width="200dp"
        android:layout_height="43dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:contentDescription="@drawable/button_profile"
        android:src="@drawable/button_profile" />

    <ImageButton
        android:layout_width="200dp"
        android:layout_height="43dp"
        android:layout_gravity="center"
        android:contentDescription="@drawable/button_message"
        android:src="@drawable/button_message" />

</LinearLayout>



Display Linear Layout Vertical :

Hasil tampilan display menggunakan Emulator Device 5.1" WVGA (480 x 800: mdpi)



Relative Layout 

Sedangkan pada Relative layout adalah layout yang tergantung. Relative layout akan meletakkan elemen secara bebas, tidak terurut. Posisi dari sebuah view dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih bebas menggunakan RelativeLayout dibandingkan dengan LinearLayout.

Berikut ini adalah contoh Relative Layout dengan menggunakan tools Android Eclipse V21.1.0.

Code Listing Program Relative Layout :


<RelativeLayout 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:background="@drawable/bg_assasin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- Tampilan Text dan Button Atas -->
    <TextView
        android:id="@+id/JudulText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/Text0"
        android:textColor="#FF0000"
        android:textSize="32sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/ButtonNama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/JudulText"
        android:text="@string/ButtonNama"
        android:textColor="#FFFF00"
        android:textSize="14sp"
        android:textStyle="bold" />

    <!-- Tampilan Gambar Bagian Kiri -->
    <ImageView
        android:id="@+id/ImageViwawa"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/ButtonNama"
        android:layout_marginTop="30dp"
        android:contentDescription="@drawable/image_viwawa"
        android:src="@drawable/image_viwawa" />

    <!-- Tampilan Text Bagian Kanan -->
    <DigitalClock
        android:id="@+id/Time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ButtonNama"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="40dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:textColor="#66FF00"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/Username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/Time"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:text="@string/Text5"
        android:textColor="#FF8000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/ET1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/Username"
        android:layout_marginLeft="35dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:inputType="text"
        android:text="@string/TextField4"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/Password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ET1"
        android:layout_marginLeft="35dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:text="@string/Text6"
        android:textColor="#FF8000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/ET2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/Password"
        android:layout_marginLeft="35dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:inputType="text"
        android:text="@string/TextField5"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/ButtonFacebook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ET2"
        android:layout_marginLeft="165dp"
        android:layout_marginTop="7dp"
        android:layout_toRightOf="@id/ImageViwawa"
        android:contentDescription="@drawable/button_facebook"
        android:src="@drawable/button_facebook" />

    <ImageView
        android:id="@+id/ButtonTwitter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ET2"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="7dp"
        android:layout_toRightOf="@id/ButtonFacebook"
        android:contentDescription="@drawable/button_twitter"
        android:src="@drawable/button_twitter" />

    <!-- Tampilan Gambar Icon Bagian Atas -->
    <ImageView
        android:id="@+id/Ico1"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/ButtonTwitter"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="60dp"
        android:contentDescription="@drawable/ico_playstore"
        android:src="@drawable/ico_playstore" />

    <ImageView
        android:id="@+id/Ico2"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/ButtonTwitter"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="60dp"
        android:layout_toRightOf="@id/Ico1"
        android:contentDescription="@drawable/ico_baterai"
        android:src="@drawable/ico_baterai" />

    <ImageView
        android:id="@+id/Ico3"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/ButtonTwitter"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="60dp"
        android:layout_toRightOf="@id/Ico2"
        android:contentDescription="@drawable/ico_folder2"
        android:src="@drawable/ico_folder2" />

    <ImageView
        android:id="@+id/Ico4"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/ButtonTwitter"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="60dp"
        android:layout_toRightOf="@id/Ico3"
        android:contentDescription="@drawable/ico_folder1"
        android:src="@drawable/ico_folder1" />

    <!-- Tampilan Gambar Icon Bagian Bawah -->
    <ImageView
        android:id="@+id/Ico5"
        android:layout_width="70dp"
        android:layout_height="60dp"
        android:layout_below="@id/Ico1"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="25dp"
        android:contentDescription="@drawable/ico_audio"
        android:src="@drawable/ico_audio" />

    <ImageView
        android:id="@+id/Ico6"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/Ico2"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="25dp"
        android:layout_toRightOf="@id/Ico5"
        android:contentDescription="@drawable/ico_radio"
        android:src="@drawable/ico_radio" />

    <ImageView
        android:id="@+id/Ico7"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/Ico3"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="25dp"
        android:layout_toRightOf="@id/Ico6"
        android:contentDescription="@drawable/ico_earphone"
        android:src="@drawable/ico_earphone" />

    <ImageView
        android:id="@+id/Ico8"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_below="@id/Ico4"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="25dp"
        android:layout_toRightOf="@id/Ico7"
        android:contentDescription="@drawable/ico_dadu"
        android:src="@drawable/ico_dadu" />

    <!-- Tampilan Gambar Menu -->
    <EditText
        android:id="@+id/Garis"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/Ico5"
        android:layout_marginTop="50dp"
        android:inputType="text" />

    <ImageView
        android:id="@+id/Menu"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:layout_below="@id/Garis"
        android:layout_centerInParent="true"
        android:layout_marginTop="10dp"
        android:contentDescription="@drawable/menu_menu80a"
        android:src="@drawable/menu_menu80a" />

    <ImageView
        android:id="@+id/MenuChamp"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/Garis"
        android:layout_marginRight="40dp"
        android:layout_marginTop="15dp"
        android:layout_toLeftOf="@id/Menu"
        android:contentDescription="@drawable/menu_champ65a"
        android:src="@drawable/menu_champ65a" />

    <ImageView
        android:id="@+id/MenuHome"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/Garis"
        android:layout_marginRight="30dp"
        android:layout_marginTop="15dp"
        android:layout_toLeftOf="@id/MenuChamp"
        android:contentDescription="@drawable/menu_home65a"
        android:src="@drawable/menu_home65a" />

    <ImageView
        android:id="@+id/MenuVideos"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/Garis"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@id/Menu"
        android:contentDescription="@drawable/menu_videos65a"
        android:src="@drawable/menu_videos65a" />

    <ImageView
        android:id="@+id/MenuBack"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/Garis"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@id/MenuVideos"
        android:contentDescription="@drawable/menu_back65a"
        android:src="@drawable/menu_back65a" />

</RelativeLayout>


Display Relative Layout :

Hasil tampilan display menggunakan Emulator Device 5.1" WVGA (480 x 800: mdpi) 



 

 

 

  Sekian Informasi tentang Linear Layout dan Relative Layout Android Eclipse semoga postingan ini dapat berguna dan bermanfaat :) 

  zza ibliizt™





Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)