RSS

Meng-customize Background Tab

19 Jun

Halo lagi semua.. Gw bakal kasi tutorial lagi neh, kali ini, gw bakal jelasin gimana kita buat mengganti background Tab pada Android. Tentunya uda pada tau dong tab itu apa, bagi yang belum tau cara bikin tab gimana, gw rekomendasi buat baca link ini dulu:
http://developer.android.com/resources/tutorials/views/hello-tabwidget.html
nah, di link di atas bakal dijelasin cara bikin tab secara default, nah disini, gw bakal jelasin cara nya gimana kalo mau ganti background secara customize..

Oke, langsung aja, contohnya sederhana aja ya, gw bikin Activity dengan 2 tab, jadi kita mesti bikin 3 Activity, 1 buat Activity utama, dan 1 buat masing2 tab. Disini gw namain main, tabOne, sama tabTwo.
Buat tabOne sama tabTwo, kalian bikin aja Activity dengan tampilan sederhana, trus jangan lupa juga buat “didaftarin” di AndroidManifest. Oke, trus kita bakal “bermain-main” nya di main.
Pertama-tama kita bikin dulu xml nya, xml nya sama persis kok kaya dengan main.xml dari link diatas

main.xml

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

android:padding="5dp">

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

android:padding="5dp" />

</LinearLayout>

</TabHost>

Nah, abis itu kita akan coding di main.java, jadi ketikkan code ini di main.java:

main.java

package com.daniel.customTab;

import android.app.TabActivity;

import android.content.Intent;

import android.graphics.Color;

import android.os.Bundle;

import android.widget.TabHost;

import android.widget.TabHost.OnTabChangeListener;

public class main extends TabActivity implements OnTabChangeListener{

   TabHost tabHost;

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

   @Override

   public void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.main);

      tabHost = getTabHost();

      TabHost.TabSpec spec;

      Intent intent;

      intent = new Intent().setClass(this, tabOne.class);

      spec = tabHost.newTabSpec("tabone").setIndicator("Tab One")

         .setContent(intent);

      tabHost.addTab(spec);

      intent = new Intent().setClass(this, tabTwo.class);

      spec = tabHost.newTabSpec("tabtwo").setIndicator("Tab Two")

         .setContent(intent);

      tabHost.addTab(spec);

      tabHost.setOnTabChangedListener(this);

      changeBG();

}

@Override

public void onTabChanged(String tabId) {

// TODO Auto-generated method stub

   changeBG();

}

public void changeBG()

{

   for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {

      tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#145623"));

   }

   tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab())

      .setBackgroundColor(Color.parseColor("#ADBCEA"));

}

}

yak, gw jelasin dikit. Jadi seperti yang contoh link di atas, kali ini kita bakal extends TabActivity. Sebetulnya bisa juga kalo kita mau extends Activity, tapi ini akan lebih memudahkan, di xml nya pun, kita lihat kita mendeklarasikan id TabHost nya berbeda dengan android:id = “@android:id/tabhost” yang menandakan ini akan digunakan oleh TabActivity dan kita “hanya” perlu memanggilnya dengan sintax getTabHost();

Lalu kenapa implements OnTabChangedListener?? ini karena kita ingin membaca event saat tab tersebut berganti focus alias saat user berpindah dari suatu tab ke tab yang lain.

Oke, sebetulnya inti dari customize ini adalah pemanggilan fungsi changeBG() diatas. Logikanya adalah, saat for, ia mengubah semua background dati tab menjadi sebuah warna/gambar, dan setelah for, ia akan mengubah warna TabHost yang active menjadi sebuah warna khusus lagi. Sederhana kan?? Jika dalam contoh di atas kita mengubah backround menjadi warna dengan sintax setBackgroundColor(Color.parseColor(code_warna), kita juga bisa mengubahnya menjadi image dalam resource dengan sintax setBackgroundDrawable(resources.getDrawable(R.drawable.nama_file)..

Nah, kenapa fungsi chageBG harus dipanggil 2x pada saat onCreate dan onTabChanged??
Pada onCreate, kita ingin memberi warna tampilan awal, karena saat kita melakukan deklarasi tab, Android akan membuat tab style default. Nah, kita ubah tampilannya dengan memanggil fungsi changeBG(). Lalu pada saat onTabChanged, kita perlu memanggil lagi karena perubahan tab yang active sehingga kita perlu memanggil fungsi lagi. Hmmm, kalo ada yang bingung, coba aja diilangin salah satu fungsi changeBG() nya yang di onCreate ato onTabChanged dan liat perubahan yg terjadi. ^^

ini screenshot hasilnya:

Yak,, sekian tutorialnya ya,, kalo ada yg bingung ato gak ngerti silakan tinggalin comment.
Terima Kasih.

 
4 Comments

Posted by on June 19, 2011 in Tutorial Advance

 

4 responses to “Meng-customize Background Tab

  1. teddy

    June 27, 2011 at 7:31 pm

    bang mw nnya neh,gi mana cara nya,,disetiap class nya kita masukin gambar atau button..jd misal nya pas kita ng’clik tab1 keluar button..trus pas ke tab 2 nya..kluar gambar…

    maaf,,bang soal nya msh bru blajar

     
    • Daniel Hace

      June 28, 2011 at 3:25 am

      Terima kasih Teddy atas pertanyaannya..

      ya, jadi tab itu bisa memuat beberapa activity, dalam contoh di atas dia memuat 2 activity yaitu tabOne dan tabTwo, seperti yang ada di sintax:

      intent = new Intent().setClass(this, tabOne.class);
      spec = tabHost.newTabSpec(“tabone”).setIndicator(“Tab One”)
      .setContent(intent);
      tabHost.addTab(spec);

      nah kalau mau buat button sama gambar, tinggal Activity tabOne nya dibuat isinya button, trus Activity tabTwo nya diisi button aja.
      Kalo contoh gw di atas kan sederhana jadi tabOne dan tabTwo nya gw kasi TextView biasa..
      Jadi jangan lupa kalau yang ada di bawah tab itu Activity juga sama kaya yg lain, jadi bisa kita bikin tampilannya dengan xml.. ^^

       
  2. teddy

    June 28, 2011 at 10:31 am

    udah,,bsa bang,,makasih buat pncerahan nya…tutrial nya trus d tambah bang,,sngat bermannfaat…:D

     
  3. pras

    January 13, 2012 at 10:12 am

    om daniel , klo di tab nya mau kita ganti dengan icon gmna caranya om…
    makasih sebelumnya ^_^

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: