sinasamaki

Wrapping a Fancy Ribbon around any Composable

How to animate a ribbon that wraps around UI elements in Jetpack Compose

Paid-members only

Rose Curve Loader

Code import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.animateFloat import androidx.compose.animation.core.infiniteRepeatable import androidx.compose.animation.core.rememberInfiniteTransition import androidx.compose.animation.core.tween import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.runtime.Composable import androidx.

Path animations in Jetpack Compose

How to define path objects and use them in animations.

Paid-members only

Metal Slider

Code import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.

Paid-members only

Vinyl Animation

Code import androidx.compose.animation.core.FastOutSlowInEasing import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.RepeatMode import androidx.compose.animation.core.animateFloat import androidx.compose.animation.core.infiniteRepeatable import androidx.compose.animation.core.rememberInfiniteTransition import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.

How I prototype with colors in Jetpack Compose

Don't waste time choosing colors in Jetpack Compose

Brushed Metal UI in Jetpack Compose

How to create this skeuomorphic metallic effect using gradients

Paid-members only

Metal Power Button

Code import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.spring import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.gestures.detectTapGestures import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.padding import androidx.compose.

Paid-members only

Mesh Gradient Button

Code import androidx.compose.animation.AnimatedContent import androidx.compose.animation.SizeTransform import androidx.compose.animation.animateContentSize import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.Spring import androidx.compose.animation.core.spring import androidx.compose.animation.core.tween import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut

Mesh Gradients in Jetpack Compose

Learn how to implement beautiful Mesh Gradients on Android

Animated Text Field Hint in Jetpack Compose

Build a playful text field hint animation

Paid-members only

Centered Seesaw Slider

Code Seesaw slider import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.spring import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import

Centered Slider in Jetpack Compose

Creating a glowy centered slider based on the material 3 slider

Implementing Overslide interaction in Jetpack Compose

How to add a stretchy animation on a slider

Paid-members only

Ring Slider

Code import androidx.compose.animation.core.Animatable import androidx.compose.animation.core.AnimationVector1D import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.spring import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.collectIsDraggedAsState import androidx.compose.foundation.layout.Box import

Paid-members only

Adaptive Label Slider

Custom Sliders in Jetpack Compose

Create unique and delightful sliders for your app

Paid-members only

Line Slider

Paid-members only

Neumorphic Slider

Paid-members only

Gradient Slider

Overscroll animations in Jetpack Compose

Add bouncy overscroll animations to all your scrolling elements

Page Flip animation in Jetpack Compose

Made in Compose: Flipboard page fold animation

5 Haptic Feedback Implementations To Enhance Your App

Adding vibrations in Jetpack Compose is super easy

Loading Animation on Android (in XML)

Build this fancy loading animation for your android app

Paid-members only

Gradient Playground

Neumorphism in Jetpack Compose

Learn how to create a neumorphic UI style in Jetpack Compose

Paid-members only

Neumorphic Switch

LED Seconds

Code import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.core.animateFloatAsState import androidx.compose.animation.core.spring import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.

Paid-members only

3D Button

