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

Overview

πŸ’³ 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
)

🎨 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.
You might also like...
A CLI utility to convert Jetpack Compose compiler metrics and reports to beautified 😍 HTML page
A CLI utility to convert Jetpack Compose compiler metrics and reports to beautified 😍 HTML page

Compose Compiler Reports to HTML Generator A CLI utility to convert Jetpack Compose compiler metrics and reports to beautified 😍 HTML page. Made with

πŸš€πŸžπŸ’ͺ Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area

Collection of Images, Modifiers, utility functions for Jetpack Compose to expand and enrich displaying, manipulating, scaling, resizing, zooming, and getting cropped ImageBitmap based on selection area, before/after image to with handle to show partial of both images and more is cooking up

Utility for monitoring Genshin Impact in-game status, built with Jetpack Compose, Accompanist, and more
Utility for monitoring Genshin Impact in-game status, built with Jetpack Compose, Accompanist, and more

yumetsuki An utility app for monitoring in-game status on Genshin Impact like resin status, realm currency, expedition, daily commission status, etc.

Simple composable for rendering transitions between backstacks.
Simple composable for rendering transitions between backstacks.

compose-backstack Simple library for Jetpack Compose for rendering backstacks of screens and animated transitions when the stack changes. It is not a

Boat - A scoped and composable way to navigate

Boat Boat is an implementation of a scoped, simple and composable way to navigat

Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.
Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.

Pinocchio Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI. All UI

GlassmorphicColumn @Composable
GlassmorphicColumn @Composable

glassmorphic-composables GlassmorphicColumn @Composable GlassmorphicRow @Composable With Non-Image background Setup Gradle: allprojects { reposito

Create Bottom Navigation Bar with Jetpack Compose
Create Bottom Navigation Bar with Jetpack Compose

BottomNavigationBarComposeExample Create Bottom Navigation Bar with Jetpack Compose https://johncodeos.com/how-to-create-bottom-navigation-bar-with-je

Create stories with Jetpack Compose
Create stories with Jetpack Compose

Stories Create stories with Jetpack Compose! Adding stories are fun especially when your app deals with images. Now with Jetpack Compose you can easil

Comments
  • chore: remove println call when flipping state changed

    chore: remove println call when flipping state changed

    I propose to remove this line:

    println("Flip Controller $it")

    This is some debug information that might not be interesting to keep in production.

    opened by molpoo 1
  • Remove internal from FlippableController

    Remove internal from FlippableController

    Currently, device rotation restores the FlippableState to INITIALIZE. In order to persist state across device rotation I would like to host the FlippableController in the view model so that I can manager it there.

    Alternatively, it would be nice to be able to implement my own remember where I'm able to provide a key so that I can update the FlippableController when the key changes.

    opened by stevetripp 1
  • fix: onFlippedListener not called when flipOnTouch is set to false

    fix: onFlippedListener not called when flipOnTouch is set to false

    Issue

    The onFlippedListener is not called when the flipOnTouch attribute is set to false because the prevViewState is always equals to INITIALIZED. This condition cannot be fullfilled:

    Capture d’écran 2022-09-27 aΜ€ 13 40 32

    Solution proposed

    Set the prevViewState, this will then make the previous condition true and the listener will be called.

    opened by molpoo 0
Releases(1.0.6)
  • 1.0.6(Sep 27, 2022)

  • 1.0.5(Aug 26, 2022)

    • Reduced minSdk to 21.
    • Removed internal from FlipController to allow custom remember() with keys etc. Thanks to #1 by @stevetripp
    • Removed unused dependencies from Flippable library
    • Published 1.0.5 on Maven Central
    Source code(tar.gz)
    Source code(zip)
  • 1.0.4(Feb 15, 2022)

    🌟 Features

    • Flip view animations implementation
    • Customizable parameters like duration, animation types, auto-flip functionality etc.
    • The FlippableController to programmatically flip the view
    • The onFlippedListener to trigger the callback when flip animation is finished.
    • Four animation types for flipping effect.
    Source code(tar.gz)
    Source code(zip)
Owner
Wajahat Karim
πŸ§‘πŸ½β€πŸ’» Lead Android @AirliftTech πŸ”₯ Google Dev Expert (GDE). πŸ“± Android DeveloperΒ . πŸ’» Open SourceΒ . πŸ“• Books x2 Author πŸ“ Blogger 🎀 Public Speaker
Wajahat Karim
Sample app that shows how to create a bitmap from a Jetpack composable

Creating Bitmaps From Jetpack Composables This app demonstrates how to create a bitmap from a Jetpack composable without the need to display the compo

Johann Blake 14 Nov 29, 2022
A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Roman Levinzon 59 Oct 19, 2022
Kapture - A small library for Jetpack Compose to capture Composable content to Android Bitmap

kapture A small utility library for Jetpack Compose to capture Composable conten

Kaustubh Patange 10 Dec 9, 2022
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat BorrΓ‘s Paronella 178 Jan 4, 2023
Jetpack Compose Text composable to show html text from resources

HtmlText Current Compose Version: 1.0.3 Compose HtmlText Text composable to show html text from resources Add to your project Add actual HtmlText libr

Alexander Karkossa 57 Dec 23, 2022
This is a simple video games discovery app showcasing UI using Jetpack Compose with Clean Architecture and also tests for composable UI.

Jetpack-Compose-Video-Games-Example ?? This is a simple video games discovery app showcasing UI using Jetpack Compose and also tests for composable UI

Ruben Quadros 60 Dec 27, 2022
Mocking with Jetpack Compose - stubbing and verification of Composable functions

Mockposable A companion to mocking libraries that enables stubbing and verification of functions annotated with @androidx.compose.runtime.Composable.

Jesper Γ…man 21 Nov 15, 2022
Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Holi A library of colors, gradients and utils built using Jetpack Compose for Android Features A wide collection of colors from different palettes for

Siddhesh Patil 167 Dec 5, 2022
Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Holi is a lightweight Jetpack Compose library of colors, gradients and cool utility functions for all your palette needs!

Sid Patil 167 Dec 5, 2022
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022