How to add page title and icon in android FragmentPagerAdapter
I want to display title with respective icon in with header page title. like below image, however only able to display title and missing icon.
Here is the my sample code,.
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a DummySectionFragment (defined as a static inner class
// below) with the page number as its lone argument.
Log.e("POSITION", "position=" + position);
Fragment fragment;
switch (position) {
case 0:
//Fragment1
case 1:
//Fragment2
case 2:
//Fragment3
case 3:
//Fragment4
case 4:
//Fragment5
}
return null;
}
@Override
public int getCount() {
return NUM_PAGES;
}
// using both these techniques but could not get icon in title
/*
* public int getIconResId(int index) { return ICONS[index % ICONS.length]; }
*/
public int getPageIconResId(int position) {
return ICONS[position];
}
@Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
case 3:
return getString(R.string.title_section4).toUpperCase(l);
case 4:
return getString(R.string.title_section5).toUpperCase(l);
}
return null;
}
}
and in onCreate:
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
Using this xml file for display fragment page adapter in fragment;
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rlv2"
android:layout_marginTop="-30dp" >
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="@color/black"
android:textStyle="bold" />
</android.support.v4.view.ViewPager>
Output image that i need my app.Could you please any idea how to display section page adapter with icon and title.
If you are using the design support library TabLayout, you can simply call:
tabLayout.getTabAt(i).setIcon();
I got solution from Stever.
Drawable myDrawable;
String title;
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
myDrawable = getResources().getDrawable(R.drawable.img_section1);
title = getResources().getString(R.string.title_section1);
break;
case 1:
myDrawable = getResources().getDrawable(R.drawable.img_section2);
title = getResources().getString(R.string.title_section2);
break;
case 2:
myDrawable = getResources().getDrawable(R.drawable.img_section3);
title = getResources().getString(R.string.title_section3);
break;
case 3:
myDrawable = getResources().getDrawable(R.drawable.img_section4);
title = getResources().getString(R.string.title_section4);
break;
case 4:
myDrawable = getResources().getDrawable(R.drawable.img_section5);
title = getResources().getString(R.string.title_section5);
break;
default:
//TODO: handle default selection
break;
}
SpannableStringBuilder sb = new SpannableStringBuilder(" " + title); // space added before text for convenience
try {
myDrawable.setBounds(5, 5, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
ImageSpan span = new ImageSpan(myDrawable, DynamicDrawableSpan.ALIGN_BASELINE);
sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
} catch (Exception e) {
// TODO: handle exception
}
Thank you stever.
for me it worked like this :
@Override
public CharSequence getPageTitle(int position) {
SpannableStringBuilder sb;
ImageSpan span;
switch (position) {
case 0:
myDrawable = getResources().getDrawable(R.drawable.heart_18);
sb = new SpannableStringBuilder(" Page1"); // space added before text for convenience
myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
case 1:
myDrawable = getResources().getDrawable(R.drawable.star_grey_18);
sb = new SpannableStringBuilder(" Page2"); // space added before text for convenience
myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
case 2:
myDrawable = getResources().getDrawable(R.drawable.star_pink_18);
sb = new SpannableStringBuilder(" Page3"); // space added before text for convenience
myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), myDrawable.getIntrinsicHeight());
span = new ImageSpan(myDrawable, ImageSpan.ALIGN_BASELINE);
sb.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
}
}
you can use :
myTabLayout.getTabAt(index).setIcon(R.drawable.myIcon);