💳 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

Horizontal Anti-Clockwise

Vertical Clockwise

Vertical Anti-Clockwise

👨 Developed By

Wajahat Karim

👍 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.