Home

Awesome

WaveSideBar

You can use WaveSideBar in the contacts page of your application.
Refer to AlexLiuSheng/AnimSideBar.

Screenshot

Screenshot

Include the WaveSideBar to Your Project

With gradle:

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

Use WaveSideBar 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

AttributesFormatDefaultDescription
sidebar_text_colorcolorColor.GRAYText color of side bar.
sidebar_text_sizedimension14spText size of side bar.
sidebar_max_offsetdimension80dpOffset of the selected item.
sidebar_positionenum {right, left}rightBe placed on left or right in the view.
sidebar_text_alignmentenum {center, left, right}centerAlignment of items.
sidebar_lazy_respondbooleanfalseIf 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 WaveSideBar

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("あ", "か", "さ", "た", "な", "は", "ま", "や", "ら", "わ");
<img src="screenshot/japanese1.png" width="400"> <img src="screenshot/japanese2.png" width="400">

Use Left Hand?

Use setPosition to change the position of side bar.

sideBar.setPosition(WaveSideBar.POSITION_LEFT);
<img src="screenshot/position_left.png" width="400">

Lazy respond

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

sideBar.setLazyRespond(true);

Screenshot