Forem: One Past Last Jedi

07 Compose - Layout – Column + Row + Spacer

One Past Last Jedi — Sat, 08 May 2021 10:58:11 +0000

Introduction:

We will talk about Column and Row and Spacer today.

Column:

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: ColumnScope.() -> Unit
): @Composable Unit

A layout composable that places its children in a vertical sequence.

Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top,        
          )
    {
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Box(Modifier.size(100.dp).background(Color.Yellow))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

horizontalAlignment:

The horizontalAlignment can be:

horizontalAlignment = Alignment.Start,

horizontalAlignment = Alignment.CenterHorizontally,

horizontalAlignment = Alignment.End,

verticalArrangement:

The verticalArrangement can be:

verticalArrangement = Arrangement.Top,

verticalArrangement = Arrangement.Center,

verticalArrangement = Arrangement.Bottom,

verticalArrangement = Arrangement.SpaceBetween,

verticalArrangement = Arrangement.SpaceAround,

verticalArrangement = Arrangement.SpaceEvenly,

Finally, most or may be even all of Modifier Function apply to Column and Row and all Composable.

Row:

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: RowScope.() -> Unit
): @Composable Unit

A layout composable that places its children in a horizontal sequence. It is the same as Column except everything is the opposite and horizontal.

Row(
        modifier = Modifier.fillMaxSize(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween,
          )
    {
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Box(Modifier.size(100.dp).background(Color.Yellow))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

Spacer:

@Composable
fun Spacer(modifier: Modifier): @Composable Unit

Component that represents an empty space layout, whose size can be defined using Modifier.width, Modifier.height, Modifier.size and Modifier.weight modifiers.

Column {
        Box(Modifier.size(100.dp).background(Color.Red))
        Spacer(Modifier.weight(2f))
        Box(Modifier.size(100.dp).background(Color.Magenta))
        Spacer(Modifier.weight(1f))
        Box(Modifier.size(100.dp).background(Color.Green))
    }

Finally:

Next class we will talk about some most used Composable that follow Google material design.
See you 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

06 Compose - Layout – Modifier Functions 2

One Past Last Jedi — Tue, 04 May 2021 10:03:45 +0000

Introduction:

We will continue talking about Modifier Functions:

AbsoluteOffset:



@Stable fun Modifier.absoluteOffset(
    x: Dp = 0.dp, 
    y: Dp = 0.dp
): Modifier

It will move the child of the Box not the Box itself by amount x and y dp and this amount can be negative from its original position without consider layout direction RTL or LTR.

Example 1:



@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .height(100.dp)
            .width(100.dp)
            .padding(all = 30.dp)
            .absoluteOffset(x = -20.dp, y= -20.dp)
       )
    {
        Text(text = "Hello Box 1")
    }
}

Offset:



@Stable fun Modifier.offset(
    x: Dp = 0.dp, 
    y: Dp = 0.dp
): Modifier

Same as absoluteOffset except it will consider RTL or LTR direction.

Padding:



@Stable fun Modifier.padding(
    start: Dp = 0.dp, 
    top: Dp = 0.dp, 
    end: Dp = 0.dp, 
    bottom: Dp = 0.dp
): Modifier

Here start can be Right if we use RTL direction.



@Stable fun Modifier.padding(
    horizontal: Dp = 0.dp, 
    vertical: Dp = 0.dp
): Modifier



@Stable fun Modifier.padding(all: Dp): Modifier



fun Modifier.padding(paddingValues: PaddingValues): Modifier

PaddingValues means we can store padding in variable and then use it here which is very good like this example:



val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
Box(Modifier.background(color = Color.Gray)) {
    Box(Modifier.padding(innerPadding).size(50.dp).background(Color.Blue))
}

Important:

In jetpack Compose there is no Margin but you can simulate Margin by put a Box inside another Box, so the Padding of outer Box works as Margin for Inner Box.

AspectRatio:



@Stable fun Modifier.aspectRatio(
    ratio: Float, 
    matchHeightConstraintsFirst: Boolean = false
): Modifier

Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: Constraints.maxWidth, Constraints.maxHeight, Constraints.minWidth, Constraints.minHeight if matchHeightConstraintsFirst is false and the opposite if it true.



aspectRatio = width / hight



Box(Modifier.width(100.dp).aspectRatio(0.5f).background(Color.Green))

