A Material Design ViewPager easy to use library

Overview

MaterialViewPager

Android Arsenal Android Weekly CircleCI

Material Design ViewPager easy to use library

Android app on Google Play

Build screen

Sample

Android app on Google Play

And have a look on a sample Youtube Video : Youtube Link

Download

Buy Me a Coffee at ko-fi.com

In your module Download

compile 'com.github.florent37:materialviewpager:1.2.3'

//dependencies
compile 'com.flaviofaria:kenburnsview:1.0.7'
compile 'com.jpardogo.materialtabstrip:library:1.1.0'
compile 'com.github.bumptech.glide:glide:4.0.0'

Usage

Add MaterialViewPager to your activity's layout

<com.github.florent37.materialviewpager.MaterialViewPager
    android:id="@+id/materialViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:viewpager_logo="@layout/header_logo"
    app:viewpager_logoMarginTop="100dp"
    app:viewpager_color="@color/colorPrimary"
    app:viewpager_headerHeight="200dp"
    app:viewpager_headerAlpha="1.0"
    app:viewpager_hideLogoWithFade="false"
    app:viewpager_hideToolbarAndTitle="true"
    app:viewpager_enableToolbarElevation="true"
    app:viewpager_parallaxHeaderFactor="1.5"
    app:viewpager_headerAdditionalHeight="20dp"
    app:viewpager_displayToolbarWhenSwipe="true"
    app:viewpager_transparentToolbar="true"
    app:viewpager_animatedHeaderImage="true"
    app:viewpager_disableToolbar="false"

    />

with header_logo.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/logo_white"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/materialviewpager_logoHeight"
    android:text="Material is Good"
    android:textSize="30sp"
    android:textColor="@android:color/white"/>

You will see on Android Studio Preview :

alt preview

To get a beautiful screen and enable preview, you theme may follow

<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
</style>

<style name="AppTheme" parent="AppBaseTheme">

   <item name="android:textColorPrimary">@android:color/white</item>
   <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
   <item name="android:windowTranslucentStatus" tools:targetApi="21">true</item>

   <item name="android:windowContentOverlay">@null</item>
   <item name="windowActionBar">false</item>
   <item name="windowNoTitle">true</item>

   <!-- Toolbar Theme / Apply white arrow -->
   <item name="colorControlNormal">@android:color/white</item>
   <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item>

   <!-- Material Theme -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/accent_color</item>

   <item name="android:navigationBarColor" tools:targetApi="21">@color/navigationBarColor</item>
   <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="21">true</item>

</style>

<style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <!-- White arrow -->
    <item name="colorControlNormal">@android:color/white</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/drawerArrowColor</item>
</style>

Retrieve the MaterialViewPager

You can use MaterialViewPager as an usual Android View, and get it by findViewById

public class MainActivity extends ActionBarActivity {

    private MaterialViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager);
    }
}

Customisation

First choose your color and height

<com.github.florent37.materialviewpager.MaterialViewPager
        android:id="@+id/materialViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ...
        app:viewpager_color="@color/colorPrimary"
        app:viewpager_headerHeight="200dp"
        ...
        />

Set your logo

<com.github.florent37.materialviewpager.MaterialViewPager
        ...
        app:viewpager_logo="@layout/header_logo" <-- look custom logo layout
        app:viewpager_logoMarginTop="100dp" <-- look at the preview
        ...
        />

Titlebar Logo

Video

Your logo's layout must

  • layout_height="@dimen/materialviewpager_logoHeight"

header_logo.xml

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/logo_white"
    android:layout_width="200dp"
    android:layout_height="@dimen/materialviewpager_logoHeight"
    android:fitsSystemWindows="true"
    android:adjustViewBounds="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/logo_white" />
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_hideLogoWithFade="false"
        ...
        />

Fading Logo

Video

header_logo.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/circle">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:fitsSystemWindows="true"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:src="@drawable/flying" />
</FrameLayout>
<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_hideLogoWithFade="true"
        ...
        />

