Android: Tablayout toolbar, displaying icons above text

Question

I have a simple layout in dialog with AppCompat Toolbarand TabLayoutinside. I want my tabs to have icons to the left of the text.

Here is the layout of the dialog box.

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            >

        <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                />
    </android.support.v7.widget.Toolbar>

    <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            />
</LinearLayout>

then I programmatically add tabs.

tabs.addTab(tabs.newTab()
                .setTag(SettingsTabTag)
                .setText("Settings")
                .setIcon(R.drawable.scan_tab_settings_black), true);
tabs.addTab(tabs.newTab()
                .setTag(MetadataTabTag)
                .setText("Metadata")
                .setIcon(R.drawable.scan_tab_metadata_black));

But the icon is always displayed above the text and is very small.

Answer 1

1. Create your own tab layout

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"/>

2.IN In your activity the tab is configured

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);

setCompoundDrawablesWithIntrinsicBounds does the job.

Answer 2

Here is the code commonly used to get the icon to the left of the tab name.

tablayout. .

custom_tab.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"
    android:gravity="center">
    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:gravity="center"/>
</LinearLayout>

:

LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("  "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);