fillMaxHeight:



@Stable fun Modifier.fillMaxHeight(fraction: Float = 1f): Modifier

it makes the height as maximum as it can from the height available to it or some percent of it.



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxHeight(fraction = 0.5f)
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }

fillMaxWidth:



@Stable fun Modifier.fillMaxWidth(fraction: Float = 1f): Modifier

Same as fillmaxHeight() but with width.

Height:



@Stable fun Modifier.height(height: Dp): Modifier

To specify height in dp.

Width:



@Stable fun Modifier.width(width: Dp): Modifier

To specify width in dp.



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .width(200.dp)
            .height(500.dp)
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }

Alpha:



@Stable fun Modifier.alpha(alpha: Float): Modifier

Draw content with modified alpha that may be less than 1.



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .width(200.dp)
            .height(500.dp)
            .padding(all = 30.dp)
            .alpha(alpha = 0.2f)
       )
    {
        Text(text = "Hello Box 1")
    }

Border:



fun Modifier.border(
    width: Dp, 
    color: Color, 
    shape: Shape = RectangleShape
): Modifier



fun Modifier.border(
    width: Dp, 
    brush: Brush, 
    shape: Shape
): Modifier



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(
                width = 10.dp,
                shape = CircleShape,
                brush = Brush.linearGradient(
                    colors = listOf(Color.Blue, Color.Cyan,
                                   Color.Green, Color.Magenta, Color.Red,
                                   Color.Yellow),
                                            )
                   )
            .background(color = Color.Yellow, shape = CircleShape)
            .width(200.dp)
            .height(300.dp)
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }

Clickable:



fun Modifier.clickable(
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier

It make the Box clickable.



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(
                width = 10.dp,
                shape = CircleShape,
                brush = Brush.linearGradient(
                    colors = listOf(Color.Blue, Color.Cyan,
                                   Color.Green, Color.Magenta, Color.Red,
                                   Color.Yellow),
                                            )
                   )
            .clip(shape = CircleShape)
            .background(color = Color.Yellow, )
            .width(200.dp)
            .height(300.dp)
            .clickable(
                onClick = {
                    println("I clicked")
                }
                      )
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }



fun Modifier.clickable(
    interactionSource: MutableInteractionSource, 
    indication: Indication?, 
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier



@Composable fun rememberRipple(
    bounded: Boolean = true, 
    radius: Dp = Dp.Unspecified, 
    color: Color = Color.Unspecified
): Indication



Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(
                width = 10.dp,
                shape = CircleShape,
                brush = Brush.linearGradient(
                    colors = listOf(
                        Color.Blue, Color.Cyan,
                        Color.Green, Color.Magenta, Color.Red,
                        Color.Yellow
                                   ),
                                            )
                   )
            .clip(shape = CircleShape)
            .background(color = Color.Yellow,)
            .width(200.dp)
            .height(300.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(
                    bounded = true,
                    color = Color.Cyan,
                    radius = 50.dp
                                           ),
                onClick = {
                    println("I clicked")
                }
                      )
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }

Rotate:



@Stable fun Modifier.rotate(degrees: Float): Modifier

It rotate the child of the Box by degrees amount.



…
.padding(all = 30.dp)
.rotate(degrees = -45.0f)

Shadow:



@Stable fun Modifier.shadow(
    elevation: Dp, 
    shape: Shape = RectangleShape,
): Modifier

It give shadow to the Box.



.shadow(
                    elevation = 50.dp,
                    shape = CircleShape,
                       )
…

zIndex:



@Stable fun Modifier.zIndex(zIndex: Float): Modifier

It controls the drawing order for the children of the same layout parent. A child with larger zIndex will be drawn on top of all the children with smaller zIndex. When children have the same zIndex the original order in which the parent placed the children is used.



Box {
        Box(
            modifier = Modifier
                .zIndex(3f)
                .background(color = Color.Green)
                .width(200.dp)
                .height(200.dp)
           )
        Box(
            modifier = Modifier
                .zIndex(1f)
                .background(color = Color.Cyan)
                .width(300.dp)
                .height(300.dp)
           )
        Box(
            modifier = Modifier
                .zIndex(2f)
                .background(color = Color.Red)
                .width(150.dp)
                .height(350.dp)
           )
    }

