How to put icon and text in tabs (Sliding tabs) android?
I need to make my app with this look and feel (icon and text): https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsbHJuWi04N0ZIc0E/components_tabs_usage_mobile7.publish
But for now I can leave it like this: http://i.imgur.com/npz0eRJ.png
How can I fix this?
Follow my tabs xml:
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: gravity = "center">
<ImageView
android: id = "@ + id / imgTab"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
/>
<TextView
android: TEXTSIZE = "14sp"
android: textColor = "@ android: color / white"
android: id = "@ + id / tv_tab"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" />
</ LinearLayout>
Method in snippet (Tab):
public CharSequence getPageTitle (int position) {
Drawable tab = mContext.getResources () getDrawable (icons [position]).;
tab.setBounds (0, 0, heightIcon, heightIcon);
ImageSpan ImageSpan is = new (tab);
SpannableString sp = new SpannableString (titles [position]);
sp.setSpan (s, sp.length () - 1, sp.length (), 0);
return sp;
I tried to do the Need to center the alignment of one piece of text in the TextView , but it didn't work for me :(
Can anyone help me?
source to share
See my answer here and follow it correctly.
A small 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;
use your own title instead of "hello".
Hope this helps.
source to share
You can easily accomplish your task as follows. First, create a new XML in the Layout folder. Name it [ custom_tab_view ], then paste the code below.
<?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 go to ViewPageAdapter and replace your [ CharSequence ] function 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 MainActivity in OnCreate put this line if it doesn't already exist.
SlidingTabLayout tabs;
tabs.setCustomTabView(R.layout.custom_tab_view, R.id.tabText);
Hope it answer the Question.
source to share
Using the standard 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);
source to share