MrByte
MrByte

Reputation: 1083

Android - Google Play like tabs

Google has just implemented a new look to their tabs in Google Play.

I know this can be done with ViewPagerIndicator, yet I wouldn't like to use another library in my application and bump the app's size by another MB or so.

I am currently using the android.support.v4.view.PagerTabStrip (like in the old Google Play), and I'm wondering if the new look can also be implemented using the android support library.

Thanks in advance.

Upvotes: 27

Views: 28345

Answers (3)

rciovati
rciovati

Reputation: 28063

Design Support Library (current method).

The Design Support Library includes the TabLayout widget which allows you to implement a Google Play-lie tabs:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

and then initializing it:

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

For a full example see the Cheesesquare app

PagerSlidingTabStrip Library

This is a ready-to-use library that you can find on Github.

Screenshot Screenshot

Upvotes: 53

Tianhai
Tianhai

Reputation: 663

Google finally released their sliding tabs api.

To use SlidingTabsBasic, you first need to download the zip file from: http://developer.android.com/downloads/samples/SlidingTabsBasic.zip

  1. Include the 2 java source files in the com.example.android.common.view package into your project. You may choose to move them to a suitable package in your project.
  2. To use the component, simply add it to your view hierarchy. Then in your Activity or Fragment, provide the SlidingTabsBasic your viewPager by calling mSlidingTabLayout.setViewPager(mViewPager);

Example layout from Google:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

    <com.example.android.common.view.SlidingTabLayout
          android:id="@+id/sliding_tabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
          android:id="@+id/viewpager"
          android:layout_width="match_parent"
          android:layout_height="0px"
          android:layout_weight="1"
          android:background="@android:color/white"/>

</LinearLayout>

Example code in the onCreate() method of your Activity:

mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setViewPager(mViewPager);

For more details, follow the example in the zip file SlidingTabsBasicFragment.java and fragment_sample.xml

Upvotes: 34

Shruti
Shruti

Reputation: 5591

try this library

Sample project

It uses ViewPager with fragment to display tabs as on google play.

Upvotes: 1

Related Questions