Skip to content

Custom Indicators

Jump to bottom Edit New page
代码家 edited this page Jun 9, 2014 · 3 revisions

###Step1

Add below xml to your layout.

<com.daimajia.slider.library.Indicators.PagerIndicator
		android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
/>

###Step2

Custom your own properties.

####Properties Cheat Sheet

Property Description
shape oval
visibility visible
selected_drawable unselected_drawable You can use an image or custom drawable as indicator, if you decide to use your own drawable, then the build-in drawable and the properties associate with the build-in drawable will not work.
selected_color unselected_color the color of the indicator
selected_width unselected_width the width of the shape
selected_height unselected_height the height of the shape
selected_padding_left unselecte_padding_left selected_padding_right unselected_padding_right selected_padding_top unselected_padding_top selected_padding_bottom unselected_padding_bottom the padding of the inidicator

####Example

Demo-1

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#555555"
        custom:unselected_color="#55555555"
        custom:shape="oval"
        custom:selected_padding_left="3dp"
        custom:selected_padding_right="3dp"
        custom:unselected_padding_left="3dp"
        custom:unselected_padding_right="3dp"
        custom:selected_width="8dp"
        custom:selected_height="8dp"
        custom:unselected_width="4dp"
        custom:unselected_height="4dp"
        />

Demo-2

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#FF5500"
        custom:unselected_color="#55333333"
        custom:shape="rect"
        custom:selected_padding_left="2dp"
        custom:selected_padding_right="2dp"
        custom:unselected_padding_left="2dp"
        custom:unselected_padding_right="2dp"
        custom:selected_width="16dp"
        custom:selected_height="3dp"
        custom:unselected_width="16dp"
        custom:unselected_height="3dp"
        />

Demo-3

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#0095BF"
        custom:unselected_color="#55333333"
        custom:shape="rect"
        custom:selected_padding_left="2dp"
        custom:selected_padding_right="2dp"
        custom:unselected_padding_left="2dp"
        custom:unselected_padding_right="2dp"
        custom:selected_width="6dp"
        custom:selected_height="6dp"
        custom:unselected_width="6dp"
        custom:unselected_height="6dp"
        />

Demo-4

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        custom:selected_color="#0095BF" 
        custom:unselected_color="#55333333"
        custom:selected_drawable="@drawable/bird"
        custom:shape="oval"
        custom:selected_padding_left="6dp"
        custom:selected_padding_right="6dp"
        custom:unselected_padding_left="2dp"
        custom:unselected_padding_right="2dp"
        custom:selected_width="6dp"
        custom:selected_height="6dp"
        custom:unselected_width="6dp"
        custom:unselected_height="6dp"
        />

Please notice: custom:selected_color,custom:selected_width,custom:selected_height will not work, because you set an image as indicator. So, the build-in properties shape/color/width/height will not work.

###Step3

Bind it with a SliderLayout instance.

slider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));

If you have a better indicator idea, please feel relax to email me, or submit a issue. :-D

You are welcome to contribute and share your amazing indicator, transformer or slider child view animation design. 😄

Basic

Advanced Custom

Clone this wiki locally