Custom Tabs with Material Design effects

Related tags

ViewPager MaterialTabs
Overview

MaterialTabs

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

Download example apk

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

IMPORTANT NOTICE

This library is no longer supported.
I have not enough time to continue developing at this time and the android design support library implements the tabs features in the better way, so I think it is useless now. If anyone wants to keep alive this library they can send pull requests AFTER testing the code and exmplaining what they have changed and why. Thanks to all contributors

Dependency: Android-UI Reveal Color View
If you are using MaterialTabs in your app and would like to be listed here, please let me know via email!

How to use:

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

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

Android Studio

Add this to your build.gradle:

dependencies {
    compile 'it.neokree:MaterialTabs:0.11'
}

Limitations

Actually, this library have some limitations: - No selector animations

These problems are currently in development

Fixed and Scrollable tabs.

With text tabs

[1 - 3] Fixed Tabs
[4 - ∞] Scrollable Tabs

With icon tabs

[1 - 5] Fixed Tabs
[6 - ∞] Scrollable Tabs

screenshot

screenshot

screenshot

screenshot

You might also like...
BubbleTabBar is bottom navigation bar with customizable bubble like tabs
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage com.fxn.BubbleTabBar android:id="@+id/

Akshay sharma 576 Dec 30, 2022
An instance-state saving fragment switcher, intended for use with navigation drawers or tabs.

FragmentSwitcher FragmentSwitcher is an adapter-based, state-saving fragment container similar to a ViewPager. It was designed with the NavigationDraw

Jacob Tabak 247 Dec 30, 2022
Put some bubble in your tabs and give your apps a supa fresh style !
Put some bubble in your tabs and give your apps a supa fresh style !

BubbleTab Put some bubble in your tabs and give your apps a supa fresh style ! Usage Add a BubbleTab with your icons on the layout.xml Customisable pa

Florent CHAMPIGNY 535 Nov 18, 2022
Android scrollable tabs
Android scrollable tabs

Scrollable is a library for an Android application to implement various scrolling technicks. It's all started with scrolling tabs, but now much more c

Dimitry 1.2k Jan 4, 2023
BubbleTabBar is bottom navigation bar with customizable bubble like tabs
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Download AIX : Download Aix License Licensed under the Apache Li

Zain Ul Hassan 7 Dec 3, 2022
Apply custom effects on view backgrounds
Apply custom effects on view backgrounds

View Filters At the beginning the only purpose was to blur all layers below. Now you can do more : Blur background views easily Create custom filters

Mad Mirrajabi 180 Nov 25, 2022
Custom drawer implementation for Material design apps.
Custom drawer implementation for Material design apps.

material-drawer Custom drawer implementation for Material design apps. Demo A demo app is available on Google Play: Screenshots Fixed items Select pro

