Project Description

This project is a crash course of compose UI , how to build views using compose ui instead of xml views.

compose ui screenshots:

Calculator App compose UI :

you can find code here . CalculatorActivity .

Compose UI

Jetpack Compose UI it is a new way of building ui views in android development.in compose ui we use Kotlin to build UI instead of using XML . compose UI is called Declarative UI that use states, it is a new way of thinking.

Compose : how it works ?

Composable function run sequentially.
For every composable you can add modifiers.
Composable function is a regular function annotated by @Composable , this enable other composable within it .
with composable , an Activity remains the entry point to an android app.
With composable , you use setContent() to define your layout but instead of using XML ,you use a composable functions within it.
In compose you don't hide UI element, simply you don't add in composition. so they are not added to the UI tree that compose generate.

Recomposition:

Compose apps transform data into UI by calling composable functions , if your data changes, compose re-execute these function with the new data, creating an updated UI.

State and MutableState are interfaces that hold some value and trigger UI updates (recompositions) whenever that value changes.

State Hoisting :

In Composable functions , state that is read and modified by multiple function should be live in a common ancestor - this process is called state hoisting . to hoist means to elevate or raise.

making state hoistable avoid duplicate duplicate state and introducing bugs ,helps reuse composable ,making composable easier to test.

Persisting State:

Imagine the case when you run the app and click buttons then you rotate ,then you will lose all states . the remember function works ** only as long as the composable is kept in the Composition ** . so when you rotate , the whole activity is restarted so all state is lost.

Solution :

instead of using remember you can use rememberSaveable , this will save each state surviving Configurations changes (like rotation) and process kill.

   var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

Notes :

When importing classes related to Jetpack Compose in this project, use those from:

androidx.compose.* for compiler and runtime classes.
androidx.compose.ui.* for UI toolkit and libraries.

LazyColumn and LazyRow are equivalent to RecyclerView in Android Views.

the LazyColumn API provides an items element within its scope, where individual item rendering logic is written.

Important elements in Compose :

modifier parameter :

Modifiers tell a UI element how to lay out, display, or behave within its parent layout. there is a list of compose modifier . List of Compose modifiers.

Multiple Modifiers :

to add multiple modifiers to an element , you simply chain them .

    modifier = Modifier.fillMaxWidth().padding(4.dp)

Weight Modifier:

the weight modifier makes the element fill the available space.making it flexible, effectively pushing away all other elements that doesn't have weight.which are called inflexible.

Row(modifier = Modifier.padding(24.dp)) {
    Column(
        modifier = Modifier.weight(1f)
    ) {
        Text(text = "Hello")
        Text(text = "$name!")
    }
    ElevatedButton(onClick = { /*TODO*/ }) {
        Text(text = "Show more")
    }
}

Basic compose designs:

Two text views above each other (Vertical Orientation) :

Column {
    Text(
        text = "Hello World",
        color = Color.Red,
        fontSize = 30.sp
    )
    Text(
        text = "Hello Mina",
        color = Color.Blue,
        fontSize = 30.sp
    )
}

Two text views above each other in center of the screen (Vertical Orientation) :

  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "Hello World",
        color = Color.Red,
        fontSize = 30.sp
    )
    Text(
        text = "Hello",
        color = Color.Blue,
        fontSize = 30.sp
    )
}

Two text views beside each other (Horizontal Orientation) :

Row(
    horizontalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "Hello World",
        color = Color.Red,
        fontSize = 30.sp
    )
    Text(
        text = "Hello",
        color = Color.Blue,
        fontSize = 30.sp
    )
}

How to create FrameLayout (BOX):

  Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "Hello World",
        color = Color.Red,
        fontSize = 30.sp,
        modifier = Modifier.align(Alignment.Center)
    )
}

Create Image with source:

  Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = null,
    modifier = Modifier.background(Color.Black)
)

Create Icon with image vector:

     Icon(imageVector = Icons.Default.Add, contentDescription = null)

How to change composable visibility based on conditional statement:

 if (name.length > 5) {
    Icon(imageVector = Icons.Default.Add, contentDescription = null)
}

How to display composable 10 times in column horizontally :

 Column {
    for (i in 1..10) {
        Icon(imageVector = Icons.Default.Add, contentDescription = null)
    }
}

How to create a simple list of 10 items :

LazyColumn(Modifier.fillMaxSize()) {
    items(count = 10)
    { i ->
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = null,
            modifier = Modifier.size(100.dp)
        )
    }
}

How to setup Jetpack Navigation for list and details screen in compose :

it is really easy and convenient to setup list and details screens in compose UI .

val navController = rememberNavController()
                NavHost(
                    navController = navController,
                    startDestination = "pokemon_list_screen"
                ) {
                    composable("list_screen")
                    {
                        ListScreen(navController = navController)
                    }
                    composable(
                        "details_screen/{dominantColor}/{name}",
                        arguments = listOf(navArgument("dominantColor") {
                            type = NavType.IntType
                        }, navArgument("name") {
                            type = NavType.StringType
                        })
                    )
                    {
                      DetailsScreen(navController = navController)

                    }
                    }

Resources :

Jetpack Compose basics.

The Jetpack Compose Beginner Crash Course .

How to Build a Calculator with Jetpack Compose

How to Implement Swipe to Delete with Material3.

How to Build a Multiline Text Field With Hint

Next steps :

Jetpack Compose for Android Developers

Thinking in Compose

minashaker2p / compose-ui-crash-course Goto Github PK

compose-ui-crash-course's Introduction