Code @Composable private fun ThreeDButton( buttonColor: Color = Color(0xffd736ff), radius: Dp = 16.dp, content: @Composable RowScope.() -> Unit, ) { val interactionSource = remember { MutableInteractionSource() } val isHovered by interactionSource.collectIsHoveredAsState() var isClicked by remember { mutableStateOf(false) } val offset by animateIntAsState( targetValue = when { isClicked -> 10 isHovered -> 25 else -&

Paid-members only

Radar Loader

Glassmorphic Bottom Navigation in Jetpack Compose

Implement a frosty bottom bar using Haze library

Custom Pull to Refresh in Jetpack Compose

Create a colorful and animated pull to refresh indicator in Jetpack Compose

Following Arrows

Code:

Paid-members only

Spring animations in Jetpack Compose

Easily apply spring physics to your animations in Jetpack Compose

Paid-members only

Animated Blurred Counter

Paid-members only

Star Rating

Custom Dialog Animation in Jetpack Compose

Create custom dialog animations using Jetpack Compose animation composables such as AnimatedVisibility

Paid-members only

Loop Switch

Paid-members only

Rotating Circles Loader

Paid-members only

Log In Button

Add Shake Animations to your Composable

Make your Composables dance

Paid-members only

Like button

Paid-members only

Hold to confirm

Paid-members only

Flip Button

Paid-members only

Call Button

Paid-members only

Rotate Button

Paid-members only

State Button

Members only

Gradient Button

Members only

Glow Button

Members only

Stacked Button

Custom TabRow Indicator in Jetpack Compose

Build a custom TabRow Indicator that draws a curved path around the selected page.

Five Pager Indicator Animations

Learn how to animate a pager indicator along with five examples

Creating Pager Animations in Jetpack Compose

How to create 3 unique Pager animations.

Setting up ViewPager in Jetpack Compose

How to get started using a ViewPager in Jetpack Compose.

Animated Counter in Jetpack Compose

Create a realistic number counter animation in Jetpack Compose

5 Metaball Animations in Jetpack Compose

Stunning gooey animations created in Jetpack Compose

Made in Compose - Dynamic Island

Recreating the dynamic island animation from the new iPhone 14 Pro in Jetpack Compose.

Loading images using coil in Jetpack Compose

Ultimate guide to load network images in Jetpack Compose using coil library

Animating fonts in Jetpack Compose

Jetpack compose offers many different animation helper functions. We can easily animate floats, colors, density-pixels, etc. These helper functions are usually called like this: val animatedColor by animateColorAsState( targetValue = color, animationSpec = tween(durationMillis = 300, easing = LinearEasing) ) The animateColorAsState function returns a state object and we can simply listen to this

Made in Compose - Apple watch ultra water level animation

Welcome to the first post in my Made in Compose series where I attempt recreating UI and animations, in Jetpack Compose and share my process. In this first post, I will be recreating the water level animation in the new Apple Watch Ultra diving app. This was one of the

Extending SwipeToDismiss in Jetpack compose

This is a common UI pattern to perform quick actions on lists of items. In this article, we will go over how to build a rich, expressive swipe to dismiss example. Jetpack compose has a default composable that provides this functionality called SwipeToDismiss. This composable offers some customization but we

Custom Pull to Refresh in Jetpack compose

Deprecated -> Go to updated article https://www.sinasamaki.com/custom-pull-to-refresh-in-jetpack-compose-2/ Pull to refresh is a common design pattern that is used by the user to refresh a list of items. In jetpack compose, we can use the accompanist library to implement the default implementation in most material design

Automating beautiful Screenshots using Jetpack compose

Screenshots are the first impression of the user on our app. Therefore, to put our best foot forward, we need the best designed screenshots to be presented. But graphically designing screenshots is time-consuming. After coming up with a unique design, you still need to apply it to apply to all

7 Annoying things about Jetpack Compose

Jetpack compose is arguably one of the most exciting innovations in the world of Android development. It's been a breath of fresh air from the aging xml UI system and has brought numerous improvements. On top of that, the rate of its development is also staggering. It'

Exploring MovableContentOf in Jetpack Compose

Jetpack Compose recently introduced a new function named movableContentOfin version 1.2.0-alpha03. As the name suggests, this enables us to move around content without the need for recomposition. This could save time and increase performance if the recompositions are expensive and or numerous. Jetpack compose already has some quite

Theme picker animation in Jetpack Compose

Jetpack Compose revamps the old way we used to handle themes in Android. It offers a lot of flexibility, which gives us more possibilities in our definition of how our UI looks. At the same time, the animation system in compose empowers us to create more ambitious and pleasant UI

Bottom Navigation Animation in Jetpack Compose

Bottom navigation UI is used to navigate between different top level screens in apps. There is a composable available in the compose libraries, but it could be improved with some more animations. Using only the animation components provided in the jetpack compose libraries, we could implement a more custom bottom