Made in Compose: Airbnb Month Picker Dial
How to create a gorgeous Dial in Jetpack Compose
sinasamaki
Compose delightful Android apps
Latest posts
How to create custom Dials
ChromaDial is super customizable and delightful
How to create Dials in Jetpack Compose
Introducing ChromaDial, a library for building delightful dials
Create animated stripes in Jetpack Compose
Use default gradients to create mesmerizing patterns in your app
Creating a CRT Screen Effect in Jetpack Compose
Using graphics layer, gradients and blur to create this nostalgic effect
Glitch Effect in Jetpack Compose
Easily apply sci-fi, cyberpunk effects on to your app
New Shadow API for Jetpack Compose
How to build realistic UI with the latest shadow API
Animating Text along a Path in Jetpack Compose
How to position and rotate blocks of text on any path
Wrapping a Fancy Ribbon around any Composable
How to animate a ribbon that wraps around UI elements in Jetpack Compose
Path animations in Jetpack Compose
How to define path objects and use them in animations.
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
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
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
Custom Sliders in Jetpack Compose
Create unique and delightful sliders for your app
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
Neumorphism in Jetpack Compose
Learn how to create a neumorphic UI style in Jetpack Compose
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
Spring animations in Jetpack Compose
Easily apply spring physics to your animations in Jetpack Compose
Custom Dialog Animation in Jetpack Compose
Create custom dialog animations using Jetpack Compose animation composables such as AnimatedVisibility
Add Shake Animations to your Composable
Make your Composables dance
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
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
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
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
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