Desain Layout Pada Client Android

Desain layout pada aplikasi Android menggunakan file XML. Semua elemen-elemen interface dituliskan dalam bentuk tag-tag XML. Aplikasi ini menggunakan 6 file XML yaitu Halaman splashscreen, Halaman Utama, Halaman Pengaturan dan 3 Halaman untuk 3 alat gamelan. Berikut adalah penggalan file-file XML yang merupakan desain layout untuk aplikasi Android.

Splashscreen

<?xml version="1.0" encoding="utf-8"?> <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="fill_parent"   android:layout_height="fill_parent" android:background="@drawable/splash"   android:weightSum="1">         <ProgressBar android:id="@+id/progressBar1"                       android:layout_gravity="center_horizontal"                       android:layout_height="wrap_content"                       android:layout_width="162dp"                       android:layout_weight="0.27"/>     </ProgressBar> </LinearLayout>

Halaman Utama

untuk dapat memilih salah satu dari alat musik yang telah disediakan dan juga memilih untuk melakukan pengaturan 

 Setting 

<?xml version="1.0" encoding="utf-8"?> <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:background="#ffffff" android:weightSum="1">       <TextView android:textColor="#800000"                 android:textAppearance="?android:attr/textAppearanceLarge"                 android:layout_width="wrap_content"                 android:layout_gravity="center_horizontal"                 android:text="Setting Page"                 android:id="@+id/textView1"                 android:textStyle="bold"                 android:layout_height="wrap_content"                 android:layout_weight="0.45"></TextView>                      <TextView android:textAppearance="?android:attr/textAppearanceMedium"                android:text="Server:Port"                android:textColor="#800000"                android:textStyle="bold"                android:layout_height="wrap_content"                android:id="@+id/textView2"                android:layout_width="wrap_content"/>                      <EditText android:id="@+id/editTextServer"                android:layout_height="wrap_content"                android:layout_width="357dp"                android:text="@string/blank"/>                      <TextView android:textColor="#800000"                android:textAppearance="?android:attr/textAppearanceMedium"                android:layout_width="wrap_content"                android:text="Channel"                android:id="@+id/textView3"                android:textStyle="bold"               android:layout_height="wrap_content"/>                      <EditText android:id="@+id/editTextChannel"                android:layout_height="wrap_content"                android:layout_width="68dp"                android:text="@string/blank"/>         <LinearLayout android:layout_width="210px"                    android:id="@+id/linearLayout1"                    android:layout_height="wrap_content"                    android:layout_gravity="center_horizontal">                                   <Button android:text="Ok"                    android:id="@+id/btnOK"                   android:layout_width="wrap_content"                   android:layout_height="31dp"                   android:background="#800000"                   android:textColor="#ffffff"                   android:textStyle="bold" android:layout_weight="4.09"/>                        <TextView android:id="@+id/txtSpace"                     android:layout_height="match_parent"                     android:text=" "                     android:layout_width="wrap_content"                     android:layout_weight="0.66"/>              <Button android:text="Cancel"                   android:id="@+id/btnCancel"                   android:layout_width="wrap_content"                   android:layout_height="31dp"                   android:background="#800000"                   android:textColor="#ffffff"                   android:textStyle="bold" android:layout_weight="1.97"/>       </LinearLayout> </LinearLayout>

Alat Musik 1 : Jengglong

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:weightSum="1">         <ImageButton android:src="@drawable/jenglong"                   android:id="@+id/imgJengglong"                   android:layout_width="match_parent"                   android:background="#ffffff"                   android:layout_height="wrap_content"/>                             <LinearLayout android:layout_width="match_parent"                             android:weightSum="1"                             android:background="#ffffff"                             android:layout_height="33dp">                                                           <TextView android:id="@+id/txtLog"                                android:layout_width="wrap_content"                                android:layout_height="match_parent"                                android:text=" "                                android:textColor="#006400"                                android:textStyle="bold"                               android:layout_weight="0.77"/>                      <Button android:id="@+id/btnConnect"                              android:layout_width="wrap_content"                              android:layout_weight="0.22"                              android:layout_height="31dp"                              android:text="Connect"                              android:background="#006400"                              android:textColor="#ffffff"                              android:textStyle="bold"/>               </LinearLayout> </LinearLayout>

 

Alat Musik 2 : Peking

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:weightSum="1">        <LinearLayout android:layout_width="match_parent"                       android:weightSum="1"                       android:background="#ffffff"                       android:layout_height="31dp">               <Button android:text="Connect"                        android:layout_width="wrap_content"                        android:id="@+id/btnConnect"                        android:background="#800000"                        android:textStyle="bold"                        android:layout_height="31dp"                        android:textColor="#ffffff"                        android:layout_weight="0.22"/>               <TextView android:textStyle="bold"                         android:textColor="#800000"                         android:layout_width="wrap_content"                         android:id="@+id/txtLog"                         android:layout_height="42dp"                         android:layout_weight="0.56"                         android:text=" "/>        </LinearLayout>        <ImageButton android:src="@drawable/peking"                      android:layout_height="wrap_content"                      android:layout_width="wrap_content"                      android:id="@+id/imgPeking"/> </LinearLayout>

Alat Musik 3 : Rincik

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:weightSum="1">         <ImageButton android:src="@drawable/rincik"                   android:id="@+id/imgRincik"                   android:layout_height="wrap_content"                   android:layout_width="match_parent"                   android:background="#ffffff"                   android:layout_weight="1.02"/>                             <LinearLayout android:layout_width="match_parent"                             android:weightSum="1"                             android:background="#ffffff"                             android:layout_height="33dp">                      <TextView android:id="@+id/txtLog"                                android:layout_width="wrap_content"                                android:layout_height="match_parent"                                android:text=" "                                android:background="#2E8B57"                                android:textColor="#A52A2A"                                android:textStyle="bold"                                android:layout_weight="0.78"/>                                                          <Button android:id="@+id/btnConnect"                              android:layout_width="wrap_content"                              android:text="Connect"                              android:background="#A52A2A"                               android:textColor="#2E8B57"                              android:textStyle="bold"                              android:layout_weight="0.22"                              android:layout_height="match_parent"/>               </LinearLayout> </LinearLayout>