This repository was archived by the owner on Feb 8, 2022. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork1.5k
A Material Design ViewPager easy to use library
License
NotificationsYou must be signed in to change notification settings
florent37/MaterialViewPager
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Material Design ViewPager easy to use library
And have a look on a sample Youtube Video :Youtube Link
In your module
compile'com.github.florent37:materialviewpager:1.2.3'//dependenciescompile'com.flaviofaria:kenburnsview:1.0.7'compile'com.jpardogo.materialtabstrip:library:1.1.0'compile'com.github.bumptech.glide:glide:4.0.0'
Add MaterialViewPager to your activity's layout
<com.github.florent37.materialviewpager.MaterialViewPagerandroid: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" />
withheader_logo.xml
<?xml version="1.0" encoding="utf-8"?><TextViewxmlns: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 :
To get a beautiful screen and enable preview, you theme may follow
<stylename="AppBaseTheme"parent="@style/Theme.AppCompat.Light"></style><stylename="AppTheme"parent="AppBaseTheme"> <itemname="android:textColorPrimary">@android:color/white</item> <itemname="drawerArrowStyle">@style/DrawerArrowStyle</item> <itemname="android:windowTranslucentStatus"tools:targetApi="21">true</item> <itemname="android:windowContentOverlay">@null</item> <itemname="windowActionBar">false</item> <itemname="windowNoTitle">true</item><!-- Toolbar Theme / Apply white arrow--> <itemname="colorControlNormal">@android:color/white</item> <itemname="actionBarTheme">@style/AppTheme.ActionBarTheme</item><!-- Material Theme--> <itemname="colorPrimary">@color/colorPrimary</item> <itemname="colorPrimaryDark">@color/colorPrimaryDark</item> <itemname="colorAccent">@color/accent_color</item> <itemname="android:navigationBarColor"tools:targetApi="21">@color/navigationBarColor</item> <itemname="android:windowDrawsSystemBarBackgrounds"tools:targetApi="21">true</item></style><stylename="AppTheme.ActionBarTheme"parent="@style/ThemeOverlay.AppCompat.ActionBar"><!-- White arrow--> <itemname="colorControlNormal">@android:color/white</item></style><stylename="DrawerArrowStyle"parent="Widget.AppCompat.DrawerArrowToggle"> <itemname="spinBars">true</item> <itemname="color">@color/drawerArrowColor</item></style>
You can use MaterialViewPager as an usual Android View, and get it by findViewById
publicclassMainActivityextendsActionBarActivity {privateMaterialViewPagermViewPager;@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mViewPager = (MaterialViewPager)findViewById(R.id.materialViewPager); }}
First choose your color and height
<com.github.florent37.materialviewpager.MaterialViewPagerandroid:id="@+id/materialViewPager"android:layout_width="match_parent"android:layout_height="match_parent" ...app:viewpager_color="@color/colorPrimary"app:viewpager_headerHeight="200dp" ... />
<com.github.florent37.materialviewpager.MaterialViewPager ...app:viewpager_logo="@layout/header_logo" <-- look custom logo layoutapp:viewpager_logoMarginTop="100dp" <-- look at the preview ... />
Your logo's layout must
- layout_height="@dimen/materialviewpager_logoHeight"
header_logo.xml
<ImageViewxmlns: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" ... />
header_logo.xml
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="80dp"android:layout_height="80dp"android:layout_centerHorizontal="true"android:background="@drawable/circle"> <ImageViewandroid: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" ... />
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_hideToolbarAndTitle="true" ... />
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_hideToolbarAndTitle="false" ... />
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_transparentToolbar="true" ... />
You can replace the header
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_header="@layout/myHeader" ... />
Or use the default header, with a KenBurns animation
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_animatedHeaderImage="true" ... />
Or simply use an ImageView as header
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_animatedHeaderImage="false" ... />
You can set you own tab bar, by default I provided 2 implementations
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_standard" ... />
<com.github.florent37.materialviewpager.MaterialViewPager` ...app:viewpager_pagerTitleStrip="@layout/material_view_pager_pagertitlestrip_newstand" ... />
Create your own layout using a PagerSlidingTabStrip
my_tabs.xml
<com.astuetz.PagerSlidingTabStripxmlns: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
<com.github.florent37.materialviewpager.MaterialViewPager ...app:viewpager_pagerTitleStrip="@layout/my_tabs" ... />
Simply add a listen to the ViewPager
mViewPager.setMaterialViewPagerListener(newMaterialViewPager.Listener() {@OverridepublicHeaderDesigngetHeaderDesign(intpage) {switch (page) {case0:returnHeaderDesign.fromColorResAndUrl(R.color.blue,"http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg");case1:returnHeaderDesign.fromColorResAndUrl(R.color.green,"https://fs01.androidpit.info/a/63/0e/android-l-wallpapers-630ea6-h900.jpg");case2:returnHeaderDesign.fromColorResAndUrl(R.color.cyan,"http://www.droid-life.com/wp-content/uploads/2014/10/lollipop-wallpapers10.jpg");case3:returnHeaderDesign.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)returnnull; } });
Available
HeaderDesign.fromColorAndUrl(Color.BLUE,"http:...);HeaderDesign.fromColorResAndUrl(R.color.blue,"http:...);HeaderDesign.fromColorAndDrawable(Color.BLUE,myDrawable);HeaderDesign.fromColorResAndDrawable(R.color.blue,myDrawable);
Toolbartoolbar =mViewPager.getToolbar();if (toolbar !=null) {setSupportActionBar(toolbar);ActionBaractionBar =getSupportActionBar();actionBar.setDisplayHomeAsUpEnabled(true);actionBar.setDisplayShowHomeEnabled(true);actionBar.setDisplayShowTitleEnabled(true);actionBar.setDisplayUseLogoEnabled(false);actionBar.setHomeButtonEnabled(true);}
ViewPagerviewPager =mViewPager.getViewPager();viewPage.setAdapter(...);//After set an adapter to the ViewPagermViewPager.getPagerTitleStrip().setViewPager(mViewPager.getViewPager());
mRecyclerView.addItemDecoration(newMaterialViewPagerHeaderDecorator());mRecyclerView.setAdapter(yourAdapter);
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.NestedScrollViewxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/scrollView"android:layout_width="match_parent"android:layout_height="match_parent"> <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"> <includelayout="@layout/material_view_pager_placeholder"/> ...your content... </LinearLayout></android.support.v4.widget.NestedScrollView>
- header decorator instead of Adapter
- header is now clickable
- fixed some scrolling issues
- quick scroll fix
- can set a custom viewpager with app:viewpager_viewpager (the viewpager id must be id/materialviewpager_viewpager)
- orientation change fix
- header image display fix
- elements on header are now clickable
- notifyHeaderChanged
- added attribute viewpager_disableToolbar
- fix bug on low resolutions
- added attribute transparentToolbar
- added attribute animatedHeaderImage
- fixed bug when page is too small to scroll
- modified HeaderDesign implementation
- smoother toolbar scrolling
- fixed bug with fitSystemWindow
- added HeaderDesign to modify the header color & image
- added displayToolbarWhenSwipe attribute
Fixed :
- Orientation changed
- Memory Leak
- Android >2.3 with NineOldAndroid
- Removed ListView usage
Fixed : Rapid scrolling results in varying Toolbar height
RecyclerViewMaterialAdapter can handle a custom placeholder cells count (usefull for GridLayoutManager)
publicRecyclerViewMaterialAdapter(RecyclerView.Adapteradapter,intplaceholderSize)
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"
Added attributes
viewpager_headerAlpha="0.6"
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
- Glide (from Bumptech)
- KenBurnsView (from flavioarfaria)
- Material PagerSlidingTabStrip (from jpardogo, forked from astuetz)
Author: Florent Champignyhttp://www.florentchampigny.com/
Blog :http://www.tutos-android-france.com/
Fiches Plateau Moto :https://www.fiches-plateau-moto.fr/
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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.About
A Material Design ViewPager easy to use library
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.