ylliX - Online Advertising Network
Compose Tips for Delightful UI — ’24 wrap up

Compose Tips for Delightful UI — ’24 wrap up


Compose Tips for Delightful UI

In July 2024, we launched a brand new YouTube series called “Compose Tips for Delightful UI”. The series set out to give short, actionable and technical tips for working with Jetpack Compose and share small examples of APIs that are not as widely known.

We aimed to show how you can achieve a premium look and feel of your app, by using the powers and strengths of Compose, and cover the most important (but low cost) UI concepts to keep in mind when designing and developing an app.

With the end of 2024 approaching, we ended our Season 1 which covered a variety of different, delightful topics that will make your UIs shine:

Edge-to-edge and insets

Learn how to easily make your Android apps go edge-to-edge using Compose, ensuring it has a modern, delightful UI. Follow three simple steps to safely handle insets, to prevent content from overlapping system UI elements:

Pager

Easily add the Pager composable to your apps to get out of the box, delightful gestures on paged content. This episode covers how to use the Pager composable, configuration parameters such as controlling the fling distance, and tying into the PagerState to create animations:

Nested scrolling

Scrolling can be a valuable tool for making fun and delightful apps! In this episode, learn how to use nested scrolling in Compose, for a seemingly complex coordination between multiple components on a single scroll:

Brush

Brushes in Jetpack Compose are a fundamental part as to how content is drawn on screen. Understanding the different types of brushes you can use can help make your app stand out from the crowd. In this episode, we dive into solid color brushes, different gradient brushes, as well as various options for gradient brushes:

Shaders

In addition to Brushes, in Compose there is another delightful mechanism for painting your pixels and rendering graphics on screen, called Shaders. In this episode, we dive into the details of using shaders in Jetpack Compose, combined with render effects and how they can be applied to your whole UI:

Flow layouts

FlowRow and FlowColumn are similar to Row and Column layouts, however the items will flow into the next row or column when there is no more space in the area. In this video, Flow layouts are covered along with how to use them and tricks for using them to work on different window sizes:

Lazy grids

Lists are vital to the Android UI — we use columns and rows everywhere in our apps! This episode shows how grids can sometimes serve as a better alternative, to make these layouts more dynamic and delightful — especially when supporting different window sizes across devices:

AnchoredDraggable

In this episode, we cover Compose AnchoredDraggable, which is a Jetpack Compose API that lets you build components that can be dragged between anchor points and settles an anchor point at the end of the gesture. AnchoredDraggable is often used to build components like SwipeToDismiss, Navigation Drawers, Bottom Sheets and more:

Graphics layers

Learn all about Graphics Layers in Compose and how you can use the APIs to composite graphics layers together to create interesting visual effects. This episode covers how to use blend modes to blend between two layers, and how to set the saturation of a whole layer:

Clipping and masking

Clipping or masking parts of your content is a way to create delightful UI effects, and is a common need when working with custom UI components. Clipping is the process of removing parts of your content based on a set path or shape, whereas masking is similar, but allows for semi-transparent pixels too:

You can check out the full YouTube playlist here.

We are incredibly grateful for your feedback and suggestions for what else you’d like to see us cover, so please keep it coming.

See you soon for Season 2 in 2025 — happy composing!



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *