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.

enter image description here

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)

user184994 · Answer 1 · 2014-05-15T21:52:00.673

2

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

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

edited May 15 '14 at 21:52

answered May 15 '14 at 20:58

user184994

17,791
1
46
52

could you tell me how to create a custom view? – Fynn May 15 '14 at 21:21
After having a play around, it seems I've found a much easier way. See my edited answer – user184994 May 15 '14 at 21:50
Yes, that works :) But i would like to have that background only for one of my tabs, is that also possible? – Fynn May 15 '14 at 21:57
Having spent this time trying to do so, the shortest answer is: not easily, no :) I assumed creating a custom view for the tab would be relatively straight forward, but the tabs have a built in padding so the background image doesn't fill the whole tab. – user184994 May 15 '14 at 22:03
The answer from the other guy actually got it to work, but thanks for your help :) Now i only have to find out how to make the tab wrap the content. – Fynn May 15 '14 at 22:12

JP24 · Accepted Answer · 2014-05-16T15:49:51.350

0

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>

edited May 16 '14 at 15:49

answered May 15 '14 at 21:23

JP24

26
2

Is it possible to add a Icon AND a text? – Fynn May 15 '14 at 22:45
For both text and icon you need to create custom view for each tab. – JP24 May 16 '14 at 12:58
I already tried to do this on my own, but didn`t got it to work :/ could you tell me how? – Fynn May 16 '14 at 13:00
I updated the original answer with example code. Let me know if this works or not. – JP24 May 16 '14 at 13:35
I implemented your code, but it still only shows the logo, no text. – Fynn May 16 '14 at 13:48
remove tabA.setIcon(R.drawable.your_image_name) if you haven't already done this. and let me know if this work. also if possible put code here so I can take a look at it. – JP24 May 16 '14 at 13:55
I only tried it for tab3 right now. Updated the code in original post – Fynn May 16 '14 at 14:08
try this, replace call to the method `createTab();` with this code: `ActionBar.Tab tab3 = getActionBar().newTab(); tab3.setCustomView(R.layout.tab_one); getActionBar().addTab(tab3); or actionBar.addTab(tabB);` – JP24 May 16 '14 at 14:56
Still no text, only the logo :/ I updated the code in the original post. I had to add the .setTabListener or else the app would crash – Fynn May 16 '14 at 15:08
can you also post your tab_one.xml file – JP24 May 16 '14 at 15:25
so I just tested this code and it works for me! (Answer updated) – JP24 May 16 '14 at 15:50
I updated my code and now the app crashes after directly at the beginning. Updated the original post with my code – Fynn May 16 '14 at 16:35
what error/s are you getting? post the logcat output. – JP24 May 16 '14 at 16:42
Okay, i uploaded the logcat, i hope it is the right part – Fynn May 16 '14 at 19:00
It works now! I just had to define the actionBar after onCreate method and choose a smaller image. Thank you very much for your help! :) – Fynn May 16 '14 at 20:18

Backgroundimage for a tab

2 Answers2