Android ImageSliders and Carousels

0
User Management System
Learn Kotlin, Retrofit, MVVM and MySQL using this all-in-one app. It is designed to be beginner friendly.

In most of our applications we tend to need to display a series of images. Images make our applications look more modern and interactive and they are a great way to pass information visually. Sometimes you may even need to show your item lists horizontally. One way is to use a recyclerview with horizontal orientation. However in this case the items won't be auto-flipped or faded. You also won't have indicators  which the user can use to navigate to another image. You would need to implement a custom adapter that caters for all these and that costs time, which we are short of.

Thus we are curating some of the best libraries and examples already written by other developers and available for re-use. You could always customize them since they are all open source. Most of them are actually based on recyclerview and some do need a custom adapter. This gives them flexibility and power.

(a). Pluto

  • Pluto
  • Example

OpenSooq logo

Pluto [Android Slider View Library]

API

License Android Arsenal

:star: Star us on GitHub — it helps!

forthebadge

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

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.6'
}

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

Demo-1

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

Demo-2

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

Demo-3

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

Demo-4

    <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.
Pluto is an Easy, lightweight and high performance slider view library for Android. You have the flexibility to customize it to any view since it based RecyclerView.
No. Key Value
1. Created 2019-04-27T15:37:04Z
2. Updated 2021-02-03T17:54:28Z
3. Stars 88
5. Forks 14
6. Language Kotlin
7. Lib Author OpenSooq

This Library was written By: OpenSooq

SliderAdapter

Here is a custom adapter for the image slider:


import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView

import com.bumptech.glide.Glide
import com.opensooq.pluto.base.PlutoAdapter
import com.opensooq.pluto.base.PlutoViewHolder
import com.opensooq.pluto.listeners.OnItemClickListener

class SliderAdapter(items: MutableList, onItemClickListener: OnItemClickListener) : PlutoAdapter<Movie, SliderAdapter.ViewHolder>(items, onItemClickListener) {

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

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

        override fun set(item: Movie, position: Int) {
            Glide.with(context).load(item.posterId).into(ivPoster)
            tvRating.text = item.imdbRating
        }
    }
}

MainActivity.

The main activity:

package com.opensooq.plutodemo

import android.content.Intent
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.util.Log
import android.widget.LinearLayout

import com.opensooq.pluto.PlutoView
import com.opensooq.pluto.base.PlutoAdapter
import com.opensooq.pluto.listeners.OnItemClickListener
import com.opensooq.pluto.listeners.OnSlideChangeListener

const val TAG = "MainActivity"

class MainActivity : AppCompatActivity() {

    private fun getAvenger(): MutableList {
        val items = mutableListOf()
        items.add(Movie("7.1", R.drawable.ic_captain_marvel))
        items.add(Movie("9.2", R.drawable.ic_end_game))
        items.add(Movie("7.5", R.drawable.ic_dr_strange))
        items.add(Movie("7.9", R.drawable.ic_iron_man))
        return items
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val pluto = findViewById(R.id.slider_view)
        val adapter = SliderAdapter(getAvenger(), object : OnItemClickListener {
            override fun onItemClicked(item: Movie?, position: Int) {
                Log.d(TAG, "on Item clicked $position ${item?.imdbRating}")
            }
        })

        pluto.create(adapter, lifecycle = lifecycle)
        pluto.setOnSlideChangeListener(object : OnSlideChangeListener {
            override fun onSlideChange(adapter: PlutoAdapter<*, *>, position: Int) {
                Log.d(TAG, "on slide change $position ")

            }
        })

        val button = findViewById(R.id.indicator_example)
        button.setOnClickListener {
            startActivity(Intent(this, CustomIndicatorActivity::class.java))
        }

    }
}

Find source code here.

Android MySQL Retrofit2 Multipart CRUD,Search,Pagination rating

When I was a 2nd year Software Engineering student, I buillt a now defunct online tool called Camposha(from Campus Share) using my then favorite language C#(ASP.NET) to compete OLX in my country(Kenya). The idea was to target campus students in Kenya. I got a few hundred signups but competing OLX proved too daunting. I decided to focus on my studies, learning other languages like Java,Python,Kotlin etc while meanwhile publishing tutorials at my YouTube Channel ProgrammingWizards TV which led to this site(camposha.info). Say hello or post me a suggestion: oclemmi@gmail.com . Follow me below; Github , and on my channel: ProgrammingWizards TV

We will be happy to hear your thoughts

Leave a reply

seventeen − = seven

Reset Password
Compare items
  • Total (0)
Compare
0
Shopping cart