Material for this slide includes: 1. Jetpack compose UI element 2. Textfield in jetpack compose (simple, outlined, rounded corner, password) 3. Button in jetpack compose (simple, round, outlined, background color) 4. Snackbar in jetpack compose (simple and custom) 5. Description of list and examples

2. 2

3. Jetpack Compose UI
Jetpack Compose is a modern declarative UI Toolkit for
Android. Compose makes it easier to write and maintain
your app UI by providing a declarative API that allows you
to render your app UI without imperatively mutating
frontend views.
Using Compose, you can build your user interface by
defining a set of composable functions that take in data
and emit UI elements. There are several elements that
need to be understood to develop an attractive UI, namely
Textfields, Buttons, Showing Snackbars and Lists
3

4. TextField
4
The most basic example for a TextField composable, with value stored
in a variable on any change in the value, a label, and an initial value
displayed, is shown in the following.

5. Outlined TextField
5
We are going to declare OutlineTextField and also
adding floating label to it.

6. Rounded Corner
TextField
Shape attribute used to make the Textfield corners round.
6

7. Password TextField
7
Declare visualTransformation with PasswordVisualTransformation()

8. Most common used composable in this scope is
Text Composable for the label of Button
Simple Button
8

9. Round Button
This attribute is used to make the button rounded.
9

10. Outlined Button
10
Border => using this attribute to change the color and width of
outlined button

11. colors => this attribute is used to change the
background color of Button
Change Button Background Color
11

12. Showing Snackbar
To show Snackbar in compose we require a so called
ScaffoldState
12

13. Custom Snackbar
13
To show custom snackbar, we have to use Snackbar Composable.

14. Many apps need to display collections of items. If
you know that your use case does not require any
scrolling, you may wish to use a simple Column or
Row (depending on the direction), and emit each
item’s content by iterating over a list
List
14

15. List (Cont.)
If you need to display a large number of items (or a list of
an unknown length), using a layout such as Column can
cause performance issues, since all the items will be
composed and laid out whether or not they are visible.
Compose provides a set of components which only
compose and layout items which are visible in the
component’s viewport. These components include
LazyColumn and LazyRow.
15

16. LazyList
16
LazyList provides a number of functions for describing items in the
layout.