CODEWITHSUNDEEP
androidandroid-tablayout
Rana Suleman
Rana Suleman

Reputation: 31

Text and Icon in Android tablayout

I am trying to achieve this

TabLayout

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

Current Tablayout

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

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

Upvotes: 1

Views: 4830

Answers (6)

LuckMan
LuckMan

Reputation: 95

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

Upvotes: 1

Ajeet Singh
Ajeet Singh

Reputation: 2009

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

Upvotes: 0

rafsanahmad007
rafsanahmad007

Reputation: 23881

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

enter image description here

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69681

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

Upvotes: 0

Sandeep dhiman
Sandeep dhiman

Reputation: 1921

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" />

Upvotes: 0

Mehul Kabaria
Mehul Kabaria

Reputation: 6622

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

Upvotes: 2

Related Questions