Compose Camp Day 2.pptx

This work is licensed under the Apache 2.0 License
SETTING UP
THE TENT

Let’s start the Camp

● Creating composable activity
● Row and column sizing
● Modifiers
● Image cards
● Styling text
● State Management
● Buttons, Textfields and Snackbars
● Lists
Overview

Creating Composable Activity
Traditionally, each screen (or navigation unit) in
the application would be either an activity or a
fragment, each with its own lifecycle bindings ,
but with Jetpack Compose and the Compose
Navigation library, inbuilt templates are
available.

Creating Composable Activity

Annotations
in
EMPTY COMPOSABLE
ACTIVITY

@Preview
@Composable
This annotation is used to
show preview of a composable
function in the Android Studio
preview.
showBackground(=true)
parameter in the code snippet
in the previous slide will make
@Composable use a default
background.
setContent()
This method is
called and
composable
functions are
passed to create a
compose based
screen.
@Composable
These functions let
you define your app’s
UI programmatically
by describing how it
should look and
providing data
dependencies,rather
than focusing on the
process of UI’s
construction.
Let’s discuss some annotations

Rows and Columns

c
Column is like a
linear layout with
vertical orientation
and shows each
child below the
previous children.
COLUMN LAYOUT

c
Without use of Column With use of Column

c
ROW LAYOUT
Row is like a linear
layout with a
horizontal orientation
and shows each child
next to the previous
children.

Without use of Rows With use of Rows

For Column For Row

c

Modifiers

Modifiers are standard kotlin objects which can be
used to modify certain aspects of a Composable.
To set them , a Composable needs to accept a
modifier as a parameter. We can use common
attribute or appearance like background, padding,
clip, border etc.
What are Modifiers ?

Modifiers let you do these sorts of things:
● Change the composable’s size, layout ,behavior and appearance.
● Add information ,like accessibility labels.
● Process user input.
● Add high-level interactions, like making an element clickable,
scrollable, draggable, or zoomable.

c
width() requiredWidth()
It abides size modifiers before it or
max parent dimensions.
It doesn’t take layout Constraints
into account and forces it.

How it looks in the emulator
:

offset()
It can be represented as a point in
cartesian space at a specified
distance from a separately-
maintained origin or as a vector that
can be applied to coordinates.
Spacer()
Spacer component is used to display an
empty space. Width and (or) height can be
set for Spacer using Modifier object. This
function accepts Modifier object as
parameter, through which we may set the
Spacer’s width or (and) height.

Modify element to add border with
appearance specified with a width, a
color and a shape and clip it. It is
simply annotated with border().
Border
Used to provide extra white space
according to the requirement
around the specific view. It is simply
annotated with padding().
Padding

Image card

Box
A widget that is used to positioned elements one over
another.it will position its children relative to its edges.
The stack is used to draw the children which will overlap
in the order that they are specified. It is annotated with
Box().

A card is a container that can
be used as a parent view for
declaring multiple UI elements
inside it. It has an elevation
property that applies a shadow
effect around it. In jetpack
compose, it is equivalent for
Cardview in android.
Card

Adding an image element

Text Styling

Text is a central piece of any UI, and Jetpack
Compose makes it easier to display or write text.
Compose leverages composition of its building blocks,
meaning you don’t need to overwrite properties and
methods or extend big classes to have a specific
composable design and logic working the way you
want.
What is text styling ?

Sample code:

The text
design
changed

State
Management

What is State Management ?
● State in an app is any value that can change over time.
● Any time a state is updated , a recomposition takes place
● Composable functions can use the “remember” API to store an object in
memory.

Recomposition is when Jetpack Compose re-executes the
composables that may have changed in response to state
changes, and then updates the Composition to reflect any
changes.
What is Recomposition ?

● remember {mutableStateOf()} stores the state
value.
● “remember” and “mutableStateOf” are completely
independent concepts.
● “remember” keeps a value (any value) consistent across
recompositions. “mutableStateOf” returns a
MutableState.
What is meant by “remember” keyword ?

Understanding the
code snippet

On click
On click
On click

Buttons, Textfields
and Snackbars

Buttons
In Jetpack Compose buttons, you need to give two arguments for buttons. The first
argument as onClick callback and another one is your button text element. You can
add a Text-Composable or any other Composable as child elements of the Button.

Textfield without icon Textfield with icon
Textfield
s
TextField is a user interface control that is used to allow the user to enter the text.
This widget is used to get the data from the user as numbers or text.

Snackbar is a lightweight widget and they are used to show messages at the
bottom of the application. It was introduced with the Material Design library as
a replacement for a Toast.
An example of snackbar :
Snackbars

LISTS

It is a common requirement when designing user
interface layouts to present information in either
scrollable list or grid configurations. For basic list
requirements,the Row and Column components can
be re-purposed to provide vertical and horizontal
lists of child composable.
What are Lists ?

By using column

By using LazyColumn

LazyColumn Column
Vs
● No impact on performance
● No need to declare
scrollState
● Favourable to use when
there are more number of
elements
● Impact on performance
● Requires explicit declaration
of scrollState
● Efficient to use when there are
less number of elements

THANK YOU
Have fun encouraging your community in becoming
Android Developers!
VOILA HAPPY CAMPING !!!

Compose Camp Day 2.pptx

Recommended

Recommended

More Related Content

Similar to Compose Camp Day 2.pptx

Similar to Compose Camp Day 2.pptx (20)

Recently uploaded

Recently uploaded (20)

Compose Camp Day 2.pptx