HollyViewPager – Android Navigation Animation Library

2
2589
HollyViewPager - Android Navigation Animation Library
HollyViewPager - Android Navigation Animation Library

Android Navigation animation is a master key of any Android application and previously we see the article about animation sidebar, Two panel layout animation, bubble tab animation and many more.Consistent navigation is an essential component of the overall user experience. Few things frustrate users more than basic navigation that behaves in inconsistent and unexpected ways.

But today we are going to see the article on a different beautiful ViewPager, with quick swipe controls.

Recommended article on Navigation:

This library named as HollyViewPager Android Library. You can see the demo below:

Demo : HollyViewPager - Android Navigation Animation Library
Demo : HollyViewPager – Android Navigation Animation Library

How to implement this Android Navigation Animation Library?

1Download

In your module and download link of this project is on last of article.

compile 'com.github.florent37:hollyviewpager:1.0.1'
compile 'com.github.ksoichiro:android-observablescrollview:1.5.2'

2Usage

Add a HollyViewPager Android Navigation Animation Library in your layout

<com.github.florent37.hollyviewpager.HollyViewPager
        android:id="@+id/hollyViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:hvp_headerHeight="150dp" />
HollyViewPager hollyViewPager = findViewById(R.id.hollyViewPager);
hollyViewPager.setAdapter(...);

hollyViewPager.setConfigurator(new HollyViewPagerConfigurator() {
           @Override
           public float getHeightPercentForPage(int page) {
               return PERCENT;
           }
       });

3Pages

You pages should contain a recyclerview or a ObservableScrollView

4RecyclerView

HollyViewPagerBus.registerRecyclerView(getActivity(), recyclerView);

Adapter

protected static final int TYPE_HEADER = 0;
protected static final int TYPE_CELL = 1;

    @Override
    public int getItemViewType(int position) {
        switch (position){
            case 0: return TYPE_HEADER;
            default: return TYPE_CELL;
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {
        View view;
        switch (type){
            case TYPE_HEADER:
                new RecyclerView.ViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.hvp_header_placeholder,viewGroup,false)) {};
                break;
            default:
                ...YOUR_VIEW...
                break;
        }
    }

5ScrollView

HollyViewPagerBus.registerScrollView(getActivity(), scrollView);
<com.github.ksoichiro.android.observablescrollview.ObservableScrollView 
  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

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

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

        ... YOUR CONTENT ...

Here is an exploration of a mean to navigate quickly on a board. I found it was an interesting way to quickly switch between different lists and have a little bit more awareness of the whole board.

You can see the other shot for a closer (but static) view.

Hope you like it bros! Please comment us with your queries and suggestions.

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...