Layouts basics in Jetpack Compose.
Hello guys,😀
Please proceed to the first day for Introduction to Compose & Setup 🏗️ if you have not yet setup a Basic Compose project.
We already are aware, Jetpack Compose is now considered as a Future of Android and modern Toolkit for building Native UI. The main feature is, it bring your app to life with less code, powerful tools and lot more. Many Companies have already started adopting it or migrating their old stuff in Compose.
As compare to designing a layout in XML it is little easier to design and build app UI elements. Based on the state of composable the UI is transformed. This happens in the sequence of Composition, Layout, Drawing.
Good news 📰.
When nesting some Views, like RelativeLayout, you could see some performance issues with the Android View system. Compose doesn’t use multiple measures, so you can nest as deeply as you like without performance suffering.
How Layouts are built ?
The fundamental component of Compose is Composable function. A function emitting Unit (Nothing) that describes a specific area of your UI is referred to as composable function. The function receives some input and produces the content displayed on the screen. Multiple/nested UI elements could be produced using a Composable function. But the total control of displaying the elements is done by us.
Accha that is OK, but how is Composable function written ? 💻
Compose make it simple to define your own, more specific layouts while also offering a variety of readily layouts to assist you in organizing your UI elements.
Most Common Used Standard Layout Components in daily use cases
- Want to place UI elements Vertically on screen ?
Use Column to place items vertically on screen
2. Want to place UI elements Horizontally on screen ?
Use Row to place items horizontally on screen
3. Want to overlap UI elements on screen ?
Use Box to overlap items on screen
4. Want to customize layout more ?
Use Modifiers to customize
That’s all about the basics of Basic Layouts in Compose. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch LayoutBasicsInCompose) for this implementation.
https://github.com/SatyamGondhale/LearnCompose
If you think this has helped you, feel free to 👏🏻 (claps) & share. Thanks.😄
