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.Pleas

Answer 1

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

Answer 2

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

Answer 3

    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);

Answer 4

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);
     }
 }

Answer 5

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>

Answer 6

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);
        }
    }

}

}