Flipping View

Why settle for boring, static screens in your app when you can add a dynamic and engaging visual experience with FlippingView?

It's time to give your app the wow-factor it deserves!

FlippingView library is built with the latest Jetpack Compose and Material Design 3 API technology, making it both cutting-edge and experimental. It's super easy to use, and our code is well-documented, so you'll be flipping cards like a pro in no time.

Made with love ❤️ by Pratik Fagadiya

flippingview.mp4

Including in your project

Add this to settings.gradle of project.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven { url 'https://jitpack.io' }  // Add jitpack.io
    }
}

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation 'com.github.PratikFagadiya:JetpackCompose-Flippingview:1.0'
}

How to use

You can create a FlippingView with the FlippingViewl composable.

@Composable
fun FlippingView(
    cardFace: CardFace,
    cardOrientation: CardOrientation = CardOrientation.HORIZONTAL,
    modifier: Modifier = Modifier,
    flippingDuration: Int = 2000,
    cardShadow: Int = 0,
    cornerSize: Dp = 0.dp,
    onViewClick: (CardFace) -> Unit,
    frontView: @Composable () -> Unit = {},
    backView: @Composable () -> Unit = {}
)

In it's simplest form FlippingView can be used as animated preview for front and back view.

var cardFace by remember { mutableStateOf(CardFace.Front) }

FlippingView(cardFace = cardFace, onViewClick = {
      cardFace = it.whatNext
  }, frontView = {
      // Front View
  }, backView = {
      // Back View
  }
)

Customization

var cardFace by remember {
    mutableStateOf(CardFace.Front)  // Initial Value Either  CardFace.Front or CardFace.Back
}

FlippingView(cardFace = cardFace,

    // Card flipping orientation default value is `HORIZONTAL` you can use `HORIZONTAL` or `VERTICAL`
    cardOrientation = CardOrientation.HORIZONTAL,

    // Customize modifier as per your requirement
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(1.655F),

    // Flipping duration in millisecond default value is 2s (2000)
    flippingDuration = 700,

    // Flip view on card click, You can perform your requirement as well
    onViewClick = {
        cardFace = it.whatNext
    },

    // Default card shadow value is 0, You can customize as per your need
    cardShadow = 5,

    // Card rounded corner radius for your card layout, default value is 0.dp
    cornerSize = 15.dp,

    // Card front view
    frontView = {

    },

    // Card back view
    backView = {

    }
)

Donate

If you found this library helpful or you learned something from the source code and want to thank me, consider buying me a cup of ☕

Find this library useful ? ❤️

• Support it by clicking the ⭐️ button on the upper right of this page and share with others. ✌️

  Also, follow me on github and twitter to stay updated with my creations! 🤩

Contribution 🤝

• If you would like to contribute you're most welcome! 💛 See Contributing Guidelines.

Connect with me

License 🔖

Apache 2.0 License


Copyright 2023 Pratik Fagadiya

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.