Finally:

Ok, now we finish the most used Modifier Functions. Next class we will talk about Column which most, may be even all, Modifier Function apply to it.
See you 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

05 Compose - Layout – Box and Modifier Functions 1

One Past Last Jedi — Wed, 28 Apr 2021 04:28:16 +0000

Introduction:

In this Lecture we will talk about the most used Modifier Function.

Modifier.Background():

First, some function has overload function like this one has 2 overloads function.

1/

fun Modifier.background(
    color: Color, 
    shape: Shape = RectangleShape
): Modifier

2/

fun Modifier.background(
    brush: Brush, 
    shape: Shape = RectangleShape, 
    alpha: Float = 1.0f
): Modifier

color:

we can choose color by one of the following method.

1/ By choose from default color like this:

.background(Color.Green)

2/ Or by choose red, green, blue alpha as Float number [0f, 1f] like this:

.background(Color(red = 0.5f, green = 0.2f, blue = 0.7f, alpha = 1.0f))

3/ Or by choose red, green, blue alpha as Int number [0, 255] like this:

.background(Color(red = 50, green = 100, blue = 200, alpha = 255))

4/ Or by choose Hex-Format like this:

.background(Color(0xFFaa9911))

Shape:

Can be RectangleShape or CircleShape or more advanced Shape that you need to use advanced function to do it. Here an example of CircleShape:

.background(Color(0xFFaa9911), shape = CircleShape,)

brush:

1/

horizontalGradient(
colors: List<Color>, 
startX: Float = 0.0f, 
endX: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a horizontal gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush=
                Brush.horizontalGradient(
                colors = listOf(Color.Red, Color.Blue, Color.Green),
                startX = 100.5f,
                endX = Float.POSITIVE_INFINITY,
                tileMode = TileMode.Mirror,)
                       )

2/

horizontalGradient(vararg colorStops: Pair<Float, Color>, 
startX: Float = 0.0f, 
endX: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair.
Example:

.background(brush=
                Brush.horizontalGradient(
                    (0.2f to Color.Red),
                    (0.4f to Color.Blue),
                    (0.9f to Color.Green),
                startX = 0.0f,
                endX = Float.POSITIVE_INFINITY,
                tileMode = TileMode.Clamp,)
                       )

3/

linearGradient(vararg colorStops: Pair<Float, Color>, 
start: Offset = Offset.Zero, 
end: Offset = Offset.Infinite, 
tileMode: TileMode = TileMode.Clamp)

Creates a linear gradient with the provided colors along the given start and end coordinates.
Example:

.background(brush=
                Brush.linearGradient(
                    (0.2f to Color.Red),
                    (0.4f to Color.Blue),
                    (0.9f to Color.Green),
                tileMode= TileMode.Clamp,)
                       )

4/

linearGradient(colors: List<Color>, 
start: Offset = Offset.Zero, 
end: Offset = Offset.Infinite, 
tileMode: TileMode = TileMode.Clamp)

Creates a linear gradient with the provided colors along the given start and end coordinates.

5/

radialGradient(colors: List<Color>, 
center: Offset = Offset.Unspecified, 
radius: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a radial gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush=
                Brush.radialGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                    center= Offset.Unspecified,
                    radius= Float.POSITIVE_INFINITY,
                    tileMode= TileMode.Clamp),
                       )

6/

radialGradient(vararg colorStops: Pair<Float, Color>, 
center: Offset = Offset.Unspecified, 
radius: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair.

7/

sweepGradient(colors: List<Color>, 
center: Offset = Offset.Unspecified)

Creates a sweep gradient with the given colors dispersed evenly around the center.
Example:

.background(brush=
                Brush.sweepGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                    center= Offset.Unspecified,
                                   ),
                       )

8/

sweepGradient(vararg colorStops: Pair<Float, Color>, 
center: Offset = Offset.Unspecified)

Creates a sweep gradient with the given colors dispersed around the center with offsets defined in each colorstop pair.

9/

verticalGradient(colors: List<Color>, 
startY: Float = 0.0f, 
endY: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a vertical gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush=
                Brush.verticalGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                                   ),
                       )

10/

verticalGradient(vararg colorStops: Pair<Float, Color>, 
startY: Float = 0f, 
endY: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)

