Text
The most basic way to display text is to use the Text composable with a String as an argument. As shown below we can add some customization to the Text by various properties available like the color, font, and style.
Image
Image can be used to display the image files available in the resource. Other sources of Image display can discuss later.
Following composable function will display an image named “header.png” from the resource folder with scale type of CROP. We can add modifiers to set different properties for the image in the Image args. Here we specify the height, width for the image and also mentioned round corners with a 10dp scale.
CheckBox
A checkbox is a GUI widget that permits the user to make a binary choice.
Checkbox portraits key concepts of declarative UI that is elements are completely controlled by the parameters you passed to them. So here we are using “isChecked” variable to keep track of the status of CheckBox. The property onCheckedChange will listen to the checkbox user interaction and update our variable.
Spacer
Spacer takes its size from its parent Box, which in turn takes its size from the text it contains.
Column
Use Column to place items vertically on the screen.
In the following composable function, we will place two texts one by one vertically on the screen by using the Column layout. We can use the modifier attribute to set custom width and height for the column layout.
Row
Row to place items horizontally on the screen. Both Column and Row support configuring the alignment of the elements they contain.
In the following composable function, we will place two texts one by one horizontally on the screen by using the Row layout.
If you find out something useful in this article, don’t forget to give some👏🏼
Related posts
