Jetpack Compose: Getting Started

Thus far, we have been writing our code in different files contained within different packages.

As our app grows, we will have more and more files and packages. This can make it difficult to find the code that we are looking for.

Our current app has our files organized in the following way:

Error: This image is missing a width attribute

Please provide one in the form of ![width=50%](https://user-images.githubusercontent.com/23483887/135744985-0b0b8b0a-5b0a-4b0a-8b0a-9b0a0b0a0b0a.png)

The image has been hidden until this issue is resolved.

The data package contains files that will be used to store data that will be used in our app.

Currently, it contains two files:

• Food.kt - This file contains the Food data class, which is used to represent a food item in our app. It also has a function that returns a list of Food objects.
• FoodCategories.kt - This file contains the FoodCategory data class, which is used to represent a food category in our app. It also has a function that returns a list of FoodCategory objects.

The components package, found within ui, contains files that will be used to store Composables that will be used in our app. These Composables will be used to build out the UI of individual screens in our app.

Individual components are usually in independent files. However, if a component is only used by another component, it can be placed in the same file as the component that uses it.

It currently has three Composables:

• FoodCategoryItem.kt - This file contains the FoodCategoryItem Composable, which is used to display a single food category in our app.
• FoodItem.kt - This file contains the FoodItem Composable, which is used to display a single food item in our app.
• ProfileBar.kt - This file contains the ProfileBar Composable, which is used to display the profile bar in our app.

Bottom Navigation Bar

Let us create a new component that will be used to display the bottom navigation bar in our app.

We shall begin by creating a new file called BottomNavBar.kt in the components package. This will hold all the Composables that will be used to display the bottom navigation bar.

Create a new Composable known as BottomBarItem. This Composable will be used to display a single item in the bottom navigation bar.

@Composable
fun BottomBarItem(
    modifier: Modifier = Modifier,
    title: String,
) {
  Text(
      text = title,
      modifier = modifier,
      fontStyle = FontStyle.Italic,
      fontSize = 10.sp)
}

Next, create a new Composable known as BottomNavBar. This Composable will be used to display the bottom navigation bar.

@Composable
fun BottomNavBar() {
  Box(modifier = Modifier
      .padding(8.dp)
      .fillMaxWidth()){

    Row(modifier = Modifier
        .fillMaxWidth()
        .height(56.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically) {

      BottomBarItem(title = "Home")

      BottomBarItem(title = "Search")

      BottomBarItem(title = "Profile")

    }

  }
}

The screens package, found within ui, contains files that will be used to store Composables that will be used to build out the UI of individual screens in our app.

It currently has one Composable:

• HomeScreen.kt - This file contains the HomeScreen Composable, which is used to display the home screen in our app.

Let us create a new Composable known as FoodDetailScreen. This Composable will be used to display the food detail screen in our app.

This page will be used to display the details of a single food item.

Food Detail Screen

Let us create a new file inside the screens package called FoodDetailScreen.kt. This file will contain the FoodDetailScreen Composable.

@Composable
fun FoodDetails(
    foodId: Int? = 0
) {
    val food = getFood()[ foodId ?: 0]

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ){

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .paint(
                    painter = painterResource(id = food.banner),
                    contentScale = ContentScale.FillBounds
                )
        )

    }

}

This results in us having a page that will have a background banner image at the top.

Theme

The theme package, found within ui, contains files that will be used to store the theme of our app.

Themes usually consist of colors, typography, and shapes. They are used to define the look and feel of our app. We are currently using a Material Design 3 theme. Our theme is known as AppTheme.

This package currently has two files:

• Color.kt - This file contains the colors that are used in our app.
• Theme.kt - This file contains the AppTheme Composable, which is used to define the theme of our app.

In this session, we learned how to organize our code by extracting Composables into separate files. We got to understand what each folder in our app is used for.

In the next episode, we will learn how to process user text input. We will explore the TextField Composable and learn how to use it to process user text input.