article

A collection of 34 posts

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

Paid-members only

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