Tutorial Table Layout pada Pemrograman Android

Setelah membuat Relative layout , sekarang kita buat layout table . Mari sekilas kita mengenal Table layout .

Table layout adalah layout yang disusun berdasarkan baris dan kolom . Table layout terdiri atas sejumlah object tableRow . Bagaimana dengan garis tepinya ? ya ! Tidak kelihatan .

Table layout tidak menampilkan garis tepi pada baris , kolom dan sel . Setiao barus bisa memiliki banyak sel atau tidak sama sekali . Setiap sel , bisa digunakan untuk meletakan sebuah object View .

Lebar sebuah kolom ditentkan oleh baris yang memiliki sel paling lebar . Selain itu , table layout dapat di set shrinkable atau stretchable dengan memanggil setColumnShrinkable() atau setColumnStretchable(). Bila diset shrinkable , lebar kolom bisa dimampatkan menyesuaikan object . Bila di set stretchable , kolom bisa direnggangkan menyesuaikan sisa tempat pada table . Kolom dapat di set keduanya shrinkable dan stretchable . Selain itu , kolom dapat disembunyikan dengan memanggil setColumnCollapsed() . 

Bingung ? Sama . hehehehe... oke ,  semakin cepat sobat mencoba , semakin cepat pula sobat bisa . 
Gambar 5.1 adalah tampilan yang akan kita buat .

              

Sebelum kita masuk ke koding nya , saya sarankan sobat untuk membaca postingan sebelumnya yaitu , Tutorial Relative Layout pada Pemrograman Android , Karena dengan memahami tutorial sebelumnya akan membantu sobat dalam memahami tutorial selanjutnya .

Nah sobat bisa mengikuti langkah2 di bawah ini .

Yuk kita mulai :D

1. Jalankan Eclipse , File > New > Android Project
2. isi kotak dialog new sperti berikut :

Project name	TableLayout
Contents	Create new Project in workspace
Build Target	Android 2.1
Application Dame	TableLayout
Package Dame	tableLayout.source
Create Activity	tableLayout
Min SDK version	7

        

     3.   Pada Package Explorer , pilih TableLayout > res > layout >main.xml. ( Gambar 4.2 )
     4.   Tulis kode dibawah ini .

                                          <?xml version="1.0" encoding="utf-8"?>

<TableLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_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>

     5.   Pastikan tableLayout.java seperti dibawah ini . ( Gambar 5.3 )

                                 package tableLayout.source;

import android.app.Activity;

import android.os.Bundle;

public class tableLayout extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

}

     

             

     6.   Lakukan Run dengan shortcut CTRL + F11 atau klik kanan package > Project .

     7.   Lihat hasilnya seperti Gambar 5.1

Gimana sobat ..?? 

Gak susah2 amat kan.. hehehehehe..

Sekian dulu dari saya.. 

Sampai Jumpa pada Tutorial selanjutnya sobat :D

Sumber : OmAyib.com

Read More

Tutorial Relative Layout Pada Pemrograman Android

Tutorial kali ini kita akan belajar membuat Relative Layout. Apa itu relative layout??

Relative layout adalah sebuah layout dimana posisi dari sebuah komponen (simbol, text,dsb) bisa diatur letaknya terhadap komponen lainnya. Misalnya tombol “OK” posisinya berada dibawah “Edit Text”, kemudian tombol “cancel” posisinya berada di sebelah kiri tombol “OK” dan dibawah “edit Text”. Intinya, saling berkaitan satu dengan yang lain. Perhatikan gambar 4.1

Sebelum masuk ke koding nya , saya sarankan sobat untuk membaca TUTORIAL sebelumnya yaitu Tutorial Linier Layout  karena memahami materi pada tutorial sebelumnya akan sangat membantu dalam memahami tutorial selanjutnya .

Nah , Sobat bisa mengikuti langkah2 di bawah ini untuk membuat Linier Layout seperti gambar di atas . Selamat mengerjakan sobat ! :D 

1. Jalankan Eclipse , File > New > Android Project
2. Isikan kotak dialog new seperti berikut :



Project name	RelativeLayout
Contents	Create new Project in workspace
Build Target	Android 2.1
Application Dame	HelloRelativeLayout
Package Dame	relativeLayout.source
Create Activity	RelativeLayout
Min SDK version	7

     3.  Pada Package Explorer , pilih Relative > res > layout > main.xml . ( Gambar 4.2 )
     4.  Gantilah dengan kode dibawah ini .
       

                     <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" android:gravity="top">