Jan Heinrich Reimer 600 Nov 18, 2022
(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.
(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

BottomBar (Deprecated) I don't have time to maintain this anymore. I basically wrote the whole library in a rush, without tests, while being a serious

Iiro Krankka 8.4k Dec 29, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Mike Penz 1.8k Nov 10, 2022
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Alessandro Crugnola 1.4k Dec 18, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Jan 3, 2023
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Mike Penz 1.8k Nov 10, 2022
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar

#Android-LollipopShowcase This is a simple showcase to show off Android's all new Material Design and some other cool new stuff which is (new) in Andr

Mike Penz 1.8k Nov 10, 2022
📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.
📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.

Material NavigationView for Android 📱 📱 Android Library to implement Rich, Beautiful Material Navigation View for your project with Material Design

Shreyas Patil 198 Dec 17, 2022
:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion
:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

FOLDING CELL [JAVA] Expanding content cell with animation inspired by folding paper card material design. We specialize in the designing and coding of

Ramotion 4.9k Dec 7, 2022
Allows the easy creation of animated transition effects when the state of Android UI has changed
Allows the easy creation of animated transition effects when the state of Android UI has changed

android-transition Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general e

Kai 615 Nov 14, 2022
Allows the easy creation of animated transition effects when the state of Android UI has changed
Allows the easy creation of animated transition effects when the state of Android UI has changed

android-transition Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general e

Kai 615 Nov 14, 2022
swipe display drawer with flowing & bouncing effects.
swipe display drawer with flowing & bouncing effects.

FlowingDrawer swipe right to display drawer with flowing effects. Download Include the following dependency in your build.gradle file. Gradle: rep

mxn 2.6k Jan 3, 2023
Render After Effects animations natively on Android and iOS, Web, and React Native
Render After Effects animations natively on Android and iOS, Web, and React Native

Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations expo

Airbnb 33.5k Jan 4, 2023
Comments
  • add some setters and getters to get icon of tab and change it programmatically

    add some setters and getters to get icon of tab and change it programmatically

    I needed to change a tab icon rec programmatically and i did it like this

    Drawable newicon; MaterialTabHost tabHost; ... tabHost.gettabon(3).setIcon(newicon);

    opened by m04az 0
  • Fixing sample project and switch to gradle dependencies

    Fixing sample project and switch to gradle dependencies

    Hi neokree, nice repo :+1: and helped me, but some code's error after cloned, now have been fixed and some changes added.

    • Added demo fragment
    • Deleted module and replaced by gradle dependencies

    hope will be easier to use

    opened by CreatorB 2
  • setTypeFace method for MaterialTab host

    setTypeFace method for MaterialTab host

    This helper methods can be very useful if you want to use font awesome icons as text for the tabs.

    Example:

    Typeface fontAwesome = Typeface.createFromAsset(getAssets(), "fonts/fontawesome-webfont.ttf");

        for (int i = 0; i < adapter.getCount(); i++) {

        MaterialTab tab = tabHost.newTab();
        tab.setText(adapter.getIcon(i));
        tab.setTabListener(this);
        tab.setTypeFace(fontAwesome);
        tabHost.addTab(tab);


    }
    opened by swaheed2 2
Owner
Fabio Biola
Fabio Biola
GitHub
PagedGrid - Custom android view composed by multiple page grids with custom content and layout

PagedGrid A PagedGrid is a ViewPager which pages are GridLayout with equal distributed rows and columns. This project is an Android library, written i

Matteo Pellegrino 1 Jan 23, 2019
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Florent CHAMPIGNY 8.2k Dec 29, 2022
A custom ViewPager title strip which gives continuous feedback to the user when scrolling

SmartTabLayout A custom ViewPager title strip which gives continuous feedback to the user when scrolling. This library has been added some features an

ogaclejapan 7k Jan 1, 2023
Three material Dots Indicators for view pagers in Android !

Material View Pager Dots Indicator This library makes it possible to represent View Pager Dots Indicator with 3 different awesome styles ! It supports

Tommy Buonomo 2.8k Jan 5, 2023
Custom Tabs with Material Design effects

MaterialTabs Custom Tabs with Material Design animations for pre-Lollipop devices       Download example apk It requires 14+ API and android support v

Fabio Biola 1.4k Dec 29, 2022
CuteToast is an Material Design Custom Toast for Android | Custom Material Design Toast

CuteToast is an Android Custom Toast library that could be used instead of Default Toast. It does everything as Toast but with some extra spice.

K M Rejowan Ahmmed 12 Dec 17, 2022
🚀🧨📝 Series of Tutorials to learn about Jetpack Compose with subjects Material Widgets, Layout, SubcomposeLayout, custom layouts, State, custom rememberable, recomposition, LaunchedEffect, side-effects, Gesture, Animation, Navigation, Canvas, UIs like whatsapp and others.

Jetpack Compose Tutorials and Playground ?? Overview Series of Tutorials to learn about Jetpack Compose, Material Widgets, State, Animation, and Navig

Smart Tool Factory 1.3k Jan 7, 2023
Show worldwide headline. API/Glide library/recycler view/volley library/kotlin/xml/ chrome custom tabs

Show worldwide headline. API/Glide library/recycler view/volley library/kotlin/xml/ chrome custom tabs. -> you can click on headline and it will open an article of that news in the app(no need to go to chrome or any browser)

SUMIT KUMAR 5 Nov 28, 2022
Material Design text field that comes in a box, based on (OLD) Google Material Design guidelines.

TextFieldBoxes A new Material Design text field that comes in a box, based on Google Material Design guidelines. ???? 中文看这里 UPDATE NOTICE 1.4.5 Releas

Mark Wang 769 Jan 7, 2023
An Android Library to help you create actionbar tabs like "Capitaine train" app by Cyril Mottier

TabBarView An Android Library to help you create actionbar tabs like "Capitaine train" app by Cyril Mottier Implementation: Declare TabBarView and set

Mirko Dimartino 510 Nov 15, 2022