Backgroundimage for a tab

Question

I would like to set a background for one of my tabs (or just insert a picture instead of a text). I found this older question: Can we set a background image to tabs?

I would like to do the same, but I used a different method to implement my tabs. This is the code for my tabs:

final ActionBar actionBar = getActionBar();
          actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

             ActionBar.Tab tabA = actionBar.newTab();
              actionBar.setDisplayShowHomeEnabled(false);
             actionBar.setDisplayShowTitleEnabled(false);

            tabA.setText("Tab1");
         tabA.setTabListener(new com.example.MainActivity.TabListener<Tab1>(this, "Tab1", Tab1.class));
         actionBar.addTab(tabA);





          Tab tabB = actionBar.newTab();
        tabB.setText("Tab2");
         tabB.setTabListener(new com.example.MainActivity.TabListener<Tab2>(this, "Tab2", Tab2.class));
          actionBar.addTab(tabB);

            Tab tabC = actionBar.newTab();
            tabC.setText("Jahrgangsstufe");
         tabC.setTabListener(new com.example.MainActivity.TabListener<Tab3>(this, "Jahrgangsstufe", Tab3.class));
         actionBar.addTab(tabC);

        if (savedInstanceState != null) {
              int savedIndex = savedInstanceState.getInt("SAVED_INDEX");
            getActionBar().setSelectedNavigationItem(savedIndex);
       }

I don't know how to use the code that is suggested in this thread, because I don't use a tabhost.

Has anybody an idea how I can implement this into my method with actionbars or help me to migrate my code to work with a tabhost?

I attached a picture that shows how I want it to look like.

I hope I made myself clear, my english is not perfect.

Updated code:

mActionBar.setDisplayShowHomeEnabled(false);
        mActionBar.setDisplayShowTitleEnabled(false);
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);



        tabA = mActionBar.newTab();
        tabA.setIcon(R.drawable.icon_settings);
        tabA.setTabListener(new com.example.MainActivity.TabListener<Tab1>(this, "Einstellungen", Tab1.class));
        mActionBar.addTab(tabA);


        tabB = mActionBar.newTab();
        tabB.setText("Meine Kurse");
        tabB.setTabListener(new com.example.MainActivity.TabListener<Tab2>(this, "Meine Kurse", Tab2.class));
        mActionBar.addTab(tabB);

        tabC = mActionBar.newTab();
        tabC.setCustomView(R.layout.tab_one);
        tabC.setTabListener(new com.example.MainActivity.TabListener<Tab3>(this, "Jahrgangsstufe", Tab3.class));
        mActionBar.addTab(tabC);


        if (savedInstanceState != null) {
              int savedIndex = savedInstanceState.getInt("SAVED_INDEX");
            getActionBar().setSelectedNavigationItem(savedIndex);
       }

    public void createTab(){
    ActionBar.Tab tab = getActionBar().newTab();
    tab.setTabListener(new com.example.MainActivity.TabListener<Tab3>(this, "Jahrgangsstufe", Tab3.class));
    tab.setCustomView(R.layout.tab_one);
    getActionBar().addTab(tab);




}

tab_one.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >

    <ImageView
            android:id="@+id/tab_one_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/bessellogo_white" />

    <TextView
            android:id="@+id/tab_one_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab_text" />

</LinearLayout>



05-16 20:58:22.495  12861-12861/com.example.MainActivity E/AndroidRuntime﹕ FATAL EXCEPTION: main
java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.example.MainActivity/com.example.MainActivity.MyActivity}: java.lang.NullPointerException
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2151)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2286)
        at android.app.ActivityThread.access$600(ActivityThread.java:144)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1259)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:137)
        at android.app.ActivityThread.main(ActivityThread.java:5188)
        at java.lang.reflect.Method.invokeNative(Native Method)
        at java.lang.reflect.Method.invoke(Method.java:525)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:745)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:561)
        at dalvik.system.NativeStart.main(Native Method)
 Caused by: java.lang.NullPointerException
        at android.app.Activity.initActionBar(Activity.java:1896)
        at android.app.Activity.getActionBar(Activity.java:1879)
        at com.example.MainActivity.MyActivity.<init>(MyActivity.java:66)
        at java.lang.Class.newInstanceImpl(Native Method)
        at java.lang.Class.newInstance(Class.java:1130)
        at android.app.Instrumentation.newActivity(Instrumentation.java:1064)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2142)
            at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2286)
            at android.app.ActivityThread.access$600(ActivityThread.java:144)
            at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1259)
            at android.os.Handler.dispatchMessage(Handler.java:99)
            at android.os.Looper.loop(Looper.java:137)
            at android.app.ActivityThread.main(ActivityThread.java:5188)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:525)
            at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:745)
            at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:561)
            at dalvik.system.NativeStart.main(Native Method)

Answer 1

set tab icon instead of text using tabA.setIcon(R.drawable.your_image_name)

For Custom Tab Views:

tab_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/tab_one_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image/icon_name" />

    <TextView
        android:id="@+id/tab_one_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="your_text_here" />

</LinearLayout>

Create method in your code like this:

public void createTab(int view) {
    ActionBar.Tab tab = getSupportActionBar().newTab();
    tab.setTabListener(this);
    tab.setCustomView(view);
    getSupportActionBar().addTab(tab);
}

and then call you method in onCreate like this, for each tab:

createTab(R.layout.tab_one);

Tested Code:

So I just tested this code and it works for me!

I have this at top:

ActionBar mActionBar;
Tab tab;

And in onCreate, I have this:

tab = mActionBar.newTab();
tab.setCustomView(R.layout.tab_one); 
tab.setTabListener(tabListener);
mActionBar.addTab(tab);

and this is how my tab_one.xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/tab_one_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_tab_icon" />

    <TextView
        android:id="@+id/tab_one_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab Text" />

</LinearLayout>

Answer 2

Add the desired image to your drawable folder, and then access it like so:

actionBar.setStackedBackgroundDrawable(getResources()
                                       .getDrawable(R.drawable.your_background_image));