ViewPager Redux – Part 3
In the previous article we got a basic implementation of the PageTabStrip working with our ViewPager. In this article we’ll look at applying some styles to it.
Actually, there’s not an awful lot that we can do with the styles because there are not many style attributes available to us. PagerTabStrip actually extends PagerTitleStrip and the only styleable attributes available are those which PagerTitleStrip supports:
- textAppearance
- textSize
- textColor
- gravity
These should be pretty self-explanatory with the exception of gravity, which is different from the layout_gravity attribute that we used in the layout to control where the PageTabStrip was positioned within its ViewPager parent. The gravity attribute controls how the text for each page title is aligned within the PageTabStrip. If you have a play with the different settings, there is a very subtle difference between setting the gravity to top and bottom.
One of the most common things that we’re likely to want to do is to change the colour of the text and indicator bar. The first is fairly obvious: we can use the textColor attribute; but what about changing the indicator colour? Actually we don’t need to because it automatically get set to match the text colour. Let’s prove this by applying a text colour. First we’ll create a new style in res/values/styles.xml:
<style name="Pager">
<item name="android:textColor">#14A804</item>
</style>
Next we’ll apply this to the PageTabStrip in our layout in res/layout/main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.PagerTabStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
style="@style/Pager"/>
</android.support.v4.view.ViewPager>
If we run this we can see that both the text and indicator colours have been changed:
That’s all fine if we’re happy for the colour of the indicator to match the text colour, but what about if we don’t? Unfortunately the only way to do this directly is to make a programatic call on the PagerTabStrip object. First we need to set an id for the PagerTabStrip:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.PagerTabStrip
android:id="+id/tabstrip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
style="@style/Pager"/>
</android.support.v4.view.ViewPager>
Next we get a reference to it and call setTabIndicatorColor:
public class ViewPagerActivity extends Activity
{
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.main );
ViewPagerAdapter adapter = new ViewPagerAdapter( this );
ViewPager pager =
(ViewPager)findViewById( R.id.viewpager );
pager.setAdapter( adapter );
PagerTabStrip strip = (PagerTabStrip)findViewById(R.id.tabstrip);
strip.setTabIndicatorColor(0xAAFFAA);
}
}
This gives us a much lighter green for the indicator:
That’s OK, but what we can’t apply this through a style, can we? On the face of it, no. However, if we wanted to be able to set the indicator colour using a style, we can simply subclass PagerTabStrip, and make that styleable. Let’s start by defining our styleable attribute in res/values/attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyPagerTabStrip">
<attr name="indicatorColor" format="reference|color" />
</declare-styleable>
</resources>
This defines an attribute which can be set using a raw colour value, or an R.color.* reference.
Next we’ll create a new class named MyPagerTabStrip:
public class MyPagerTabStrip extends PagerTabStrip
{
public MyPagerTabStrip(Context context, AttributeSet attrs)
{
super(context, attrs);
final TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.MyPagerTabStrip);
setTabIndicatorColor(a.getColor(
R.styleable.MyPagerTabStrip_indicatorColor, Color.WHITE));
a.recycle();
}
}
Here we’re getting the color from the attribute value and setting the tab indicator colour accordingly. NOTE: It is vital that you always call recycle on your TypedArray once you’re done with it.
Next we change the layout to use our new control:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.stylingandroid.viewpager.MyPagerTabStrip
android:id="@+id/tabstrip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
style="@style/Pager"/>
</android.support.v4.view.ViewPager>
Then we must remove the manual colour setting from our Activity:
public class ViewPagerActivity extends Activity
{
@Override
public void onCreate( Bundle savedInstanceState )
{
super.onCreate( savedInstanceState );
setContentView( R.layout.main );
ViewPagerAdapter adapter = new ViewPagerAdapter( this );
ViewPager pager =
(ViewPager)findViewById( R.id.viewpager );
pager.setAdapter( adapter );
}
}
And finally we’ll add a new attribute to our style:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Pager">
<item name="android:textColor">#14A804</item>
<item name="indicatorColor">#AAFFAA</item>
</style>
</resources>
That’s it. If we now run that we’ll get the same result as before except that now the styling is done through the style rather than programatically.
That’s about it with our updated look at ViewPager. The controls that are now baked in to the support library are pretty easy to use, although they are not as rich as those provided in Jake Wharton’s ViewPagerIndicator library. Also there are a lot more options for styling the controls to customise the look and feel in Jake’s library than that are in the support library control.
The source code for this article can be found here.
© 2012, Mark Allison. All rights reserved. This article originally appeared on Styling Android.
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License
ViewPager Redux – Part 3 by Styling Android, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. Terms and conditions beyond the scope of this license may be available at blog.stylingandroid.com.
Tags: androiddev
[...] Styling Android: ViewPager Redux – Part 3 [...]