Creates a vertical gradient with the given colors at the provided offset defined in the PairFloat,Color.

Modifier.fillMaxSize(fraction: Float = 1f)

It make the Box() or the widget as big as the available to it. For example if we apply it to our Box(), the box will take the whole screen:

@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxSize()
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }
}

We notice that contentAlignment

is Alignment the Child of the Box inside the Box.

We can also make it to fill some percent of max size like this:

.fillMaxSize(fraction = 0.5f)

Bact to the Box():

Box can have more than one Child but children will be stacked one on top of the other.
A box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it. For example:

Box {
    Box(Modifier.fillMaxSize().background(Color.Cyan))
    Box(
        Modifier.matchParentSize()
            .padding(top = 20.dp, bottom = 20.dp)
            .background(Color.Yellow)
    )
    Box(
        Modifier.matchParentSize()
            .padding(40.dp)
            .background(Color.Magenta)
    )
    Box(
        Modifier.align(Alignment.Center)
            .size(300.dp, 300.dp)
            .background(Color.Green)
    )
    Box(
        Modifier.align(Alignment.TopStart)
            .size(150.dp, 150.dp)
            .background(Color.Red)
    )
    Box(
        Modifier.align(Alignment.BottomEnd)
            .size(150.dp, 150.dp)
            .background(Color.Blue)
    )
}

Finally:

We will continue discover more Modifier Functions because most those functions can be applied to most widgets (Composable function).
See you 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

04 Compose - Layout – Box and Modifier

One Past Last Jedi — Mon, 26 Apr 2021 23:54:42 +0000

Introduction:

Composable Functions are the basic building block of Compose. A composable function is a function emitting Unit that describes some part of your UI. The function takes some input and generates what's shown on the screen.
So now, we will talk about Standard layout Composable Functions (or Widget in Flutter) that you will use it and compose it to produce your own Composable Function.

Box:

It is near to Container in Flutter but it has some different. Lets see a simple example of Box():

Example 1:



@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.background(Color.Green)
       )
    {
        Text(text = "Hello Box 1")
    }
}

We notice that the default size of Box() if we not specify, is the size of its children. In this example the size of the Box() is the size of Text(). Moreover, we notice that Box() takes 2 parameters are contentAlignment and modifier. Lets talk first about modifier.

Modifier:

Modifiers allow you to decorate or augment a composable. 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
In Other words, Modifier is an ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.
You can chain Modifier functions together to compose them but the order of modifier functions is significant. Since each function makes changes to the Modifier returned by the previous function, the sequence affects the final result.
Let's see an example of this:

Example 2:



@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.background(Color.Green)
            .padding(all = 30.dp)

       )
    {
        Text(text = "Hello Box 1")
    }
}

We notice that the Modifier function background(Color.Green) call first to give the box background color then we call Modifier function padding(all = 30.dp) to give padding to the box from all side with 30 dp. Now we will reverse the code to see what will happen?!!

Example 3:



@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier.padding(all = 30.dp)
            .background(Color.Green)
       )
    {
        Text(text = "Hello Box 1")
    }
}

See now the padding is white and background color start after the padding.
Next Class we will talk about Modifier function in more details. So see yah 😄

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

01 Compose - Table of Contents

One Past Last Jedi — Sun, 18 Apr 2021 23:30:17 +0000

03 Compose - Managing State in Compose

One Past Last Jedi — Sun, 18 Apr 2021 23:21:44 +0000

What is a State?

It is any value that can change over time in App.

Composition and recomposition and State:

During initial composition, Compose will keep track of the composables that you call to describe your UI in a composition. Then, when the state of your app changes, Jetpack Compose schedules recomposition. Recomposition is running the composables that may have changed in response to state changes, and Jetpack Compose updates the composition to reflect any changes.
A composition can only be produced by an initial composition and updated by recomposition. The only way to modify a composition is through recomposition.

How to Introduce a State or Put memory inside Composable function:

Lets see this code:

class MainActivity : ComponentActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContent {
            ClickCounter()
        }
    }
}

@Composable
fun ClickCounter()
{
    var clicks: Int by remember  { mutableStateOf(value = 0) }

    Button(onClick = { clicks++ })
    {
        Text(text= "I've been clicked $clicks times")
    }
}

