Pluto [Android Slider View Library]

⭐ Star us on GitHub — it helps!

Pluto is an Easy, lightweight and high performance slider view library for Android! You can customize it to any view since it based RecyclerView. The differnce of this library, we are not following the concept of images model. Pluto is not depending on any Image loading library

Demo

License

Download

This library is available in jCenter which is the default Maven repository used in Android Studio. You can also import this library from source as a module.

dependencies {
    // other dependencies here
    implementation 'com.opensooq.android:pluto:1.4'
}

Sample Project

We have a sample project demonstrating how to use the library.

Checkout the demo here

Usage

First create your own adapter extending the `PlutoAdapter`

Kotlin

class YourAdapter(items: MutableList<YourModel> , onItemClickListener: OnItemClickListener<Movie>? = null)
    : PlutoAdapter<YourModel, YourViewHolder>(items,onItemClickListener) {

    override fun getViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(parent, R.layout.item_your_layout)
    }

    class YourViewHolder(parent: ViewGroup, itemLayoutId: Int) : PlutoViewHolder<YourModel>(parent, itemLayoutId) {
        private var ivPoster: ImageView = getView(R.id.iv_poster)
        private var tvRating: TextView = getView(R.id.tv_rating)

        override fun set(item: YourModel, position: Int) {
           //  yourImageLoader.with(mContext).load(item.getPosterId()).into(ivPoster);
            tvRating.text = item.imdbRating
        }
    }
}

Java

public class YourAdapter extends PlutoAdapter<YourModel, YourViewHolder> {

    public YourAdapter(List<YourModel> items) {
        super(items);
    }

    @Override
    public ViewHolder getViewHolder(ViewGroup parent, int viewType) {
        return new YourViewHolder(parent, R.layout.item_your_layout);
    }

    public static class YourViewHolder extends PlutoViewHolder<YourModel> {
        ImageView ivPoster;
        TextView tvRating;

        public YourViewHolder(ViewGroup parent, int itemLayoutId) {
            super(parent, itemLayoutId);
            ivPoster = getView(R.id.iv_poster);
            tvRating = getView(R.id.tv_rating);
        }

        @Override
        public void set(YourModel item, int pos) {
           //  yourImageLoader.with(mContext).load(item.getPosterId()).into(ivPoster);
            tvRating.setText(item.getImdbRating());
        }
    }
}

Then in your xml

<com.opensooq.pluto.PlutoView
        android:id="@+id/slider_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicator_visibility="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

finaly attach the adapter to Pluto

Kotlin

val pluto = findViewById<PlutoView>(R.id.slider_view)
        val yourAdapter = YourAdapter(yourModelList, object : OnItemClickListener<Movie> {
            override fun onItemClicked(item: yourModel?, position: Int) {
            }
        })

        pluto.create(adapter, lifecycle = lifecycle)//pass the lifecycle to make the slider aware of lifecycle to avoid memory leak and handling the pause/destroy/resume

Java

  PlutoView pluto = findViewById(R.id.slider_view);
        YourAdapter adapter = new YourAdapter(yourModelsList);
        pluto.create(adapter,getLifecycle());  //pass the lifecycle to make the slider aware of lifecycle to avoid memory leak and handling the pause/destroy/resume

Method	usage
`create(PlutoAdapter adapter, long duration,Lifecycle lifecyle)`	it is the initialization method it take your adapter and the duration of waiting between each slide and lifecycle to make slider lifecylce-aware
`startAutoCycle()`	by default the value of autocycle is true, it determine to start autocycling or not
`stopAutoCycle()`	it stops the auto cycling of the view
`moveNextPosition()`	if you are the auto cylce is off you can manually move next with this method
`movePrevPosition()`	if you are the auto cylce is off you can manually move to the previus item with this method
`setIndicatorPosition(IndicatorPosition presetIndicator)`	to set the position of the indicator where values are `CENTER_BOTTOM` `RIGHT_BOTTOM` `LEFT_BOTTOM` `CENTER_TOP` `RIGHT_TOP` `LEFT_TOP`
`setCustomIndicator(PlutoIndicator indicator)`	if you want to custom the indicator use this method for custom indicators check Custom indicators

Event Listeners

for item click listener its the responsibility of the `PlutoAdapter` to handle it,

Example

Kotlin

        val adapter = SliderAdapter(getAvenger(), object : OnItemClickListener<Movie> {
            override fun onItemClicked(item: Movie?, position: Int) {
                //handle click
            }

        })
	//or
        adapter.setOnItemClickListener(object : OnItemClickListener<Movie> {
            override fun onItemClicked(item: Movie?, position: Int) {
                //handle click 
            }
        })

Java

        SliderAdapter adapter = new SliderAdapter(getAvengers(), (item, position) -> {
            //handle clickhere
        });
        //or
        adapter.setOnItemClickListener((item, position) -> {
            //handle click here
        });

you can attach listener to the `PlutoView` to listen for sliding event

Example

Kotlin

        pluto.setOnSlideChangeListener(object : OnSlideChangeListener {
            override fun onSlideChange(adapter: PlutoAdapter<*, *>, position: Int) {

            }
        })

Java

       pluto.setOnSlideChangeListener(new OnSlideChangeListener() {
            @Override
            public void onSlideChange(PlutoAdapter adapter, int position) {
                
            }
        });

Custom indicator

Add the following xml to your layout:

<com.opensooq.pluto.PlutoIndicator
		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

    <com.opensooq.pluto.PlutoIndicator
        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"
        />

    <com.opensooq.pluto.PlutoIndicator
        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"
        />

    <com.opensooq.pluto.PlutoIndicator
        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"
        />

    <com.opensooq.pluto.PlutoIndicator
        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.opensooq.pluto.PlutoIndicator
        android:id="@+id/custom_indicator"
        style="@style/Pluto_Magnifier_Oval_Black"
        />

Preset-2:

    <com.opensooq.pluto.PlutoIndicator
        android:id="@+id/custom_indicator"
        style="@style/Pluto_Attractive_Rect_Blue"
        />

Preset-3:

    <com.opensooq.pluto.PlutoIndicator
        android:id="@+id/custom_indicator"
        style="@style/Pluto_Corner_Oval_Orange"
        />

Using the View

Bind it with a PlutoView instance.

pluto.setCustomIndicator(findViewById(R.id.custom_indicator));

License

Copyright 2019 OpenSooq

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

thanhnh1806/Pluto

Pluto [Android Slider View Library]

Pluto is an Easy, lightweight and high performance slider view library for Android! You can customize it to any view since it based RecyclerView. The differnce of this library, we are not following the concept of images model. Pluto is not depending on any Image loading library

Demo

Table of content

Download

Sample Project

Usage

First create your own adapter extending the PlutoAdapter

Kotlin

Java

Then in your xml

finaly attach the adapter to Pluto

Kotlin

Java

Event Listeners

for item click listener its the responsibility of the PlutoAdapter to handle it,

Example

Kotlin

Java

you can attach listener to the PlutoView to listen for sliding event

Example

Kotlin

Java

Custom indicator

Customizable Properties

Examples

Preset Styles

Using the View

License

First create your own adapter extending the `PlutoAdapter`

for item click listener its the responsibility of the `PlutoAdapter` to handle it,

you can attach listener to the `PlutoView` to listen for sliding event