Toolbar Animation

Hide Logo and Toolbar

Video

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_hideToolbarAndTitle="true"
        ...
        />

Sticky Toolbar

Video

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_hideToolbarAndTitle="false"
        ...
        />

Transparent Toolbar

Video

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_transparentToolbar="true"
        ...
        />

Header Layout

You can replace the header

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_header="@layout/myHeader"
        ...
        />

Moving Header

Or use the default header, with a KenBurns animation

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_animatedHeaderImage="true"
        ...
        />

Static Header

Or simply use an ImageView as header

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_animatedHeaderImage="false"
        ...
        />

Custom Tab Bar

You can set you own tab bar, by default I provided 2 implementations

Standard

Video

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_standard"
        ...
        />

News Stand

Video

<com.github.florent37.materialviewpager.MaterialViewPager`
        ...
        app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_newstand"
        ...
        />

Or create your own tab bar

Create your own layout using a PagerSlidingTabStrip

my_tabs.xml

<com.astuetz.PagerSlidingTabStrip
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@id/materialviewpager_pagerTitleStrip"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:pstsPaddingMiddle="true"
    app:pstsDividerPadding="20dp"
    app:pstsIndicatorColor="#FFF"
    app:pstsIndicatorHeight="2dp"
    app:pstsShouldExpand="true"
    app:pstsTabPaddingLeftRight="10dp"
    app:pstsTabTextAllCaps="true"
    tools:background="#A333"
     />

Don't forget to give it id="@id/materialviewpager_pagerTitleStrip"

<com.github.florent37.materialviewpager.MaterialViewPager
        ...
        app:viewpager_pagerTitleStrip="@layout/my_tabs"
        ...
        />

Animate Header

Video

Simply add a listen to the ViewPager

mViewPager.setMaterialViewPagerListener(new MaterialViewPager.Listener() {
            @Override
            public HeaderDesign getHeaderDesign(int page) {
                switch (page) {
                    case 0:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.blue,
                                "http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg");
                    case 1:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.green,
                                "https://fs01.androidpit.info/a/63/0e/android-l-wallpapers-630ea6-h900.jpg");
                    case 2:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.cyan,
                                "http://www.droid-life.com/wp-content/uploads/2014/10/lollipop-wallpapers10.jpg");
                    case 3:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.red,
                                "http://www.tothemobile.com/wp-content/uploads/2014/07/original.jpg");
                }

                //execute others actions if needed (ex : modify your header logo)

                return null;
            }
        });

Available

HeaderDesign.fromColorAndUrl(Color.BLUE,"http:...);
HeaderDesign.fromColorResAndUrl(R.color.blue,"http:...);
HeaderDesign.fromColorAndDrawable(Color.BLUE,myDrawable);
HeaderDesign.fromColorResAndDrawable(R.color.blue,myDrawable);

Toolbar

Toolbar toolbar = mViewPager.getToolbar();

if (toolbar != null) {
     setSupportActionBar(toolbar);

     ActionBar actionBar = getSupportActionBar();
     actionBar.setDisplayHomeAsUpEnabled(true);
     actionBar.setDisplayShowHomeEnabled(true);
     actionBar.setDisplayShowTitleEnabled(true);
     actionBar.setDisplayUseLogoEnabled(false);
     actionBar.setHomeButtonEnabled(true);
}

ViewPager

ViewPager viewPager = mViewPager.getViewPager();
viewPage.setAdapter(...);

//After set an adapter to the ViewPager
mViewPager.getPagerTitleStrip().setViewPager(mViewPager.getViewPager());

RecyclerView

mRecyclerView.addItemDecoration(new MaterialViewPagerHeaderDecorator());
mRecyclerView.setAdapter(yourAdapter);

ScrollView

The ScrollView must be an NestedScrollView`

MaterialViewPagerHelper.registerScrollView(getActivity(), mScrollView, null);