To put memory inside Composable function, we use remember keyword and to observe any changes in this memory we use mutableStateOf(value= initial value) and we put initial value inside the observable.

remember{}

is a function that gives composable function memory.

mutableStateOf()

creates a MutableState, which is an observable type in Compose. Any changes to its value will schedule recomposition of any composable functions that read that value.

However,

This remember{} follow the life cycle of the main Activity, so what is the solution of we want to reserve this memory even beyond life cycle of the main Activity?!

There are two solutions:

Save this memory in Bundle by using rememberSaveable{} instead of remember{} like this:

class MainActivity : ComponentActivity()
{
override fun onCreate(savedInstanceState: Bundle?)
{
    super.onCreate(savedInstanceState)
    setContent {
        ClickCounter()
    }
}
}
@Composable
fun ClickCounter()
{
var clicks: Int by rememberSaveable  { mutableStateOf(value = 0) }

Button(onClick = { clicks++ })
{
    Text(text= "I've been clicked $clicks times")
}
}

By using ViewModel like this:
First, you need to add the following in build.gradle(:app) file

implementation "org.jetbrains.kotlinx:kotlinx-collections-immutable-jvm:0.3.4"
implementation "androidx.compose.runtime:runtime-livedata:1.0.0-beta04"
implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha04"

class MainActivity : ComponentActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContent {
            ClickCounter()
        }
    }
}

class ClickCounterViewModel: ViewModel()
{
    private val _clicks = MutableLiveData(0)
    val clicks: LiveData<Int> = _clicks

    fun onClick(newClick: Int)
    {
        _clicks.value = newClick + 1
    }

}

@Composable
fun ClickCounter(clickCounterViewModel: ClickCounterViewModel = viewModel())
{
    val clicks: Int by clickCounterViewModel.clicks.observeAsState(0)

    Button(onClick = { clickCounterViewModel.onClick(clicks) })
    {
        Text(text= "I've been clicked $clicks times")
    }
}

Notice that Compose follow the unidirectional data flow pattern where state flows down from ClickCounterViewModel, and events flow up from ClickCounter.

However, There is a Problem?!!

When a composable holds its own state like in the example above, it makes the composable hard to reuse and test, and it also keeps the composable tightly coupled to how its state is stored.

Then, what is the solution?!

The solution is by something called state hoisting.

What is state hoisting?!

State hoisting is a pattern of moving state up the tree to make that composable function stateless. A simple way to do this is by replacing the state with a parameter and using lambdas to represent events.

In Other words,

you make two overloads composable function (and that is one advantage of Kotlin not like Dart which you cannot do overloads function in Dart)

First Overload Composable function

you make it stateless Composable function like this:

@Composable
fun Foo(value: Type, onValueChange: (Type) -> Unit)
{
    \\ your code here
}

Where value is what was the state.

Second Overload Composable function

you make it stateful Composable function by put the state inside it and then call the stateless composable function from inside stateful composable function like this:

@Composable
fun Foo()
{
    \\ the state is here
    Foo(value= state, onValueChange= {})
}

And the following is real example of State hoisting of ClickCounter() composable function that we do above:

class MainActivity : ComponentActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContent {
            ClickCounter()
        }
    }
}

class ClickCounterViewModel: ViewModel()
{
    private val _clicks = MutableLiveData(0)
    val clicks: LiveData<Int> = _clicks

    fun onClicksChange(newClicks: Int)
    {
        _clicks.value = newClicks + 1
    }

}

@Composable
fun ClickCounter(clickCounterViewModel: ClickCounterViewModel = viewModel())
{
    val clicks: Int by clickCounterViewModel.clicks.observeAsState(0)

    ClickCounter(clicks = clicks, onClicksChange =
    {clickCounterViewModel.onClicksChange(it)})
}

@Composable
fun ClickCounter(clicks: Int, onClicksChange: (Int) -> Unit)
{
    Button(onClick = { onClicksChange(clicks) })
    {
        Text(text= "I've been clicked $clicks times")
    }
}

Now you can use ClickCounter with state or without state if you want.

Important:

State should be modified by events in a composable. If you modify state when running a composable instead of in an event, this is a side-effect of the composable, which should be avoided.

Finally:

You need to import the following in the above examples:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.material.*
import androidx.compose.runtime.getValue
import androidx.lifecycle.ViewModel
import androidx.compose.runtime.livedata.observeAsState
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.viewmodel.compose.viewModel

