#AskAndroid: Compose Layouts and Modifiers — The Android Show MAD Skills Live Q&A — Part 1
The latest edition of #TheAndroidShow on March 9th, 2023 was hosted by Madona Syombua and Rebecca Gutteridge. As always, the Android team delivered great content including a live MAD Skills Q&A segment focused on Jetpack Compose Layouts and Modifiers. The segment was moderated by Chris Arriola from Google and was joined by fellow Android Developers Relations Engineers Jolanda Verhoef, Simona Stojanovic, and Software Engineer Andrei Shikov. The viewers could ask questions in the live chat on YouTube or by using the #AskAndroid hashtag on Twitter. This article aims to summarise, in two-part articles, all the questions asked by the community and the answers given by the Android team.
Faisal Developer: “Is it the right time to migrate existing XML code to Jetpack Compose?”
Simona took this question and her very short answer was yes. She added that it can also depend on the team and app size, the capacity, and what the developer or team feels is the best approach for their requirements and timeframe. In addition, Jetpack Compose simplifies UI development, is very powerful, has less code, has powerful tools, and uses intuitive Kotlin APIs. It was also built with interoperability allowing it to coexist with views. There are also several resources available to assist in the migration of an existing XML codebase to Jetpack Compose. These include official documentation, blogs, talks, and even a sample app.
Divyansshu: “I’m looking forward to getting started with Android development. What should I use to begin: Jetpack Compose or XML?”
Jolanda took this question and mentioned that there is an Android Development course with 8 units that use Jetpack Compose. She recommends this course as it helps to learn Android with Jetpack Compose from the beginning and highlighted that as Jetpack Compose is the future of Android development, this course is ideal for beginners. Chris added that a lot of existing apps are written in XML and thus the need to still learn XML is there, however, to start with learning Jetpack Compose.
“When should I use Column vs LazyColumn?”
Andrei stated that the answer to the Column vs LazyColumn question boils down to trade-offs. Column is faster on scrolling but takes time to “ramp up” as it takes time to create all the elements beforehand. LazyColumn, however, is ‘lazy’ in creating elements — as you scroll it creates new elements as they come into the viewport. With that scrolling, there will be a bit of a lag because it needs to perform the work of creating new elements, however, it does not require a “ramp-up” time to create elements. LazyColumn, therefore, becomes ideal for larger sets of data over its counterpart: Column. He added, that if the data presented is not meant to be scrollable, then use Column rather than LazyColumn, as LazyColumn is scrollable by default.
Cássio Landim: “Is there a schedule to have all components from Material 2 implemented on Material 3?”
Jolanda stated that there is always a schedule, however, they can’t say when everything will be implemented. There is, however, already support in Material Design 3 for different kinds of components. With Material 3 being a very new concept, not everything from Material Design 2 can be directly mapped onto Material Material 3, and with this said, the developer might discover elements in Material Design 2 that are not implemented the same way in Material Design 3. She highlighted the official Material Design 3 resource website https://m3.material.io/ which shows the status of every component, an example is below:
Jolanda also pointed out that the team is quite critical of what is added in the Material library, in other words, what is included in the library is not only related to how many developers are currently using it but rather how well that component fits the design language, coupled with good rules and APIs. The developer can also build on top of the Foundations library which contains useful “building blocks” developers can use.
Пестренко Олекса: “#AskAndroid Will there be scroll support out of the box for LazyColumn?”
Andrei answered this question. He started off by saying that LazyColumn is indeed scrollable by default but provided a more detailed answer about nested scrolling support. He provided examples of different scenarios where nested scrolling might be desired — for example, a LazyColumn that scrolls vertically and has a LazyRow nested inside it which scrolls horizontally. Another example he provided is a LazyColumn nested inside another LazyColumn. This, unfortunately, does not work because the “column with the vertical scroll creates an infinite nest inside” and LazyColumn does not know what size it is supposed to be thereby affecting any possible reuse and lazy semantics.
He emphasized that this is how the system works, but also provided a workaround. For example, if the developer wants to have vertically scrollable elements nested inside another scrollable container they can specify a fixed height, for example, a 50dp maximum for the nested container. This will make sure that the nested scrollable container will know about its size and thus efficiently reuse its elements and this will allow it to be nested inside a scrollable container.
“In what scenario should I create a custom layout vs using Compose out-of-the-box ones?”
Simona answered this question. She started off by highlighting that most developers who come from the view system have not had a pleasant experience working or trying to build custom layouts and that this question is very frequently asked. With that said, creating and working with custom layouts in Jetpack Compose is much simpler than the view system. There are a couple of resources available including the Jetpack Compose samples on GitHub which, may look complex in design, but have a very simple implementation.
To answer the question about knowing when is best to create a custom layout in Compose, Simona added that if, for example, the design of the layout contains elements whose size and positioning are very intricately dependent on each other then this makes a good candidate for a custom layout to be created. Chris also pointed out there is a MAD skills video where Simona covers this topic on custom layouts in Jetpack Compose.
Technics6: “So there will be no XML layouts?”
Jolanda started off by saying that XML is not completely gone in an Android app as there is the strings.xml file which contains useful information used “under the hood”. However, in terms of XML layouts, in a fully Compose-based app, XML layouts are not needed as the composables will represent the UI to be presented and not XML layouts.
Chris added that for apps that currently contain XML layouts, Jetpack Compose does make it possible for both the composables and XML layouts to co-exist through interoperability, but if the developer is creating new layouts and using Jetpack Compose he advised using Composables over XML. Andrei highlighted the power of Composable Previews and how these can help make development easier.
There are instances where the use of XML layouts is not completely gone and Chris provided an example where certain SDKs may expose their integration using fragments. This would mean bringing in a fragment into the Jetpack Compose-based app by defining an XML layout for the fragment container view and then using Android view binding to bring that fragment to the Jetpack Compose app. So though there are some scenarios where XML may need to be used, the recommendation is to favor Jetpack Compose over XML where possible.
“When should I use Modifier.alignByBaseline()?”
Simona took this question and said that the practical usage most often seen is with Text composable usage. Here, there could be a Row that would contain Text composables of varying fonts and font sizes and by default, these would not be aligned as expected, that is, by the baseline of the text. Modifier.alignByBaseline() therefore ensures that when applied to specific children within a Row, then each child would be aligned by the baseline of their text irrespective of their font or font size. She emphasized that this function is applied on an element basis, in other words on each child element, and not on the parent that contains the child elements.
Naresh Sharma: “How to migrate the application built using Java into Compose?”
Chris answered the question and pointed out that Jetpack Compose is entirely written in Kotlin and also highlighted the benefits of the Kotlin language including its conciseness and less verbose nature. With this said, the app would need to use Kotlin first and he added that there is migration strategy documentation to help developers with Java-based apps using Kotlin found here. Kotlin also interoperates with Java so the two can co-exist in an Android app which is advantageous when doing a gradual migration from Java to Kotlin.
Part 2
The second part of this article detailing the other questions asked and the answers provided by the Android team is coming soon. Thank you for reading.
#AskAndroid: Compose Layouts and Modifiers — The Android Show MAD Skills Live Q&A — Part 1 was originally published in Google Developer Experts on Medium, where people are continuing the conversation by highlighting and responding to this story.
