Layouts basics in Jetpack Compose.

Satyam Gondhale
Nerd For Tech
Published in
3 min readDec 4, 2022

--

Image from Google

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.

Image from Google Source

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 ? πŸ’»

Image from Google Source

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

  1. 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.πŸ˜„

--

--