Summary

Composition =

a description of the UI built by Jetpack Compose when it executes composables.

Initial composition =

creation of a Composition by running composables the first time.

Recomposition =

re-running composables to update the Composition when data changes.

Remember =

stores objects in the composition, and forgets those objects when the composable that called remember is removed from the composition.

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

02 Compose - Overview

One Past Last Jedi — Fri, 16 Apr 2021 15:27:37 +0000

What is Jetpack Compose?

It is a modern native declarative UI for Android like flutter.

How it works?

It works by conceptually regenerating the entire screen from scratch, then applying only the necessary changes. This approach avoids the complexity of manually updating a stateful view hierarchy.

How to build UI by Jetpack Compose?

you can build your user interface by defining a set of composable functions that take in data and emit UI elements. For example:
a Greeting Composable function, which takes in a String and emits a Text widget which displays a greeting message:

class MainActivity : ComponentActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

@Composable
fun Greeting(name: String)
{
    Text(text = "Hello $name")
}

What is Composable function?

All Composable functions must have @Composable, this annotation informs the Compose compiler that this function is intended to convert data into UI.
Composable functions can accept parameters, which allow the app logic to describe the UI.
Composable functions emit UI hierarchy by calling other composable functions.
The function doesn't return anything. Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets.
In Compose's declarative approach, widgets are relatively stateless and do not expose setter or getter functions. In fact, widgets are not exposed as objects. You update the UI by calling the same composable function with different arguments.
Because composable functions are written in Kotlin instead of XML, they can be as dynamic as any other Kotlin code. For example, suppose you want to build a UI that greets a list of users:

@Composable
fun Greeting(names: List<String>)
 {
    for (name in names) 
{
        Text("Hello $name")
    }
}

Composable functions can be quite sophisticated. You can use if statements to decide if you want to show a particular UI element. You can use loops. You can call helper functions. You have the full flexibility of the underlying language. This power and flexibility is one of the key advantages of Jetpack Compose.

What is Recomposition?

It is calling the composable function again with new data. Doing so causes the function to be recomposed--the widgets emitted by the function are redrawn, if necessary, with new data. The Compose framework can intelligently recompose only the components that changed.

Must know when you program in Compose:

Composable functions can execute in any order.
Composable functions can execute in parallel.
Recomposition skips as many composable functions and lambdas as possible.
Recomposition is optimistic and may be canceled.
A composable function might be run quite frequently, as often as every frame of an animation.

================================================

You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.

Previous Class

Next Class

Forem: One Past Last Jedi

07 Compose - Layout – Column + Row + Spacer

Introduction:

Column:

horizontalAlignment:

verticalArrangement:

Row:

Spacer:

Finally:

Table of Contents

06 Compose - Layout – Modifier Functions 2

Introduction:

AbsoluteOffset:

Example 1:

Offset:

Padding:

Important:

AspectRatio:

fillMaxHeight:

fillMaxWidth:

Height:

Width:

Alpha:

Border:

Clickable:

Rotate:

Shadow:

zIndex:

Finally:

Table of Contents

05 Compose - Layout – Box and Modifier Functions 1

Introduction:

Modifier.Background():

1/

2/

color:

1/ By choose from default color like this:

2/ Or by choose red, green, blue alpha as Float number [0f, 1f] like this:

3/ Or by choose red, green, blue alpha as Int number [0, 255] like this:

4/ Or by choose Hex-Format like this:

Shape:

brush:

1/

2/

3/

4/

5/

6/

7/

8/

9/

10/

Modifier.fillMaxSize(fraction: Float = 1f)

We notice that contentAlignment

We can also make it to fill some percent of max size like this:

Bact to the Box():

Finally:

Table of Contents

04 Compose - Layout – Box and Modifier

Introduction:

Box:

Example 1:

Modifier:

Example 2:

Example 3:

Table of Contents

01 Compose - Table of Contents

TABLE OF CONTENTS:

03 Compose - Managing State in Compose

What is a State?

Composition and recomposition and State:

How to Introduce a State or Put memory inside Composable function:

remember{}

mutableStateOf()

However,

There are two solutions:

However, There is a Problem?!!

Then, what is the solution?!

What is state hoisting?!

In Other words,