Skip to content

zhanglong1/MaterialTabs

 
 

Repository files navigation

MaterialTabs

Custom Tabs with Material Design animations for pre-Lollipop devices
Android Arsenal

Download example apk with Text
Download example apk with Icon

It requires 14+ API and android support v7 (Toolbar)

Dependency: Android-UI Reveal Color View

How to use:

define it in xml layout ```xml ``` ( I'm working on use wrap_content instead 48dp)

change your base theme style to AppCompat ( res/values/styles.xml ) and add Lollipop default variables.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/light_blue_500</item>
<item name="colorPrimaryDark">@color/light_blue_800</item>
<item name="colorAccent">@color/grey_1000</item>
<item name="windowActionBar">false</item>
</style>

Connect to java code and add to viewPager

MaterialTabHost tabHost;

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		tabHost = (MaterialTabHost) this.findViewById(R.id.materialTabHost);
		pager = (ViewPager) this.findViewById(R.id.viewpager);
		
		// init view pager
		pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
		pager.setAdapter(pagerAdapter);
		pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
            	// when user do a swipe the selected tab change
                tabHost.setSelectedNavigationItem(position);
            }
        });
		
		// insert all tabs from pagerAdapter data
		for (int i = 0; i < pagerAdapter.getCount(); i++) {
            tabHost.addTab(
                    tabHost.newTab() 
                            .setIcon(getIcon(i))
                            .setTabListener(this)
                            );
    }
}

@Override
	public void onTabSelected(MaterialTab tab) {
		// when the tab is clicked the pager swipe content to the tab position
		pager.setCurrentItem(tab.getPosition());
		
	}

N.B. Your activity must extends ActionBarActivity implements MaterialTabListener

How to import

Eclipse
Import Android UI Library into eclipse
Import Library-MaterialTabs into eclipse and add Android UI as dependancy.
Now right click on your project -> Properties -> Android -> Add (under library).
Click Apply.
Android Studio
Add [Android-UI module](https://github.com/markushi/android-ui) to your project.
Download and add MaterialTabsModule to your project as module.
Add this to your build.gradle: ```java dependencies { compile project(':MaterialTabsModule') } ```

Limitations

Actually, this library have some limitations: - Max of 3 tabs / No scrollable tabs - No selector animations

These problems are currently in development

screenshot

screenshot

About

Custom Tabs with Material Design effects

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 100.0%