2024
A short article showing how to apply a container transform using the latest APIs from Jetpack Compose.
A short article showcasing how to create a Chips selector for single or multiple choice, with animated border, background and text.
A short article showcasing how to create a Chips selector for single or multiple choice, with animated border, background and text.
2023
Learn how to instruct the Jetpack Compose Compiler to treat certain classes as stable, improving the performance of your composable functions.
State management is one of the most important features of any app. Choosing the right architecture from the get go is important as architectural changes become very expensive once the app has been built. Thefore, making sure the architecture we choose is able to support the app and scale as the app evolves is crucial. This article buidls one such framework.
A short article showcasing how to use the new anchoredDraggable modifier released with Jetpack Compose Foundation 1.6.0-alpha01 .
Learn how to create a custom gradle plug-in that automates the build number for your apps on the CI/CD (Continuous Integration / Continuous Deployment), and how to update the GitHub workflows to leverage it.
Learn how to create a ticker board, reminiscent of the boards that used to adorn train stations and airports, and that can still be seen in some of those today.
Learn how to navigate between screens on a Jetpack Compose app using a solution different from the one suggested by Google in their documentation, while still using the Navigation library from the Android Architecture Components.
2022
Learn how to implement an animated drawer with a couple of different animation effects. We will implement a drawer that slides in from the left side, while the main content resizes and either moves to the right or slides behind the drawer.
In today’s article we will find out how to implement an Action Bar in Jetpack Compose that can be shared across different screens, while updating to show different content based on which screen is currently active.
An article showcasing how to implement a reusable composable which we can add to the top app bar in our app’s screens to show relevant menu items.
Learn how to create a fun circular carousel, a set of items that the user can spin around.
In this short article we will write a simple app that will showcase how to use the Activity Result Contracts in Jetpack Compose. Our app will have 2 buttons, one to pick an image from the gallery, and a second one to take a picture. In both cases, once the image is selected or the picture is taken, it will be displayed on the screen.
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.
In this short article we will learn how to create a custom progress indicator using the Layout composable and the animation tools provided by Jetpack Compose.
Learn how to conditionally navigate to a screen in Jetpack Compose. This is the kind of scenario you might encounter if your app has an onboarding flow, which needs to be shown only once, or a login screen, which the user needs to complete before accessing the app’s main content.
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.
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 short article we will see how we can have our ViewModels automatically receive the navigation arguments when we navigate from one screen to another.
2021
In this article 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.
Learn how to create a Composable card that rotates (or flips) on its axis, to show content on its back.
In this article we will learn how to implement a Circular List in Jetpack Compose. This is basically a list where the items shift horizontally based on their vertical position, as if they were following a circular path .
Learn how to implement the playback speed selector from Google’s Podcasts app using Jetpack Compose.
One of the principles in Jetpack Compose is to hoist state — that is, to move a composable’s state outside of the composable and push it further up, making the composable stateless. Creating stateless composables results in components that are easier to reuse and test.
In this article we’ll see how we can create a composable that hoists its state, while providing a default state implementation that can be used when the defaults meet our needs.
An article to showcase how to create a custom progress indicator in Jetpack Compose using the Canvas APIs.
In this article we’ll find out how to add biometric authentication to an Android app developed with Jetpack Compose. As not all devices offer biometric authentication, we will also add a PIN fallback in case no biometric options are available, or if the user prefers to use PIN.
In Jetpack Compose composables accept a Modifier that alters the appearance or behaviour of the composable they are applied to. Some of the modifiers, like width, height and padding are common to all composable functions while others can only be applied to specific composables, like weight for Row and Column, In this article we will see how to create a composable function with its own modifier attribute.
Recent versions of Android offer both Light and Dark themes, which the user can set globally via the device settings. Most apps nowadays follow this setting and change their theme based on the global setting, but it is also good practice to offer users an app option to set the theme regardless of what the global setting is. In this article we’ll find out how to do that with Jetpack Compose.