Question

I’m using Tab Layout and I want to do two things:

1. set the color so it won’t be gray
2. reduce the text size, the text doesn’t fit.

also, the text is in most part on the icon instead of below it (can I do something about it ?).

Any ideas on how can I do this ?

edit: I’m creating a new tab in this manner:

spec = tabHost.newTabSpec("artists").setIndicator(
    "Artists",
    res.getDrawable(R.drawable.ic_tab_artists)
).setContent(intent);
tabHost.addTab(spec);

I want to change the size of the word “artists”.

Answer 1

You should define your own view.

tabHost.newTabSpec("tab1")
                .setIndicator(prepareTabView(this, "title"))
                .setContent(intent);

and you can change the text size here tv.setTextSize(20)”

public static View prepareTabView(Context context, String text) {
        View view = LayoutInflater.from(context).inflate(
                R.layout.tab_indicator, null);
        TextView tv = (TextView) view.findViewById(R.id.tabIndicatorTextView);
        tv.setText(text);

        return view;
    }

tab_indicator.xml. you can change the text size here also android:textSize=”20dip”. it is possible to set the background color here. android:background=”@color/back_color_selector_tab”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fakeNativeTabLayout" android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:gravity="center"
    android:orientation="vertical" android:background="@color/back_color_selector_tab">
    <!-- You can even define an Icon here (dont forget to set a custom icon 
        in your code for each Tab): <ImageView android:id="@+id/fakeNativeTabImageView" 
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:src="@drawable/icon" /> -->
    <TextView android:id="@+id/tabIndicatorTextView"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="Tab" android:ellipsize="marquee" />

</LinearLayout>

back_color_selector_tab.xml is an xml for automatic changes in background color in different states.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/state_orange" />
    <item android:state_selected="true" android:drawable="@drawable/background05" /> <!-- focused -->
    <item android:drawable="@drawable/background04" /> <!-- default -->
</selector>

a sample of state_orange.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/orange" />
</shape>