• Stars
    star
    463
  • Rank 94,661 (Top 2 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created almost 3 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Jetpack Compose library for animating a flip transition between the front and back of something, such as a card.

💳 Flippable

A Jetpack Compose utility library to create flipping Composable views with 2 sides.


Built with ❤︎ by Wajahat Karim and contributors


Demo

FlippableDemo.mp4


💻 Installation

In build.gradle of app module, include this dependency

implementation "com.wajahatkarim:flippable:x.y.z"

Please replace x, y and z with the latest version numbers .

Or you can find latest version and changelogs in the releases.


Usage

Add the Flippable composable and define the front and back side composable methods inside. That's it.

Flippable(
    frontSide = {
        // Composable content for the front side
    },

    backSide = {
        // Composable content for the back side
    },

    flipController = rememberFlipController(),

    // Other optional parameters
)

The FlippableController allows you to programatically flip the view from any event or button click or any method call etc. There's a method rememberFlipController() to get an instance of FlippableController. If you want to use any key for the remember, you can do so by directly creating FlippableController yourself like the code below:

val flipController = remember { FlippableController() }

val flipController1 = remember(key = "2") { FlippableController() }

🎨 Customization Parameters

If you'd like to discover what Flippable offers, here is an exhaustive description of customizable parameters.

    
val controller = rememberFlipController()
    
Flippable(
    frontSide = {
        // Composable content for the front side
    },
    
    backSide = {
        // Composable content for the back side
    },
    
    // To manually controll the flipping, you would need an instance of FlippableController. 
    // You can access it using rememberFlipController() method.
    // This provides methods like controller.flip(), controller.flipToFront(), controller.flipToBack() etc.
    flipController = controller,
    
    // The obvious one - if you have done Jetpack Compose before.
    modifier = Modifier,
    
    // The duration it takes for the flip transition in Milliseconds. Default is 400
    flipDurationMs = 400,
    
    // If true, this will flip the view when touched. 
    // If you want to programatically flip the view without touching, use FlippableController.
    flipOnTouch = flipOnTouchEnabled,
    
    // If false, flipping will be disabled completely. 
    // The flipping will not be triggered with either touch or with controller methods.
    flipEnabled = flipEnabled,
    
    // The Flippable is contained in a Box, so this tells
    // the alignment to organize both Front and Back side composable.
    contentAlignment = Alignment.TopCenter,
    
    //If true, the Flippable will automatically flip back after 
    //duration defined in autoFlipDurationMs. By default, this is false..
    autoFlip = false,
    
    //The duration in Milliseconds after which auto-flip back animation will start. Default is 1 second.
    autoFlipDurationMs = 1000,
    
    // The animation type of flipping effect. Currently there are 4 animations. 
    // Horizontal Clockwise and Anti-Clockwise, Vertical Clockwise and Anti-Clockwise
    // See animation types section below.
    flipAnimationType = FlipAnimationType.HORIZONTAL_CLOCKWISE,
    
    // The [GraphicsLayerScope.cameraDistance] for the flip animation. 
    // Sets the distance along the Z axis (orthogonal to the X/Y plane
    // on which layers are drawn) from the camera to this layer.
    cameraDistance = 30.0F,
    
    // The listener which is triggered when flipping animation is finished.
    onFlippedListener = { currentSide ->
        // This is called when any flip animation is finished. 
        // This gives the current side which is visible now in Flippable.
    }
)

I encourage you to play around with the sample app to get a better look and feel. It showcases advanced usage with customized parameters.


📄 API Documentation

Visit the API documentation of this library to get more information in detail.


⚙️ Animation Types

Horizontal Clockwise

Kapture 2022-02-15 at 23 20 11

Horizontal Anti-Clockwise

Kapture 2022-02-15 at 23 24 05

Vertical Clockwise

Kapture 2022-02-15 at 23 26 00

Vertical Anti-Clockwise

Kapture 2022-02-15 at 23 26 33


👨 Developed By

Wajahat Karim

Twitter Web Medium Linkedin


👍 How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

📃 License

Copyright 2022 Wajahat Karim

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.

More Repositories

1

EasyFlipView

💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.
Java
1,356
star
2

EasyFlipViewPager

📖 The library for creating book and card flip animations in ViewPager in Android
Java
810
star
3

MediumClap-Android

👏 The Medium's Clapping Effect developed in Android
Kotlin
502
star
4

EasyValidation

✔️ A text and input validation library in Kotlin for Android
Kotlin
397
star
5

Imagine

An simple image gallery app utilizing Unsplash API to showcase modern Android development architecture (MVVM + Kotlin + Retrofit2 + Hilt + Coroutines + Kotlin Flow + mockK + Espresso + Junit)
Kotlin
361
star
6

Today-I-Learned

📝 Today I Learned - A list of all things I learn on daily basis.
353
star
7

DinoCompose

Chrome's Dino T-Rex game developed in Jetpack Compose
Kotlin
268
star
8

RoomExplorer

🔎 A quick and easy in-app database viewer and manager library for your Room databases.
Java
225
star
9

LongImageCamera

📷 A camera view to capture long image merged from small captured images as it is in Shoparoo app available on Google Play!!
Java
115
star
10

EasyMoney-Widgets

The widgets (EditText and TextView) for support of money requirements like currency, number formatting, comma formatting etc.
Java
93
star
11

hugo-on-fire

🔥 A Github Action to build a Hugo site and deploy it on Firebase Hosting.
Dockerfile
61
star
12

FeedbackAnimSample

An attempt to code feedback animation UI inspired from https://site.uplabs.com/posts/web-feedback
Java
57
star
13

Hacktoberfest2019

A repository to contribute to Hacktoberfest 2019
55
star
14

SideMirror

An Android Studio plugin to mirror your android devices with scrcpy directly from Android Studio.
Java
54
star
15

BottomNavArchDemo

The demo project for Bottom Navigation with Navigation Architecture Components article
Kotlin
53
star
16

OCR-Test

An experiment about OCR in Android
Java
47
star
17

ComposeAnimationsDemo

Demo codes for droidcon EMEA 2020 talk about Jetpack Compose and Animations
Kotlin
39
star
18

SplashScreen

A demo project showcasing different methods to create splash screen in Android and discusses the details in the companion Medium article.
Kotlin
39
star
19

ActivityResultsDemo

A demo project to experiment with new Activity Results API in Android
Kotlin
37
star
20

Hacktoberfest2020

An example repository to learn how to contribute to open source for Hacktoberfest 2020
34
star
21

Android-Github-Actions

A sample app with multiple Github Actions for Android CI/CD
Kotlin
32
star
22

ComposeCodelab

An implementation of Compose Codelab and creation of Gmail App UI in Jetpack Compose live coding at 360Andev Conference
Kotlin
26
star
23

DBFlowManager

A quick and easy database manager plugin library for your DBFlow databases.
Java
26
star
24

Petnician

A pet adaption app for #AndroidDevChallenge week 1 made in Jetpack Compose
Kotlin
24
star
25

User-Online-Demo-Firestore

Managing users' presence like users' online and offline status using Firestore and Cloud Functions. Read more at: https://android.jlelse.eu/fmanaging-user-presence-with-firestore-in-android-a1146bdf101d
Kotlin
19
star
26

Movies-App

Kotlin
18
star
27

LottieWorld

A Lottie animations marketplace powered by LottieFiles
Kotlin
18
star
28

SoapRetrofitDemo

A simple demonstration of using SOAP services with Retrofit
Kotlin
14
star
29

ChessGameCPP

A chess game in C++ with multiplayer using console graphics.
C++
13
star
30

MVVM-GDG-Live

A demo app for live coding session hosted by GDG Live, Pakistan
Kotlin
11
star
31

BottomNavigationWithActivities

A example project of using BottomNavigation with Activities rather than Fragments.
Java
11
star
32

Quizca-UI-Concept

An attempt to code Quzica UI concept inspired from https://material.uplabs.com/posts/quzica-question-answer-ui-concept
Java
10
star
33

StackLayoutManager

A RecyclerView Layout Manager to scroll items with stacking
Kotlin
10
star
34

ZocDoc-Clone

A simple UI clone of ZocDoc app
Java
10
star
35

letime

A clock timer app for #AndroidDevChallenge week 2 made in Jetpack Compose
Kotlin
8
star
36

android-ci-cd

A Covid-19 pandemic worldwide stats tracker Android app
Kotlin
8
star
37

ToDoMvvm

Kotlin
5
star
38

ComposePlayground

A playground to learn the Jetpack Compose in Android Kotlin
Kotlin
5
star
39

LinksOfHugo

A code generator app to embed links in Hugo sites in cards like in Medium
Kotlin
5
star
40

DBFlowManager-Hyperion-Plugin

The Hyperion plugin of DBFlowManager for viewing DBFlow databases in the app.
Java
5
star
41

education_flutter

An Education demo app for Flutter Study Jam
Dart
4
star
42

ComposeBooksDemo

A repository for the talk to create a UI in Jetpack Compose
Kotlin
4
star
43

Snake-Game-With-AI

A snake game in C++ with multiplayer and computer AI snake using console graphics.
C++
4
star
44

MoviesApp

A simple movies app created using MVP, Kotlin, Data Binding, Dagger, Retrofit.
Kotlin
3
star
45

GeminiVertexDemo

Gemini Pro API Demo project in Android and Jetpack Compose
Kotlin
3
star
46

LottieLoading

An Android library for creating Loading dialogs/bars with Lottie animations
Kotlin
2
star
47

TipCalculator-MVVM-Example

An example created from learning the course
Kotlin
2
star
48

JCenter-Gradle-Scripts

Gradle Scripts for uploading AAR/JARs on jCenter from Android Studio
2
star
49

RoundedBottomDialog

A rounded BottomSheetDialog like as in Google Tasks and Google News app
Java
2
star
50

wajahatkarim3

2
star
51

CardsInMotion

A MotionLayout and motion editor example in Android
Kotlin
2
star
52

BottomNavigationArchitecture

An example to create bottom navigation with Navigation Architecture components
Kotlin
2
star
53

CircleProgressDrawable

An exprimental repository to learn about jcenter and bintray!
Java
2
star
54

netlify-url-shortener2

2
star
55

MVVM-Demo

An example app to learn MVVM with arch components
Kotlin
2
star
56

WhatsApp-FlutterDemo

A demo app to explore flutter by creating a clone of WhatsApp android UI.
Dart
2
star
57

HelloGitBasics

Some basics exporing for Github
1
star
58

Coroutines-DevFestKHI

A demo project for codelab at DevFest Karachi
1
star
59

GithubActions-Hugo-Test

An experiment to test Hugo site with Github Actions
HCL
1
star
60

HugoLinkify

Craft stunning link previews effortlessly with HugoLinkify, the ultimate Hugo-inspired link card generator for web developers.
Kotlin
1
star
61

EasyFirebase

An easy to use wrapper around Firebase APIs using Kotlin and DSL features
Kotlin
1
star
62

Hugo-On-Fire-Demo

💻 A demo example site made in Hugo for the purpose of showing how Hugo-On-Fire Github Action works
HTML
1
star
63

Huginary

An Android app to upload images on Cloudinary and add in your Hugo sites
Kotlin
1
star