And include @layout/material_view_pager_placeholder` as first child

<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/material_view_pager_placeholder"/>

        ...your content...

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

CHANGELOG

1.2.0

  • header decorator instead of Adapter

1.1.3

  • header is now clickable
  • fixed some scrolling issues

1.1.2

  • quick scroll fix
  • can set a custom viewpager with app:viewpager_viewpager (the viewpager id must be id/materialviewpager_viewpager)

1.1.0

  • orientation change fix
  • header image display fix
  • elements on header are now clickable
  • notifyHeaderChanged

1.0.8

  • added attribute viewpager_disableToolbar

1.0.7

  • fix bug on low resolutions

1.0.6

  • added attribute transparentToolbar
  • added attribute animatedHeaderImage
  • fixed bug when page is too small to scroll
  • modified HeaderDesign implementation

1.0.5

  • smoother toolbar scrolling
  • fixed bug with fitSystemWindow
  • added HeaderDesign to modify the header color & image
  • added displayToolbarWhenSwipe attribute

1.0.4

Fixed :

  • Orientation changed
  • Memory Leak
  • Android >2.3 with NineOldAndroid
  • Removed ListView usage

1.0.3

Fixed : Rapid scrolling results in varying Toolbar height

RecyclerViewMaterialAdapter can handle a custom placeholder cells count (usefull for GridLayoutManager)

public RecyclerViewMaterialAdapter(RecyclerView.Adapter adapter, int placeholderSize)

1.0.2

Added attributes

app:viewpager_parallaxHeaderFactor="1.5"
app:viewpager_headerAdditionalHeight="20dp"

parallaxHeaderFactor Modify the speed of parallax header scroll (not the speed of KenBurns effect) parallaxHeaderFactor Set up the height of the header's layout displayed behind the first cards view

Fixed issue when scroll down & scroll up multiples time while hideToolbarAndTitle="true"

1.0.1

Added attributes

viewpager_headerAlpha="0.6"

Community

Looking for contributors, feel free to fork !

Tell me if you're using my library in your application, I'll share it in this README

Dependencies

Credits

Author: Florent Champigny http://www.florentchampigny.com/

Blog : http://www.tutos-android-france.com/

Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/

Android app on Google Play Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

License

Copyright 2015 florent37, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • new to Git hub

    new to Git hub

    im new to Github,i want to use this MaterialView pager material design into my project i tryd to import it into android studio,but it shows some error

    opened by Rahulkishanm 19
  • AppCompat does not support current theme features

    AppCompat does not support current theme features

    I am trying to solve this problem but it doesnt seem to work for me. I have styles.xml and v21/styles.xml.

    My styles.xml looks like this:

    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"/>
    
        <style name="AppTheme.NoActionBar">
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="android:windowTranslucentStatus">true</item>  
    

    My v21/styles.xml looks like this

    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
        <item name="android:windowTranslucentStatus">true</item>
    
        </style>
    

    Now I have created a BaseActivity in order to extend the Material NavDrawer in all the activities. In order to do so, it is required for me to first call the

     setContentView(R.layout.activity_main);
        super.onCreate(savedInstanceState);
    

    If I change this order then the activities which will extend the BaseACtivity wont be able to identify the controls in the BaseActivity and it gives me error for not able to find controls.

    So it seems I am in deadlock.

    Please let me know what to do.

    Thanks in Advance.

    opened by pmk2429 16
  • Header View stay hidden when i remove last item of RecyclerView

    Header View stay hidden when i remove last item of RecyclerView

    Hello, I use MaterialViewPager with RecyclerView, everything is ok, but when i try to remove an item from my recycler adapter (generally the last), i cant see the header view anymore. When i scroll to top after item removed, the header view stays collapsed and i dont know why.

    Can you help me ?

    opened by GrayaMax 11
  • another fragment shows full screen

    another fragment shows full screen

    not able to use a fragment that contains listview. if i add the listview it looks in whole screen. the effect that is on another fragments not getting in listview.

    opened by droidwithme 11
  • [Question] NullPointerException in AS Preview

    [Question] NullPointerException in AS Preview

    Hey, I am new to your Material ViewPager and not sure if it is an issue or not. When copying your code (from README, "Usage") into my layout, this error appears in the Android Studio Design Tab:

    java.lang.NullPointerException at com.github.florent37.materialviewpager.MaterialViewPager.onFinishInflate(MaterialViewPager.java:70) at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:814) at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:64) at android.view.LayoutInflater.rInflate(LayoutInflater.java:782) at android.view.LayoutInflater.rInflate_Original(LayoutInflater.java:809) at android.view.LayoutInflater_Delegate.rInflate(LayoutInflater_Delegate.java:64) at android.view.LayoutInflater.rInflate(LayoutInflater.java:782) at android.view.LayoutInflater.inflate(LayoutInflater.java:504) at android.view.LayoutInflater.inflate(LayoutInflater.java:385) at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:400) at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:332) at com.android.ide.common.rendering.LayoutLibrary.createSession(LayoutLibrary.java:350) at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:497) at com.android.tools.idea.rendering.RenderTask$2.compute(RenderTask.java:485) at com.intellij.openapi.application.impl.ApplicationImpl.runReadAction(ApplicationImpl.java:894) at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:485) at com.android.tools.idea.rendering.RenderTask.render(RenderTask.java:590) at com.intellij.android.designer.designSurface.AndroidDesignerEditorPanel$6.run(AndroidDesignerEditorPanel.java:480) at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:320) at com.intellij.util.ui.update.MergingUpdateQueue.execute(MergingUpdateQueue.java:310) at com.intellij.util.ui.update.MergingUpdateQueue$2.run(MergingUpdateQueue.java:254) at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:269) at com.intellij.util.ui.update.MergingUpdateQueue.flush(MergingUpdateQueue.java:227) at com.intellij.util.ui.update.MergingUpdateQueue.run(MergingUpdateQueue.java:217) at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:238) at com.intellij.util.Alarm$Request$1.run(Alarm.java:351) at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at java.lang.Thread.run(Thread.java:745)

    My Code in Android Studio: `

    <com.github.florent37.materialviewpager.MaterialViewPager
        android:id="@+id/materialViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:viewpager_logo="@layout/header_logo"
        app:viewpager_logoMarginTop="100dp"
        app:viewpager_color="@color/colorPrimary"
        app:viewpager_headerHeight="200dp"
        app:viewpager_headerAlpha="1.0"
        app:viewpager_hideLogoWithFade="true"
        app:viewpager_hideToolbarAndTitle="true"
        app:viewpager_enableToolbarElevation="true"
        />
    
    `

    What can I do?

    Regards, DDerTyp

    question 
    opened by jdstaerk 10
  • Sometimes on scrolling, the header and strip becomes transparent and sometimes on tab change strip becomes transparent !

    Sometimes on scrolling, the header and strip becomes transparent and sometimes on tab change strip becomes transparent !

    screenshot_2015-09-14-13-39-55

    See the random padding gap in this image.

    screenshot_2015-09-14-13-40-24

    See the random padding gap in this image.

    screenshot_2015-09-14-13-40-58

    Sometimes the header becomes transparent and the below scrolled list is visible.

    screenshot_2015-09-14-13-41-10

    Same issue !

    Thanks!

    opened by nikhilverma1395 9
  • Why view pager display in black color

    Why view pager display in black color

    i try to use MaterialViewPager and everything work ok except the color : 2015-12-26_18-47-15

    and this is my style.xml file :

    <!-- Base application theme. -->
    <!--<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">-->
        <!--&lt;!&ndash; Customize your theme here. &ndash;&gt;-->
        <!--<item name="colorPrimary">@color/colorPrimary</item>-->
        <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>-->
        <!--<item name="colorAccent">@color/colorAccent</item>-->
    <!--</style>-->
    
    <!--<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">-->
    <!--</style>-->
    
    
    <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
    </style>
    
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    
    
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <item name="android:windowTranslucentStatus" tools:targetApi="19">true</item>
    
        <item name="android:windowContentOverlay">@null</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    
        <!-- Material Theme -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/accent_color</item>
    
        <item name="android:statusBarColor" tools:targetApi="21">@color/statusBarColor</item>
        <item name="android:navigationBarColor" tools:targetApi="21">@color/navigationBarColor</item>
        <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="21">true</item>
    
    
    </style>
    
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@color/drawerArrowColor</item>
    </style>
    
    opened by MBehtemam 8
  • RecyclerView doesn't look fine with Grid Layout Manager !

    RecyclerView doesn't look fine with Grid Layout Manager !

    @florent37

    Recycler View was working fine till used with Linear Layout Manager works fine. But when i used Grid Layout Manager ! This happened image

    The complete fragment shifted up and the first item of the grid view is appearing blank

    opened by vj-1023 8
  • recyclerview cover the tab

    recyclerview cover the tab

    Here is the code:

    DrawerLayout

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/id_drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >
    
    <!-- main -->
    
    <com.github.florent37.materialviewpager.MaterialViewPager
        android:id="@+id/id_materialViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:viewpager_logo="@layout/header_logo"
        app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_newstand"
        app:viewpager_logoMarginTop="100dp"
        app:viewpager_color="?colorPrimary"
        app:viewpager_headerHeight="200dp"
        app:viewpager_headerAlpha="0.6"
        app:viewpager_hideLogoWithFade="false"
        app:viewpager_hideToolbarAndTitle="true"
        app:viewpager_enableToolbarElevation="true"
        app:viewpager_parallaxHeaderFactor="1.5"
        app:viewpager_headerAdditionalHeight="20dp"
        app:viewpager_displayToolbarWhenSwipe="true"
        app:viewpager_transparentToolbar="true"
        app:viewpager_animatedHeaderImage="true"
        />
    
    
    <!-- slide -->
    <android.support.design.widget.NavigationView
        android:id="@+id/id_navigation"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header_layout"
        app:menu="@menu/navigation_menu"
        >
    </android.support.design.widget.NavigationView>
    
    </android.support.v4.widget.DrawerLayout>
    

    Main Activity

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    
    <include layout="@layout/custom_drawerlayout"/>
    
    </LinearLayout>
    

    Main Activity Class

    ...
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.bind(this);
    
        Toolbar toolbar = materialViewPager.getToolbar();
        if(toolbar != null) {
            setSupportActionBar(toolbar);
        }
        final ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setTitle("");
            actionBar.setHomeButtonEnabled(true);
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowCustomEnabled(true);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setDisplayUseLogoEnabled(true);
        }
    
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0);
    
        drawerLayout.setDrawerListener(drawerToggle);
    
        navigationView.setNavigationItemSelectedListener((menuItem) -> {
    
                switch (menuItem.getItemId()) {
    
                }
    
    
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
    
                return true;
        });
    
        mdViewPagerAdapter = new MDViewPagerAdapter(getSupportFragmentManager());
    
        materialViewPager.getViewPager().setAdapter(mdViewPagerAdapter);
    
        materialViewPager.setMaterialViewPagerListener(new MaterialViewPager.Listener() {
            @Override
            public HeaderDesign getHeaderDesign(int i) {
                switch (i) {
                    case 0:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.cyan,
                                IAMGE_URL_ONE
                        );
                    case 1:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.cyan,
                                IAMGE_URL_TWO
                        );
                    case 2:
                        return HeaderDesign.fromColorResAndUrl(
                                R.color.cyan,
                                IAMGE_URL_THREE
                        );
                    default:
                        return null;
                }
    
            }
        });
    
        materialViewPager.getViewPager().setOffscreenPageLimit(mdViewPagerAdapter.getCount());
        materialViewPager.getPagerTitleStrip().setViewPager(materialViewPager.getViewPager());
    
        logo.setOnClickListener((view) -> {
            materialViewPager.notifyHeaderChanged();
        });
    
    

    Fragment

        @Override
        public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
            super.onViewCreated(view, savedInstanceState);
    
        fetchData();
    
        //TODO test topic data
        for (int i = 0; i < 20; i++) {
            Topic topic =  new Topic();
            topics.add(topic);
        }
    
        topicFragmentAdapter.setData(topics);
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(topicFragmentAdapter);
    
        refreshLayout.setOnRefreshListener(() -> {
            topicFragmentAdapter.notifyDataSetChanged();
            refreshLayout.setRefreshing(false);
        });
    
        MaterialViewPagerHelper.registerRecyclerView(getActivity(),
                recyclerView, null);
    
    

    I attempt to find something wrong, but failed. Please, or give me some suggestion! Thank you!

    opened by kaiwk 8
  • OnRotation with Fragments - toolbar losses properties

    OnRotation with Fragments - toolbar losses properties

    My Activity code:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_movie_details_news_stand);
        setTitle("");
    
        mViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager);
    
        toolbar = mViewPager.getToolbar();
        mDrawer = (DrawerLayout) findViewById(R.id.drawerLayout);
    
        if (toolbar != null) {
            setSupportActionBar(toolbar);
    
            final ActionBar actionBar = getSupportActionBar();
            if (actionBar != null) {
                actionBar.setDisplayHomeAsUpEnabled(true);
                actionBar.setDisplayShowHomeEnabled(true);
                actionBar.setDisplayShowTitleEnabled(true);
                actionBar.setDisplayUseLogoEnabled(false);
                actionBar.setHomeButtonEnabled(true);
            }
        }
    
        DrawerFragment drawerFragment = (DrawerFragment) getSupportFragmentManager().findFragmentById(R.id.drawerFragment);
        drawerFragment.setUp(mDrawer, toolbar);
    
        volleySingleton = VolleySingleton.getInstance();
        requestQueue = volleySingleton.getRequestQueue();
    
        long movieID = getIntent().getLongExtra(INTENT_EXTRA_MOVIE_ID, 1);
        String title = getIntent().getStringExtra(INTENT_EXTRA_MOVIE_TITLE);
    
        generateFragments();
    
        mViewPager.getViewPager().setAdapter(new movieDetailsPagerAdapter(getSupportFragmentManager()));
    
        if (savedInstanceState != null) {
            movieDetails = savedInstanceState.getParcelable(STATE_MOVIE_DETAILS);
    
            if (movieDetails.server_timezone != null && !movieDetails.server_timezone.equals("N/A")) {
               mViewPager.setMaterialViewPagerListener(new MovieMaterialViewPagerListener());
            } else {
                sendJsonRequest(URLModifierclass.getMovieDetailsByIDURL(movieID, true, true));
                mViewPager.setMaterialViewPagerListener(new DefaultMaterialViewPagerListener());
            }
        } else {
            sendJsonRequest(URLModifierclass.getMovieDetailsByIDURL(movieID, true, true));
            mViewPager.setMaterialViewPagerListener(new DefaultMaterialViewPagerListener());
        }
    
        mViewPager.getViewPager().setOffscreenPageLimit(mViewPager.getViewPager().getAdapter().getCount());
        mViewPager.getPagerTitleStrip().setViewPager(mViewPager.getViewPager());
    
        View view = mViewPager.getRootView();
        TextView headerLogo = (TextView) view.findViewById(R.id.logo_white);
        headerLogo.setText(title);
    
        mViewPager.getViewPager().setCurrentItem(1);
    
    
    }
    

    Everything works fine, if i open normally. But if i rotate the screen once. From then it shows all the below problems, even if i come to portriat. so when saveninstancestate!=null it fails.

    The Problems

    1. it sets the title but the title is above statusbar. I can see character tails in statusbar
    2. I made viewpager_transparentToolbar="false" but that is transparent
    3. It doesn't set currentItem as 1

    All these occur from first time i rotate the screen

    Try 1 : :+1: i tried moving if block top the end of oncreate but still all problems exist

    Try 2: :+1: i tried removing everything from if block except retrieving my object still it fails

    Any Idea? Should i need to do some thing in onSavedInstanceState() ??

    opened by Ashok-Varma 8
  • Add option to disable KenBurns effect

    Add option to disable KenBurns effect

    Would be nice to have the option to disable the effect and expose the ImageView so the scale type can be set. Great library though, thanks for creating it!

    opened by stephenmcbride 8
  • Header image

    Header image

    How can i set the attribute scale type for the header image as I have not using the separate layout for header . I am setting the images programatically

    opened by jjaspreet 0
  • java.lang.NullPointerException

    java.lang.NullPointerException

    java.lang.NullPointerException: Attempt to read from field 'float com.github.florent37.materialviewpager.MaterialViewPagerAnimator.lastYOffset' on a null object reference
        at com.github.florent37.materialviewpager.MaterialViewPager.onSaveInstanceState(MaterialViewPager.java:123)
        at android.view.View.dispatchSaveInstanceState(View.java:15688)
        at android.view.ViewGroup.dispatchSaveInstanceState(ViewGroup.java:3206)
        at android.view.ViewGroup.dispatchSaveInstanceState(ViewGroup.java:3212)
        at android.view.View.saveHierarchyState(View.java:15671)
        at androidx.fragment.app.FragmentManagerImpl.saveFragmentViewState(FragmentManagerImpl.java:2276)
        at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:951)
        at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1238)
        at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:434)
        at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2079)
        at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1869)
        at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1824)
        at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1727)
        at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
        at android.os.Handler.handleCallback(Handler.java:751)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6119)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
    
    opened by lizonezhi 0
  • Crashes of Android Pie

    Crashes of Android Pie

    whenever i run on android pie it crashes and gives me error java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN

    Please anyone help me out with this

    opened by NileshTak 1
Releases(1.2.0)
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
Easy creation and management of toggle buttons on Android from the Material Design spec.

ToggleButtonLayout Easy creation and management of toggle buttons from the Material Design spec. Read more about ToggleButtonLayout in our blog post.

Savvy 229 Jan 9, 2023
A library to bring fully animated Material Design components to pre-Lolipop Android.

Material MaterialLibrary is an Open Source Android library that back-port Material Design components to pre-Lolipop Android. MaterialLibrary's origina

Rey Pham 6k Dec 21, 2022
[] Android Library that implements Snackbars from Google's Material Design documentation.

DEPRECATED This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for a

null 1.5k Dec 16, 2022
A library support form with material design, construct same with Android UI Framework

SwingUI A slight Java Swing library support form with material design, construct same with Android UI Framework writen in Kotlin Supported: 1. Screen:

Cuong V. Nguyen 3 Jul 20, 2021
Material Shadows for android : A library for supporting convex material shadows

MaterialShadows A library for seamlessly integrating Material shadows. The library takes existing material shadows to next level by adding the followi

Harjot Singh Oberai 2.2k Dec 19, 2022
Material Design icons by Google

Material design icons Material design icons is the official icon set from Google. The icons are designed under the material design guidelines. 4.0.0 U

Google 47.1k Jan 9, 2023
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Kai Zhu 6.1k Dec 30, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Jan 9, 2023
Material Design ProgressBar with consistent appearance

MaterialProgressBar Material Design ProgressBar with consistent appearance on Android 4.0+. Why MaterialProgressBar? Consistent appearance on Android

Hai Zhang 2.2k Dec 21, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Jan 5, 2023
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
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
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
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
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Jan 3, 2023