Overview
Hello folks hope you’re doing well as always, so here we have a new topic to learn. We all know Android has come up with Jetpack Compose. So sometimes we face challenges while developing apps in Jetpack Compose Framework due to the new framework and not having good community support. Because jetpack compose is new in the market, it may take time to find and fix some concepts. For example, we have Flexbox Layout in Android (XML) but we don’t know what to use for the same behavior in jetpack compose.
We all know about Flexbox Layout but today we are going dive deep into how to use Flexbox layout in Android (XML) with jetpack compose and subsequently learning about Flow Layout.
What is Flow Layout?
Flow Layout arranges the children to a new line if the screen/surface does not have enough space. Generally, we use flow layout when we don’t know what type (type in the sense of height and width) of data to show.
In the flow layout, we have FlowColumn and FlowRow we will see both with examples.
Implementation of Flow Layout
To use FlowLayout you just need to add a dependency to the project’s app-level Gradle file.
Now open the MainActivity.kt file where you can use Flow Row or Flow Column. First, we will see the Flow Row example.
Flow Row :
Flow Column :
Properties
Note : In FlowRow and FlorColumn the properties are the same, the only difference is in their behavior. FlowRow properties will behave in Row format and FlowColumn properties will behave in column format. So Let’s understand it.
- Modifier : It is used to set properties of any view. Eg. height, width, align, padding, etc.
- mainAxisSize :It is used to change content alignment. (we used in XML match_parent, wrap_content). Where WRAP means wrap_content and EXPAND means match_parent.
- mainAxisAlignment : It is used to set the alignment of the whole layout in the main axis.
- Start – align the child at the start direction of the screen.
- End – align the child to the end direction of the screen.
- Center – align the child to the center of the screen.
- SpaceEvenly – put space for the child. Including first & last children
- SpaceBetween – put equal space for the children.
- SpaceAround – put space around the children. Including free space before the first child and after the last child.
- mainAxisSpacing : It is used to put space between views in the main axis.
- crossAxisAlignment : It is used to set the alignment of the whole layout in the cross-axis.
- crossAxisSpacing : It is used to put space between views in the cross-axis.
- lastMainAxizAlignment : It is used to set content directly to the last line of the layout.
your BusinessGet Expert Assistance
Conclusion
Yeah So that’s it. I personally think that Jetpack Compose has opened many doors for developers. Being declarative, it is fully customisable. In the upcoming years, I bet it’ll change the way we code in Android development. I hope you learn something new in mobile app development today. If you need the full code click on Github.
You may also like
Integrating AI in Your eCommerce App for Personalization
In the ever-evolving digital landscape with the changing preferences, of modern consumers there come...
Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in transforming the patient's journey.
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
