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:

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

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.