Skip to content
This repository has been archived by the owner on Feb 8, 2022. It is now read-only.

Customisation

Florent CHAMPIGNY edited this page May 1, 2015 · 1 revision

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"
        app:viewpager_logoMarginTop="100dp" <-- look at the preview
        ...
        />

###Titlebar Logo

Video

Your logo's layout must

  • layout_width="@dimen/materialviewpager_logoWidth"
  • 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="@dimen/materialviewpager_logoWidth"
    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:hideToolbarAndTitle="true"
        ...
        />

###Sticky Toolbar

Video

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

##Custom Tab Bar

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

Video

###Standard

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

Video

###News Stand

<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:pstsTextAllCaps="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"
        ...
        />
Clone this wiki locally