Slider view

A SliderView is the view that shows in SliderLayout. There are two preset slider views.

• DefaultSliderView can only show an image.
• TextSliderView can show an image and description text.

It's very very easy to make your own custom Slider View.

Step 1

Define an xml layout which represents the layout you want to show in SliderLayout.

For example:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView
        android:id="@+id/daimajia_slider_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ProgressBar 
        android:id="@+id/loading_bar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:id="@+id/description_layout"
        android:layout_alignParentBottom="true"
        android:minHeight="30dp"
        android:background="#77000000"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:layout_height="wrap_content">
            <TextView
                android:id="@+id/description"
                android:textColor="#ffffff"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
</RelativeLayout>

Tip: If you want to have a ProgressBar, then add a ProgressBar and name it loading_bar, you don't need to manipulate it, the library will do it.

    <ProgressBar 
        android:id="@+id/loading_bar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Step 2

Create a class which extends from BaseSliderView, and implement the getView() method. In the getView() method, inflate the layout file, and pass the arguments into it.

Tip: You can get arguments via getTag() or getBundle().

DO NOT forget to call loadImage(ImageView target) and bindClickEvent(View target) at last.

If you don't call loadImage(ImageView target) then, the slider will not load the image into the target image view.

If you don't call bindClickEvent(View target) then, the slider will not get the click event when user clicks the view.

public class TextSliderView extends BaseSliderView{
    public TextSliderView(Context context) {
        super(context);
    }

    @Override
    public View getView() {
        View v = LayoutInflater.from(getContext()).inflate(R.layout.render_type_text,null);
        ImageView target = (ImageView)v.findViewById(R.id.daimajia_slider_image);
        TextView description = (TextView)v.findViewById(R.id.description);
        description.setText(getDescription());
        loadImage(target);
        bindClickEvent(v);
        return v;
    }
}

Step 3

Start using your creative work.

TextSliderView demoSlider = new TextSliderView(this);
demoSlider.description("Game of Thrones")
          .image("http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg")
          .setOnClickListener(this);
slider.addSlider(demoSlider);

Congratulations! You have created your own custom slider view. Pretty easy right? 😃