Minggu, 23 Maret 2014

Mengganti Display pada Android Eclipse

Android adalah system operasi mobile berbasis linux. Aplikasi android bisa kita buat melalui eclipse dengan menginstall ADT dan SDK androidnya pada eclipse tersebut. IDE Eclipse adalah sebuah software IDE pemrogramman java yang cukup terkenal, adanya IDE juga cukup membantu kita dalam bermain coding saat membuat aplikasi. Saat kita akan mendevelope aplikasi android akan cukup membantu dengan adanya sebuah IDE, Eclipse memungkinkan untuk mendevelope android.

Langkah mengganti Display pada Android Eclipse adalah sebagai berikut :

 1. Buat Project Baru :
File → New → Android Aplication Project → (Beri Nama Project) | (Pada Project yang saya gunakan adalah "Tugas3") → Click Finish

2. Buka Project Tugas3 → res → values → string.xml
Buat String yang akan di gunakan pada Project tersebut.

Membuat string baru dengan xml pada project Tugas3

3. Kemudian membuat Layout pada :  Project Tugas3 → res → layout1.xml
Buat Design tampilan Display1 pada Project tersebut. 


Code Listing (Coding) Layout1

4. Pada Project Tugas3 → src → com.example.tugas3 → Form1.java. Tambahkan listing program sebagai berikut :
(Mengambil Id Button yang terdapat pada Layout1)


Code Listing (Coding) Form1
5. Lalu membuat Layout lagi pada :  Project Tugas3 → res → layout2.xml
Buat Design tampilan Display2. 


Code Listing (Coding) Layout2


6. Pada Project Tugas3 → src → com.example.tugas3 → Form2.java. Tambahkan listing program sebagai berikut :
(Mengambil Id Button yang terdapat pada Layout2) 


Code Listing (Coding) Form1

  
7. Lalu mengatur activity pada AndroidManifest.xml : 
Buka Project Tugas3 → AndroidManifest.xml


Megatur Activity pada AndroidManifest.xml

  8. Kemudian Run dengan cara : click kanan Tugas3 → Run As → Android Application

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

Display 1 | Layout 1


9. Ketika Click  Button NEXT maka akan muncul tampilan berikut ini :

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

Display 2 | Layout 2

10. Jika Click  Button PREV maka akan kembali pada tampilan Display1.

 

Sekian Informasi tentang Mengganti Display dengan mengunakan Button pada Android Eclipse semoga berguna dan bermanfaat :) 

 

zza ibliizt™

Download (apk)
Diposting oleh di Tidak ada komentar:

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:
Langganan: Postingan (Atom)