In today’s story we will learn how to create a custom selector that lets users choose one option among several, with a background that animates to highlight the selected option. As usual, seeing an animation of what we want to achieve will make this clearer: Let’s list what we…

In today’s story we will learn how to enhance Jetpack Compose’s LazyColumn to display a sticky initial on the right side of the list. When we talk about sticky elements we usually think of sticky headers, a list item that sticks to the top of the list until a new…

In this short story we will learn how to create a custom progress indicator using the Layout composable and the animation tools provided by Jetpack Compose. The final result we are after is shown here: The basic component, the Dot We’ll start by defining a composable that represents our basic unit, the Dot. There are…

In today’s story we will learn how to conditionally navigate to a screen in Jetpack Compose. …

With the release of Jetpack Compose 1.2.0-alpha03 we have access to a much requested feature: animations in lazy lists when the collection of items is updated. In this short article we’ll learn how to use this feature. The sample project First we’ll create a simple sample project using LazyColumn without the items animation…

In anything but a trivial app we want to have the business logic of our screens separate from the UI (our Composable functions), and one way to do that is using the ViewModel classes available from the AndroidX libraries to host that business logic. …

In this tutorial we will implement a loading button, i.e., a button that replaces its content with a loading indicator to signify to the user that some operation is under way, and when that operation has completed, reverts to its original state. This GIF shows what we want to achieve: …

Introduction I’ve come across another interesting question in StackOverflow, the question asks how could we create a Grid composable that lets its children set individual column and row spans so that the composable fills the whole space allocated to it, and places its children given their column/row spans. …

Introduction In this short article we’ll learn how to create a Composable card that rotates (or flips) on its axis, to show content on its back. The final result we are looking for is shown in this animation: Defining our Composable signature We’ll start by defining our Composable signature. These are the parameters we want…