Coder Social home page Coder Social logo

virendersran01 / cardslider Goto Github PK

View Code? Open in Web Editor NEW

This project forked from islamkhsh/cardslider

0.0 0.0 0.0 10.86 MB

Card Slider is an android component allows you to implement carousel effect with infinite indicators and more features

License: Apache License 2.0

Kotlin 23.18% Java 76.82%

cardslider's Introduction

Card Slider License Android Arsenal Jitpack.io

This is an Android library that implemnts carousel effect with many features and attrs to get exactly what you need.

preview

Demo App

Android app on Google Play

Card Slider components

  1. CardSliderViewPager: Custom ViewPager2 and uses a page transformer to apply carousel effect as shown in GIF.
    • As ViewPager2 is still a final class follow this issue, I added it as part of my package.
  2. CardSliderIndicator: Custom LinearLayout that that contain indicators as children views.
  3. CardSliderAdapter: Abstract class that must be extended and passed to CardSliderViewPager as its adapter.

Features

1- Show preview of pages in left and right (or top and bottom).

2- Can resize (scale) and change opacity of the pages to make focused page larger and more focused in height as shown in GIF (carousel effect).

3- Can make pages auto swiped after specific time.

4- Add indicator and full customize it easily.

5- Infinite indicators like those in the Instagram app.

6- RTL Support.

7- Support vertical orientation.

Add to project

  1. Add it in your root build.gradle at the end of repositories:
allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
  1. Add the dependency:
implementation 'com.github.IslamKhSh:CardSlider:{latest_version}'

Find the latest version here

Usage

  1. Add it to your layout:
 <com.github.islamkhsh.CardSliderViewPager
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:id="@+id/viewPager"
           android:layout_marginTop="24dp"
           app:cardSlider_smallScaleFactor="0.9" //scale factor of height of pages in left and right (1 if no resizing nedded)
           app:cardSlider_otherPagesWidth="24dp" // width of displayed parts of left and right pages
           app:cardSlider_pageMargin="12dp" // margin between pages
   	   app:auto_slide_time="3"/>  // auto sliding time in seconds
  1. Create your item (page) layout.

  2. Extend CardSliderAdapter

class MovieAdapter(private val movies : ArrayList<Movie>) : CardSliderAdapter<MovieAdapter.MovieViewHolder>() {

    override fun getItemCount() = movies.size

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
        return MovieViewHolder(view)
    }
    
    override fun bindVH(holder: MovieViewHolder, position: Int) {
      //TODO bind item object with item layout view
    }

    class MovieViewHolder(view: View) : RecyclerView.ViewHolder(view)
}

or using Java

public class MovieAdapter extends CardSliderAdapter<MovieAdapter.MovieViewHolder> {
    
    private ArrayList<Movie> movies;
    
    public MovieAdapter(ArrayList<Movie> movies){
        this.movies = movies;
    }
    
    @Override
    public int getItemCount(){
    	return movies.getSize();
    }
    
     @Override
    public MovieViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent, false);
	return new MovieViewHolder(view);
    }
    
    @Override
    public void bindVH(int position, MovieViewHolder holder) {
      //TODO bind item object with item layout view
    }
    
    class MovieViewHolder extends RecyclerView.ViewHolder {
    	
	public MovieViewHolder(View view){
	      super(view);
	}
    }
}
  1. Add adapter to CardSliderViewPager
  val movies = ArrayList<Movie>().apply{
  // add items to arraylist
  }
  
  findViewById<CardSliderViewPager>(R.id.viewPager).adapter = MoviesAdapter(movies)

or using Java

  ArrayList<Movie> movies = new ArrayList<Movie>();
    // add items to arraylist
  
  CardSliderViewPager cardSliderViewPager = (CardSliderViewPager) findViewById(R.id.viewPager);
  cardSliderViewPager.setAdapter(new MoviesAdapter(movies));

5- To add indicator add it to your layout

 <com.github.islamkhsh.CardSliderIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/indicator"
	    app:indicatorsToShow="5" />

And then bind it with your CardSliderViewPager

  <com.github.islamkhsh.CardSliderViewPager
            ...
            app:cardSlider_indicator="@id/indicator"/>

Attributes List

1- CardSliderViewPager

Attribute Description Default value
cardSlider_smallScaleFactor The small scale of the next and previous pages. 1 (no resizing)
cardSlider_smallAlphaFactor The small opacity factor of the next and previous pages. 1 (no opacity)
cardSlider_baseShadow The CardView Elevation when selected. 2dp
cardSlider_minShadow The CardView Elevation of next and previous cards. baseShadow * smallScaleFactor
cardSlider_pageMargin The space between two pages. This must be large than baseShadow + minShadow or it will be override. baseShadow + minShadow
cardSlider_otherPagesWidth The width of displayed parts from next and previous cards . 0
cardSlider_indicator The id of CardSliderIndicator to work with this view pager. no indicator
auto_slide_time The time in seconds to auto sliding between pages in it no sliding (STOP_AUTO_SLIDING)

2- CardSliderIndicator

Attribute Description Default value
defaultIndicator The indicator drawable in case of not selected default_dot.xml
selectedIndicator The indicator drawable in case of selected. selected_dot.xml
indicatorMargin The space between indicators the minimum width of defaultIndicator and selectedIndicator
indicatorsToShow The number of indicators to show and others will be hidden like Instagram app -1 (CardSliderIndicator.UNLIMITED_INDICATORS)
  Copyright [2019] [IslamKhSh]

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.

cardslider's People

Contributors

islamkhsh avatar tarekkma avatar kosaanta avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.