How to Add Wave Sidebar Animation Android

0
425
Wave Sidebar Animation Android
Wave Sidebar Animation Android

Previously we discuss how to implement basic animating sidebar in Android and now we increase our level with adding Wave Sidebar Animation in Android application.

You can see demo of two different projects below:

Demo : Wave Sidebar Animation Android Library
Demo :Bubble Scroll Animation Android Library
Demo :WaveSideBar Animation Android Library
Demo :WaveSideBar Animation Android Library

You can use WaveSideBar library in the contacts page of your application.

Here you can get two source code first one is WaveSidebar and other one is Bubble Scroll which demo you can see above.

Include the Wave SideBar Animation to Your Project

With gradle:

dependencies {
   compile 'com.gjiazhe:wavesidebar:1.3'
}

Use Wave SideBar in Layout File

<com.gjiazhe.wavesidebar.WaveSideBar
        android:id="@+id/side_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingRight="8dp"
        app:sidebar_position="right"
        app:sidebar_max_offset="80dp"
        app:sidebar_lazy_respond="false"
        app:sidebar_text_color="#8D6E63"
        app:sidebar_text_size="14sp"
        app:sidebar_text_alignment="center"/>

Description of Attributes

Attributes Format Default Description
sidebar_text_color color Color.GRAY Text color of side bar.
sidebar_text_size dimension 14sp Text size of side bar.
sidebar_max_offset dimension 80dp Offset of the selected item.
sidebar_position enum {right, left} right Be placed on left or right in the view.
sidebar_text_alignment enum {center, left, right} center Alignment of items.
sidebar_lazy_respond boolean false If true, the listener will not be called until the finger up. If false, the listener will be called when the finger down, move and up.

You can set these attributes in the layout file, or in the java code:

WaveSideBar sideBar = (WaveSideBar) findViewById(R.id.side_bar);
sideBar.setTextColor(Color.BLACK);
sideBar.setMaxOffset(100);
sideBar.setPosition(WaveSideBar.POSITION_LEFT);
sideBar.setTextAlign(WaveSideBar.TEXT_ALIGN_CENTER);
sideBar.setLazyRespond(true);

Set the Listener to Observe Wave SideBar

WaveSideBar sideBar = (WaveSideBar) findViewById(R.id.side_bar);
sideBar.setOnSelectIndexItemListener(new WaveSideBar.OnSelectIndexItemListener() {
    @Override
    public void onSelectIndexItem(String index) {
        Log.d("WaveSideBar", index);
        // Do something here ....
    }
});

Customize the indexes

Use setIndexItems to Customize the indexes.

sideBar.setIndexItems("あ", "か", "さ", "た", "な", "は", "ま", "や", "ら", "わ");

Use Left Hand?

Use setPosition to change the position of side bar.

sideBar.setPosition(WaveSideBar.POSITION_LEFT);

Lazy respond

use setLazyRespond to set whether the side bar should respond lazily to your touch events.

sideBar.setLazyRespond(true);

Hope you like this tutorial and please if you’ve any query and suggestion please comment us.

Share your thoughts

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