π³
Flippable
A Jetpack Compose utility library to create flipping Composable views with 2 sides.
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
Horizontal Anti-Clockwise
Vertical Clockwise
Vertical Anti-Clockwise
π¨
Developed By
Wajahat Karim
π
How to Contribute
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- 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.