Like putting icon and text in tabs (Sliding Tabs) android?

Question

I need to make my application with this appearance (icon and text): https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsbHJuWi0

Answer 1

See my answer Here and follow it properly.

A little change here will do the trick:

 Drawable image = getActivity().getResources().getDrawable(R.drawable.ic_launcher);
 image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
 SpannableString sb = new SpannableString(" \n"+"hello");
 ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
 sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 return sb;

in place of the "hello" use your title.

Hope it will help.

Answer 2

You can achieve your task with the following very easily. Firstly create new XML under Layout Folder. Give it name [custom_tab_view] then paste the below code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/custom_bg"
    android:padding="8dp">

    <!--<com.andexert.library.RippleView
        android:id="@+id/more"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ripple:rv_centered="true">-->

        <ImageView
            android:id="@+id/tabImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tabText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom|center" />


</LinearLayout>

And now went to your ViewPageAdapter and Replace your Function [CharSequence] with below code.

 // This method return the titles for the Tabs in the Tab Strip
    @Override
    public CharSequence getPageTitle(int position) {
        //return Titles[position];
        Drawable image = mContext.getResources().getDrawable(imageResId[position]);
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
        //image.setBounds(0, 0, 64, 64);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        SpannableString sb = new SpannableString(" ");
        sb.setSpan(imageSpan, 0, sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);


        return sb;
    }

and in the MainActivity under OnCreate put this line if it is not already there.

SlidingTabLayout tabs;
tabs.setCustomTabView(R.layout.custom_tab_view, R.id.tabText);


                                                 Hope it answer the Question.

Answer 3

Using the default Tabbed Activity from android studio, just add the following:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);

tabLayout.getTabAt(0).setIcon(R.drawable.image_1);
tabLayout.getTabAt(1).setIcon(R.drawable.image_2);
tabLayout.getTabAt(2).setIcon(R.drawable.image_3);