![]() The spread width has the same effect than for the View system ConstraintLayout Since our text is smaller than the available width space, we want it to take all the available space instead, so its content (the actual text rendered within the composable) gets aligned to the left per its gravity. This will make it position below the header image, and to the right of the portrait image. fillMaxHeight (), constraintSet = ConstraintSet Text ( movie. Sealed class Tag private object HeaderImageTag : Tag () private object PortraitImageTag : Tag () ConstraintLayout ( modifier = Modifier. The name is RoundedIconButton, which gets a series of arguments: The tag, that will be used to reference composables within our layout declaration and that we’ll look into later, the image vector asset, a text to put below it and an optional background color. The component has an icon and a text inside. I decided to code those as a separate component for reusability. Let’s start by coding those rounded icon buttons on the image. #COMPOSE ACCOMPANIST HOW TO#The only goal is to showcase how to use ConstraintLayout composable by yourself, so don’t expect much magic on this first post but mostly the basics.įor loading images from a remote URL seamlessly I’ll be using Coil via the Accompanist library, by This library provides some utilities for projects in the process of migration to Jetpack Compose, like a theme builder to load theme colors from the closest Context, so you can keep using your XML themes and styles while doing the migration. In this post I’ll do a try to replicate it for Jetpack Compose as possible. #COMPOSE ACCOMPANIST ANDROID#There is an awesome sample project on ConstraintLayout created by that showcases how to build a Google Play Movies detail like layout for the Android View System. ![]() ![]() Here you have a fully working example I prepared and I’ll be iterating over in other articles to come. You can find it in implementation 'androidx.ui:ui-layout:0.1.0-dev13' and import it like import androidx.ui.layout.ConstraintLayout. That decision turned out to be pretty convenient so it could also be ported into Jetpack Compose now. When ConstraintLayout was coded for the Android View system, logics for rendering (constraints) were decoupled from the ViewGroup with the purpose of making it also work for the layout editor. Learn how to work with ConstraintLayout in Compose.Įverything listed in this post is part of Jetpack Compose version 0.1.0-dev13, (Compose Developer Preview 2), so it’s quite prone to change over time while the team keeps improving the api surface. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |