CircularCardsStackView is an Android library for dealing with swipeable card views.

MindInventory

Last update: Sep 9, 2022

Overview

CircularCardsStackView

Overview

Features

Android 11 support
Easy setup
Endless card stack
Swipe horizontally with animation
Fully customized
Support to all resolutions with portrait orientation

Usage

Dependencies

Step 1: Add the JitPack repository in your project build.gradle file

allprojects {
	    repositories {
		    ...
		    maven { url 'https://jitpack.io' }
	    }
    }

Step 2: Add the dependency in your app module build.gradle file

dependencies {
		    ...
	        implementation 'com.github.Mindinventory:CircularCardsStackView:0.0.2'
	}

Implementation

Step 1: Add CardCircularStackView in your xml and customize attributes

<com.mindinventory.circularcardsstackview.ui.CircularCardsStackView
       android:id="@+id/cardStack"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       app:actionOptionsVisibility="true"
       app:childViewHeight="@dimen/_250sdp"
       app:primaryTextColor="@android:color/white"
       app:primaryTextFontFamily="@font/roboto_bold"
       app:primaryTextSize="@dimen/_16ssp"
       app:profileViewBackgroundColor="#80000000"
       app:secondaryTextColor="@android:color/white"
       app:secondaryTextFontFamily="@font/roboto_medium"
       app:secondaryTextSize="@dimen/_14ssp"
       app:stackCardBackgroundColor="@color/white"
       app:stackCardChildPadding="@dimen/_15sdp"
       app:stackCardCornerRadius="@dimen/_20sdp"
       app:stackCardStrokeColor="@color/white"
       app:stackCardStrokeWidth="@dimen/_2sdp"  />

Step 2: Provide card list and implement pageChangeListener

cardStack.setUpCardStack(ArrayList(), object:OnPageChangeListener{
            override fun onPageScrolled(position: Int) {
                
            }

            override fun onPageSelected(position: Int) {
                
            }

            override fun onPageScrollStateChanged(state: Int) {
                
            }
        })

Step 3: Customize card action option's icon and implement action listener

cardStack.setActionOptions(
            firstButtonResourceId = R.drawable.ic_message,
            secondButtonResourceId = R.drawable.ic_heart,
            object : CardActionListener {
                override fun onFirstButtonOptionClick(position: Int) {

                }

                override fun onSecondButtonOptionClick(position: Int) {

                }

            }
        )

Appearance

Attribute	Description	Default
stackCardBackgroundColor	The background color of the card	white
stackCardChildPadding	The padding of the card's child view	_15sdp
stackCardCornerRadius	The corner radius of the card	_30sdp
stackCardStrokeColor	The stroke color of the card	white
stackCardStrokeWidth	The stroke width of the card	_2sdp
profileViewBackgroundColor	The background color of profile view	#80000000
childViewHeight	The height of the child view of the card	_250sdp
actionOptionsVisibility	Manage the visibility of the actions of the card	true
primaryTextColor	The text color of the primary text of the profile view	white
secondaryTextColor	The text color of the secondary text of the profile view	white
primaryTextFontFamily	The FontFamily of the primary text of the profile view	roboto_bold
secondaryTextFontFamily	The FontFamily of the secondary text of the profile view	roboto_medium
primaryTextSize	The text size of the primary text of the profile view	_16ssp
secondaryTextSize	The text size of the secondary text of the profile view	_14ssp

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

Library version
Code snippet
Logs if applicable
Device specification like (Manufacturer, OS version, etc)
Screenshot/video with steps to reproduce the issue

Requirements

minSdkVersion >= 21
Androidx

Library used

LICENSE!

CircularCardsStackView is MIT-licensed.

Let us know!

If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.

You might also like...

💳 Bank Card View is a simple and elegant card view with Flip animation.

Visualização de cartão bancário 💳 Bank Card View é uma visualização de cartão simples e elegante com animação Flip. Versões Selecione a língua : Engl

10 Dec 12, 2022

💳 Bank Card View is a simple and elegant card view with Flip animation.

Visualização de cartão bancário 💳 Bank Card View é uma visualização de cartão simples e elegante com animação Flip. Versões Selecione a língua : Engl

9 Aug 26, 2022

Dealing with Android Text by simple way to get high performance.

Gapo Android RichText RichText supports Hashtag, Mention, Url, Phone Number, Email, Markdown, Custom Span, SeeMore/SeeLess by limited line or length,

8 Oct 20, 2021

Dealing with Android Text by simple way to get high performance.

Gapo Android RichText RichText supports Hashtag, Mention, Url, Phone Number, Email, Markdown, Custom Span, SeeMore/SeeLess by limited line or length,

8 Oct 20, 2021

Android Swipeable button like in iOS unlock screen. Made by Stfalcon

swipeable-button Who we are Need iOS and Android apps, MVP development or prototyping? Contact us via [email protected]. We develop software since 200

86 Nov 29, 2022

A simple, customizable and easy to use swipeable view stack for Android.

SwipeStack A simple, customizable and easy to use swipeable view stack for Android. QuickStart Include the Gradle dependency dependencies { compil

1.5k Dec 30, 2022

A swipeable - auto resizing view group for android

SwipeableLayout A swipeable - auto resizing view group for android Usage build.gradle compile 'com.wmbest.widget:swipeable-layout:1.0.+@aar' -- or --

114 Nov 25, 2022

An Online Meme Sharing app with swipeable vidoes, user can like, share different videos, each viewpager item has one video to show.

MemesSharing An Online Meme Sharing app with swipeable vidoes, user can like, share different videos, each viewpager item has one video to show. 1. Fl

13 Aug 6, 2022

🔥 Yet another Tinder like swipeable cards, built for Jetpack Compose

twyper Yet another Tinder like swipeable card library, built for Jetpack Compose ✨ Demo Screen.Recording.2022-02-20.at.10.46.59.PM.mov ⌨️ Usage 1. Add

88 Dec 24, 2022

This library provides advance views for lists and stacks. Some of the views are build on top of RecyclerView and others are written in their own. Annotations are compiled by annotation processor to generate bind classes. DOCS --

PlaceHolderView An advance view for lists and stacks Some Implementations Documentation You can find the PlaceHolderView documentation here which has

2.1k Jan 1, 2023

SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

SquircleView SquircleView is a library which provides you with Squircle views to use for buttons, views, etc. Screenshots Different kinds of buttons,

96 Dec 15, 2022

SquircleView is a library which provides you with Squircle views to use for buttons, views, etc.

96 Dec 15, 2022

A custom recycler view with shimmer views to indicate that views are loading.

ShimmerRecyclerView Intro A custom recycler view with shimmer views to indicate that views are loading. The recycler view has a built-in adapter to co

3.8k Dec 31, 2022

This library provides GridAdapters(ListGridAdapter & CursorGridAdapter) which enable you to bind your data in grid card fashion within android.widget.ListView, Also provides many other features related to GridListView.

GridListViewAdapters This libarary enables you to implement GridView like card layout within ListView with added capabilites like Paginations, Additio