MaterialViewPager

by florent37

A Material Design ViewPager easy to use library

8.2K Stars 1.5K Forks Last release: over 4 years ago (1.2.0) Apache License 2.0 311 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 ```groovy 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 ```xml <com.github.florent37.materialviewpager.MaterialViewPager android:id="@+id/materialViewPager" android:layoutwidth="matchparent" android:layoutheight="matchparent" app:viewpagerlogo="@layout/headerlogo" app:viewpagerlogoMarginTop="100dp" app:viewpagercolor="@color/colorPrimary" app:viewpagerheaderHeight="200dp" app:viewpagerheaderAlpha="1.0" app:viewpagerhideLogoWithFade="false" app:viewpagerhideToolbarAndTitle="true" app:viewpagerenableToolbarElevation="true" app:viewpagerparallaxHeaderFactor="1.5" app:viewpagerheaderAdditionalHeight="20dp" app:viewpagerdisplayToolbarWhenSwipe="true" app:viewpagertransparentToolbar="true" app:viewpageranimatedHeaderImage="true" app:viewpager_disableToolbar="false"

/>
with **header_logo.xml**
```xml


You will see on Android Studio Preview :

alt preview

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





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

xml

Set your logo


Titlebar Logo

Video

Your logo's layout must * layoutheight="@dimen/materialviewpagerlogoHeight"

header_logo.xml

xml

Fading Logo

Video

header_logo.xml ```xml


```


Toolbar Animation

Hide Logo and Toolbar

Video


Sticky Toolbar

Video


Transparent Toolbar

Video


Header Layout

You can replace the header


Moving Header

Or use the default header, with a KenBurns animation


Static Header

Or simply use an ImageView as header


Custom Tab Bar

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

Standard

Video


News Stand

Video


Or create your own tab bar

Create your own layout using a PagerSlidingTabStrip

my_tabs.xml

xml

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


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

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

And include @layout/materialviewpager_placeholder` as first child

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

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

    ...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:viewpagerviewpager (the viewpager id must be id/materialviewpagerviewpager)

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)

java
public RecyclerViewMaterialAdapter(RecyclerView.Adapter adapter, int placeholderSize)

1.0.2

Added attributes

java
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

java
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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.