Android | Membuat Tab Image Menu

lanjut dari tutorial sebelum'nya Android | Membuat Image Menu

sekarang lanjut ke membuat TAB Menu + Gambar 

Tampilan Tab Menu nih seperti ini 

Oke Langsung aja tanpa basa basi :v

• Buat project File -> New -> Android Project dan beri nama Activity  MainActivity (default aja deh :p )
• Buka MainActivity dan extends class'nya TabActivity.

    public class MainActivity extends TabActivity { 

sekarang buka  main.xml di res -> layout folder dan ikuti code'nya seperti ini :

   <?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost> 

• Sekarang kita butuh 3 Activity dan 3 Xml untuk mengintegrasikan tab'nya kita beri nama Activity'nya FotoActivity.java , LaguActivity.java , VideoActivity.java | dan 3 xml'nya foto_layout.xml , lagu_layout.xml , video_layout.xml Selanjut'nya ikuti Code di bawah OK ? :p 

• FotoActivity

   package ketikanpelajarbodoh.tabmenu;

import android.app.Activity;
import android.os.Bundle;

public class FotoActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.foto_layout);
    }
} 

• LaguActivity

   package ketikanpelajarbodoh.tabmenu;

import android.app.Activity;
import android.os.Bundle;

public class LaguActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.lagu_layout);    }
} 

• VideoActivity

   package ketikanpelajarbodoh.tabmenu;

import android.app.Activity;
import android.os.Bundle;

public class VideoActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.video_layout);
    }
} 

• foto_layout.xml

   <?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">
  
  
  <TextView android:text="FOTO NENG KENE :V"
     android:padding="15dip"
     android:textSize="18dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"/>
    
</LinearLayout> 

• lagu_layout.xml

   <?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">
  
  
  <TextView android:text="LAGU NENG KENE :V"
     android:padding="15dip"
     android:textSize="18dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"/>
</LinearLayout> 

• video_layout.xml

   <?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">
  
  
  <TextView android:text="Video ++  NENG KENE :V"
     android:padding="15dip"
     android:textSize="18dip"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"/>
</LinearLayout> 

• Nah sekarang kita buat icon'nya download icon sesuka Kalian ! , saya pake icon ini 

• Buat XML baru di Folder drawable dan simpan icon" itu di drawable
• sekarang kita buat 3 XML baru yang di simpan di folder drawable dengan nama : icon_foto_tab.xml , icon_lagu_tab.xml , icon_video_tab.xml

• sekarang kita beri code" nya 
• icon_foto_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/photos_gray"
          android:state_selected="true" />
    <item android:drawable="@drawable/photos_white" />
</selector> 

• icon_lagu_tab.xml

   
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/songs_gray"
          android:state_selected="true" />
    <item android:drawable="@drawable/songs_white" />
</selector>  

• icon_video_tab.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/videos_gray"
          android:state_selected="true" />
    <item android:drawable="@drawable/videos_white" />
</selector>
  

• nah sekarang tinggal kita gabungin tuh MainActivity beri code seperti ini 

   
package ketikanpelajarbodoh.tabmenu;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TabHost tabHost = getTabHost();
        
        
        TabSpec photospec = tabHost.newTabSpec("Photos");
        photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_foto_tab));
        Intent photosIntent = new Intent(this, FotoActivity.class);
        photospec.setContent(photosIntent);
        
        
        TabSpec songspec = tabHost.newTabSpec("Songs");
        
        songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_lagu_tab));
        Intent songsIntent = new Intent(this, LaguActivity.class);
        songspec.setContent(songsIntent);
        
        
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_video_tab));
        Intent videosIntent = new Intent(this, VideoActivity.class);
        videospec.setContent(videosIntent);
        
        
        tabHost.addTab(photospec); 
        tabHost.addTab(songspec); 
        tabHost.addTab(videospec);
    }
}  

Nah selesai , !!!
eiitttss , jangan lupa tuh AndroidManifest.xml nya di daftarin tuh Activity'nya ;p

nah coba deh di play ,

nih link buat download 

Oke sekarang waktu'nya Penjelasan Coding'nya yukk :D 

kemaren ada temen saya yang nyuruh ngasi penjelasan akan code''e nya gituu :v

• MainActivity.java  

    // Tab untuk mengambil Class FotoActivity.java
  //membuat Host baru yang bernama Photos
        TabSpec photospec = tabHost.newTabSpec("Photos");
  //indicator Photos mengambil icon" Resources pada drawable.icon_foto_tab
        photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_foto_tab));
  // menambah intent baru yang bernamakan photosIntent dan menggabungkan dengan FotoActivity.java
        Intent photosIntent = new Intent(this, FotoActivity.class);
  // menampilkan intent yang di buat tadi , 
        photospec.setContent(photosIntent);
        
        //Menambahkan Space Tab yang di buat tadi 
        tabHost.addTab(photospec); // tambah photos tab
        tabHost.addTab(songspec); // tambah songs tab
        tabHost.addTab(videospec); // tambah video tab 

• icon_foto_tab.xml / icon_lagu_tab.xml / icon_video_tab.xml

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- bila kita klik akan mengambil gambar di drawable/photos_gray  -->
    <item android:drawable="@drawable/photos_gray"
          android:state_selected="true" />
    <!-- bila kita tidak klik akan mengambil gambar di drawable/photos_white  -->
    <item android:drawable="@drawable/photos_white" />
</selector>

• activity_main.xml

   

//TabHost di gunakan untuk membuat tab dan di dalamnya bisa di tambahkan layout 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost> 

oke bila ada yg mau download source'nya monggo sedot di sini :p

DOWNLOAD