Text and Icon in Android tablayout

Question

I am trying to achieve this

I have constructed the tablayout but couldn't find a good way to add icons before the text in the left hand side.

I have tried .setIcon() but the icons is placed above the text.

Note: I am using com.android.support:design:25.1.1'

Answer 1

you have to setIcon for Tab in TabLayout. follow the following link http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Answer 2

Use below code to set icon to left of text

   private void setupTabIcons() {
        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText(R.string.order_detail);
           tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText(R.string.payment_status);
          tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText(R.string.locate_customer);
           tabThree.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);

        TextView tabFour = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabFour.setText(R.string.call_customer);
           tabFour.setCompoundDrawablesWithIntrinsicBounds(R.drawable.youricon, 0, 0, 0);
        tabLayout.getTabAt(3).setCustomView(tabFour);

    }

and custom_tab.xml

  <?xml version="1.0" encoding="utf-8"?>
<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:drawablePadding="5dp"
    android:textColor="@android:color/white"
    android:textStyle="bold"
    android:textSize="15sp" />

Answer 3

try this creat a custom_tab layout like this

<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center"
android:textColor="#FFFFFF" />

now set tab icon and tab title as per your requirement

 TextView tvHome = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tvHome.setText("Home");
    tvHome.setTextSize(13);
    tvHome.setTypeface(Typeface.DEFAULT_BOLD);
    tvHome.setCompoundDrawablesWithIntrinsicBounds(0, R.drawble.ic_icon, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tvHome);

Answer 4

Use setCustomView on the Tablayout and apply your desired layout

Here is an Example

In code:

private void createTabIcons() {

    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText("Tab 1");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_dash26, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);
}

in your layout/custom_tab

<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:gravity="center_horizontal"
android:textColor="#FFFFFF"
android:textSize="@dimen/tab_label"
android:textStyle="bold" />

Output

Answer 5

There are tow way to Achieve that.

First way You need to create Separate xml layout(with TextView and ImageView as per your requirement) for that and set that to the layout. Like this

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_layout_custom));

Now you can set different name and tab layout text like:

for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
            TextView textView = (TextView) tab.findViewById(R.id.textView);
           ImageView imgView = (ImageView) tab.findViewById(R.id.imageView);
                if (i == 0) {
                    textView.setText("TAB 1");
                   imgView.setImageResource(R.drawable.img1);
                } else if (i == 1) {
                    textView.setText("TAB 2");
                  imgView.setImageResource(R.drawable.img2);                
  }

}

Second way is, see this tutorials

Answer 6

Apparently, there is a much simpler way to achieve this by setting the app:tabInlineLabel attribute to true. Then, all you have to do is just set the icon like this:

tab.setIcon(yourIcon);