<TextView

android:id="@+id/label"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Type here:"/>

<EditText

android:id="@+id/entry"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="@android:drawable/editbox_background"

android:layout_below="@id/label"/>

<Button

android:id="@+id/ok"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/entry"

android:layout_alignParentRight="true"

android:layout_marginLeft="10dip"

android:text="OK" />

<Button

android:layout_alignTop="@id/ok"

android:text="Cancel"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_toLeftOf="@+id/ok"

android:layout_below="@+id/entry"/>

</RelativeLayout>

                                       

     5.   Pastikan pada RelativeLayout.java seperti di bawah ini . ( Gambar 4.3 )
             
             package relativeLayout.source;

import android.app.Activity;

import android.os.Bundle;

public class RelativeLayout extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

}

                                    

\

     6.   Lakukan Run dengan shortcut CTRL + F11 atau klik kanan package > run as > android                  Project.

     7.   Lihat hasilnya seperti Gambar 4.1

Gimana Sobat , mudah kan ? 

Mungkin ini aja Tutorial Pemrograman  android kali ini  sobat . Sampai Jumpa di Tutorial selanjut nya  :D  

Sumber : OmAyib.com

Read More

Tutorial Linear Layout pada Pemrograman Android

Kita masih belajar di tingkat dasar pemrograman java untuk membangun aplikasi berbasis Android. Pada tutorial ini, kita akan membuat layout linier. Seperti apa sih? Hhmm... coba lihat gambar 3.1 berikut.

Untuk cara membuat Linear Layout seperti diatas langsung aja kita ke syntax nya .

1. Jalankan Enclipse, File > New > Android Project

2. Isikan kotak dialog new seperti berikut :

Project name	LayoutLinier
Contents	Create new Project in workspace
Application name	Linier Layout
Package name	Contoh.LayoutLinier
Create Activity	LayoutLinier
Min SDK version	7

3. Pada Package Explorer, pilih LayoutLinier > res > layout > main.xml. (Gambar 3.2)

4. Gantilah dengan kode dibawah ini :

<?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">

<LinearLayout 
android:orientation="horizontal" 
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:layout_weight="1">

<TextView 
android:text="Merah" 
android:gravity="center_horizontal" 
android:background="#aa0000" 
android:layout_height="fill_parent" 
android:layout_weight="1"
android:layout_width="wrap_content"/>

<TextView
android:text="Hijau" 
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent" 
android:layout_weight="1"/>

<TextView 
android:text="Biru" 
android:gravity="center_horizontal" 
android:background="#0000aa"
android:layout_width="wrap_content"
android:layout_height="fill_parent" 
android:layout_weight="1"/>

<TextView 
android:text="Kuning" 
android:gravity="center_horizontal"
android:background="#aaaa00"
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:layout_weight="1"/> 
</LinearLayout>

<LinearLayout 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:layout_weight="1">

<TextView 
android:text="Baris pertama" 
android:textSize="15pt" 
android:layout_width="fill_parent"
android:layout_height="wrap_content" 
android:layout_weight="1"/>

<TextView 
android:text="Baris kedua" 
android:textSize="15pt" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_weight="1"/>

<TextView 
android:text="Baris ketiga" 
android:textSize="15pt"
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_weight="1"/>

<TextView 
android:text="Baris ke empat" 
android:textSize="15pt" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_weight="1"/>

</LinearLayout>

</LinearLayout>

\

5. Pastikan pada LayoutLinier.java seperti dibawah ini. (Gambar 3.3)

package contoh.LayoutLinier;

import android.app.Activity;

import android.os.Bundle;

public class LayoutLinier extends Activity {

           /** Called when the activity is first created. */

          @Override

          public void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.main);

          }

}

6. Lakukan Run dengan shortcut CTRL+F11 atau klik kanan package > run as > adnroid       Project.

7. Lihat hasilnya seperti Gambar 3.1

Nah selesai sudah kita membahas Tutorial Linier Layout pada Pemrograman Android  .

Sampai jumpa di Tutorial selanjutnya sobat :) .

Sumber : OmAyib.com

Read More