How to increase icon size of tabs in TabLayout

Question

I am trying to increase icon size of tabs in my app. Icon sizes are fixed tried out many ways but nothing is working, finally tried the following but no change in size.Please if any one can tell me the right way I will be glad.Thanks in advance.

Here is my code,

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.my1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.feed_s));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.add_ds1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.history_ds));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

style.xml

<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">50dp</item>
</style>

tablayout.xml

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_below="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:theme="@style/AppTheme.ActionBar"/>

score 66 · Accepted Answer · edited Jan 29 '20 at 00:26

66

Hi I faced the same problem before and this is the best solution I could find:

You should use (setCustomView), first of all make a new layout file lets name it (customtab.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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:id="@+id/icon"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

Then and for each tab do this: (use the same layout .xml)

View view1 = getLayoutInflater().inflate(R.layout.customtab, null);
view1.findViewById(R.id.icon).setBackgroundResource(R.drawable.my1);
tabLayout.addTab(tabLayout.newTab().setCustomView(view1));


View view2 = getLayoutInflater().inflate(R.layout.customtab, null);
view2.findViewById(R.id.icon).setBackgroundResource(R.drawable.my2);
tabLayout.addTab(tabLayout.newTab().setCustomView(view2));


View view3 = getLayoutInflater().inflate(R.layout.customtab, null);
view3.findViewById(R.id.icon).setBackgroundResource(R.drawable.my3);
tabLayout.addTab(tabLayout.newTab().setCustomView(view3));

...

OR in a similar way

public static final int[] tabIcon = {R.drawable.icon_one, R.drawable.icon_two, R.drawable.icon_three};

private void setCustomTabs() {

    for (int i = 0; i < tabIcon.length; i++) {
        View view = getLayoutInflater().inflate(R.layout.customtab,null);
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        view.findViewById(R.id.icon).setBackgroundResource(tabIcon[i]);
        if(tab!=null) tab.setCustomView(view);
     }
 }

edited Jan 29 '20 at 00:26

urgentx

3,832
2
19
30

answered Feb 12 '16 at 21:07

Galeb Nassri

764
7
5

Thank you so much. It was the best solution :) – Veena Feb 13 '16 at 05:36
But do i need to create different view for each tab icon – Veena Feb 13 '16 at 05:46
I cannot set tab text using this approach – Neon Warge Feb 07 '17 at 05:01
1

@NeonWarge you can if you add a text view – Galeb Nassri Feb 15 '17 at 17:55
@GalebNassri exactly what I did. Thanks! – Neon Warge Feb 16 '17 at 03:23
1

In my case the icon ImageView could not be fetched by the framework until I specified the ID as follow: `android:id="@android:id/icon"` Possibly because I'm working on a fairly large code base that had its own definition of `id/icon`. Consider updating your solution accordingly. – Slion Mar 20 '17 at 09:12
This solution is good and misleading. The author creates new tabs, while better is to use existing (not adding 3 to existing 3 tabs). See: https://stackoverflow.com/a/47495989/2914140. – CoolMind Jan 19 '19 at 11:41
God, how is this the correct answer! The id of the ImageView has to be android:id="@android:id/icon" to make this work. – b005t3r Feb 08 '19 at 11:00

score 22 · Answer 2 · answered Feb 19 '16 at 19:46

As stated in the documentation, you can create a new layout with an ImageView with android:id="@android:id/icon" and set it as the custom view for the tab. The TabLayout will automatically place the icon in the inner ImageView with android:id/icon

Then in you code you can call the setIcon(R.drawable.yourIcon) while you create the tab.

Then you can apply you custom layout within a for loop :

mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.searchpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.discussionpin));
mTabLayout.addTab(mTabLayout.newTab().setIcon(R.drawable.userpin));

for (int i = 0; i < mTabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = mTabLayout.getTabAt(i);
    if (tab != null) tab.setCustomView(R.layout.view_home_tab);
}

Here is the xml :

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

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="@dimen/tab_icon_size"
        android:layout_height="@dimen/tab_icon_size"
        android:layout_centerInParent="true"/>

</RelativeLayout>

Worked for me. Additionally if you want to use a selector to represent different states you need to set the initial selected state of your custom view. tab.getCustomView().setSelected(tab.isSelected()); — lilienberg, Apr 26 '16 at 12:52
This is just a [dimension resource](https://developer.android.com/samples/BasicSyncAdapter/res/values/dimen.html) created in the values/dimens.xml file. — Vadim Caen, May 11 '17 at 10:38
This will take the whole tab. What if we have an icon with text and we don't want the text to disappear? — Mehrdad Salimi, Oct 30 '18 at 16:07

Anand Savjani · Answer 3 · 2018-05-25T14:24:26.030

5

No need to take any xml view . Create imageview runtime and add image as view :)

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(drawableImage);
        tabLayout.getTabAt(i).setCustomView(imageView);
    }

Happy codding

edited May 25 '18 at 14:24

answered Oct 19 '16 at 09:35

Anand Savjani

2,484
3
26
39

score 3 · Answer 4 · answered Sep 28 '17 at 09:07

If you want to change inside all screens i mean full application then you can try this: Create file inside layout folder named: design_layout_tab_icon.xml and paste below code

<?xml version="1.0" encoding="utf-8"?>
<ImageView
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@android:id/icon"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="center_horizontal"
       android:scaleType="fitCenter"
       tools:src="@mipmap/ic_launcher"/>

Do not change the id leave it and on your screen where tab bar is set some height that you want and viola!!! It will apply to all places

score 0 · Answer 5 · answered Aug 10 '18 at 19:52

This is a custom TabLayout it can help a lot!

public class TabView extends TabLayout {

public TabView(Context context) {
    super(context);
    init();
}

public TabView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    int padding = 10;

    int[] icons = new int[]{R.drawable.ic_tel, R.drawable.ic_speaker, R.drawable.ic_camera, R.drawable.ic_home};

    for (int i = 0; i < icons.length; i++) {
        ImageView imageView = new ImageView(getContext());
        imageView.setBackgroundColor(Color.TRANSPARENT);
        imageView.setImageResource(icons[i]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setPadding(padding, padding, padding, padding);
        if (i==3){
            addTab(newTab().setCustomView(imageView), i , true);
        } else {
            addTab(newTab().setCustomView(imageView), i);
        }
    }

}

}

score 0 · Answer 6 · answered Dec 06 '18 at 09:16

    View view5 = getLayoutInflater().inflate(R.layout.custom_icon, null);
    view5.findViewById(R.id.iconImg).setBackgroundResource(R.drawable.ambulance);
    icon_text=(TextView)view5.findViewById(R.id.icon_text);
    icon_text.setText("Blood Bank");
    tabLayout.addTab(tabLayout.newTab().setCustomView(view5));

    tabLayout.getTabAt(0).setIcon(tabIcons[0]).setCustomView(view1);

How to increase icon size of tabs in TabLayout

6 Answers6

Linked