Custom Indicators

Basic Usage

Add the following 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"
/>

Customizable Properties

Property	Description
`shape`	`oval` \| `rect`
`visibility`	`visible` \| `invisible`
`selected_drawable unselected_drawable`	You can use an image or custom drawable as the indicator. If you decide to use your own drawable, then the built-in drawable and the properties associated with the built-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` `unselected_padding_left` `selected_padding_right` `unselected_padding_right` `selected_padding_top` `unselected_padding_top` `selected_padding_bottom` `unselected_padding_bottom`	the padding of the indicator

Examples

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"
        />

NOTE: Because a custom image is used for the indicator, following properties will not work:

custom:selected_color
custom:selected_width
custom:selected_height
custom:shape
custom:color
custom:width
custom:height

Preset Styles

Source is here.

Preset-1:

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        style="@style/AndroidImageSlider_Magnifier_Oval_Black"
        />

Preset-2:

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        style="@style/AndroidImageSlider_Attractive_Rect_Blue"
        />

Preset-3:

    <com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        style="@style/AndroidImageSlider_Corner_Oval_Orange"
        />

Using the View

Bind it with a SliderLayout instance.

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

If you have a better indicator idea, please feel free 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Custom Indicators

Basic Usage

Customizable Properties

Examples

Preset Styles

Using the View

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally