How can increase the size of icons on the tabItems?

Question

My project includes 6 icons on tabLayout. They all put to tabs programmatically, not with ImageView from layout. Now, it must be increased size of this icons for tablet screen.

I tried so much things; tried increase icon size, tried layout_ width and layout_height of tabItems. But that's all didn't work.

How can I increase icons size on tabLayout? Hope someone can help me for this.

Result_Activity.java

private Integer[] images;
Integer[] domesticImages = {
        R.drawable.ic_directions_bus_black_24dp,
        R.drawable.ic_flight_takeoff_black_24dp,
        R.drawable.ic_directions_boat_black_24dp,
        R.drawable.ic_train_black_24dp,
        R.drawable.ic_hotel,
        R.drawable.ic_rent_a_car
};
private Integer[] domesticImagesClicked = {
        R.drawable.ic_directions_bus_clicked_24dp,
        R.drawable.ic_flight_takeoff_clicked_24dp,
        R.drawable.ic_directions_boat_clicked_24dp,
        R.drawable.ic_train_clicked_24dp,
        R.drawable.ic_hotel_clicked,
        R.drawable.ic_rent_a_car_clicked
};

activity_result.xml

 <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_below="@+id/rl_Detail"
            android:background="#F4E6CA"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:tabBackground="?attr/selectableItemBackgroundBorderless"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabPaddingEnd="15dp"
            app:tabPaddingStart="15dp">

            <android.support.design.widget.TabItem
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:saveEnabled="true" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="match_parent" />

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </android.support.design.widget.TabLayout>

Answer 1

You can increase the size of icons by using

    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        switch(i){
            case 0: if (tab != null){
                        tab.setIcon(R.drawable.your_icon_1)
                        .setText(R.string.your_text1);
                    }break;
            case 1: if (tab != null){
                        tab.setIcon(R.drawable.your_icon_2)
                        .setText(R.string.your_text2);
                    }break;
            case 2: if (tab != null){
                        tab.setIcon(R.drawable.your_icon_3)
                        .setText(R.string.your_text3);
                    }break;
            case 3: if (tab != null){
                        tab.setIcon(R.drawable.your_icon_4)
                        .setText(R.string.your_text4);
                    }break;
        }
        if (tab != null) tab.setCustomView(R.layout.your_custom_view);
    }

create a new layout resource as your_custom_view.xml like this,

<?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 2

You can specify different set of resources(drawable folder) for the tablet configeration.

You would be needing another drawable folder named as drawable-sw600dp for tablets.

Like defined in the supporting different screen sizes and alternatice app resources

Another way would be create a custom view for your tabs.

You can create a layout for the custom tab for tablets.

Then inflate the layout programmatically , and set it with tab.setCustomView(customView) .

You can do this only in the case of tablets.

Answer 3

If you want different icon sizes for different screen sizes you probably need to to any of these:

1 - Make different images with it's own right size and put in the respective folders, as android have drawable folders for each dpi density, take a look at: Android Studio: Drawable Folder: How to put Images for Multiple dpi?

2 - If the icons are simple, you can use vector icons, since they can change their size to fit any screen size you need. Take a look at: https://developer.android.com/studio/write/vector-asset-studio

3 - You can check if the device is an tablet and change the icons size programatically as well, that will depend on how you are adding the icons. You can check that using the following code:

public static boolean isTablet(Context context) { return (context.getResources().getConfiguration().screenLayout & 0xF) >= 3; }

or you can check for different ways of doing that here: Determine if the device is a smartphone or tablet?

If none of those methods helps, there is an official detailed guide: https://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts