JETPACK COMPOSE

Design with Jetpack Compose: Part II

Better design in less time

This is the second part of a series : Jetpack Compose

If you have missed the first part, you can read it here :

Jetpack Compose: Part 1 — Design

In this part, we are moving from a basic design to some complex UI.

Prerequisite :

1. Basic knowledge about Jetpack Compose.
2. Must have read Part I of this series.

Dependencies

These configuration are for compose version : 0.1.0-dev13

• Download Android Studio in which compose is available. Right now, it is available in Canary version.

android {
    ...
    buildFeatures {
        compose true
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    composeOptions {
        kotlinCompilerExtensionVersion "0.1.0-dev13"
    }
}dependencies {
    ...  
       
    implementation 'androidx.ui:ui-core:0.1.0-dev13'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev13'
    implementation 'androidx.ui:ui-layout:0.1.0-dev13'
    implementation 'androidx.ui:ui-material:0.1.0-dev13'
}

What we are building now ?

Final piece

This UI will be divided in 4 parts:

1. Toolbar
2. Header
3. Menu
4. Scrollbar

Before starting, import all the icons which you will need during the development from here

Toolbar

@Composable
fun toolbar() {
    Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, end = 20.dp)
            .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween) {
        Image(
                vectorResource(id = R.drawable.ic_baseline_keyboard_backspace_24)
        )
        Image(
                imageResource(id = R.drawable.menu),
                modifier = Modifier.width(30.dp).height(30.dp)

        )
    }
}

Things to remember :

1. horizontalArrangement : With this, we are telling Android to keep the space in between of the components. This will result in placing the components at the start and end of the screen.
2. vectorResource : This will display a vector image i.e the one which import from vector asset in drawable folder.
3. imageResource : This will display an image asset.

Note: If we try to display an image asset from vectorResouce or vice versa then your app will crash.

Header

@Composable
fun header() {
    Column {
        showBoldText(text = "The main Food")
        Text(
                text = "12 menus", color = Color.Gray, fontSize = TextUnit.Sp(15),
                fontFamily = FontFamily.Default,
                style = TextStyle(fontWeight = FontWeight.Normal),
                modifier = Modifier.padding(top = 10.dp, start = 25.dp)
        )
    }
}
@Composable
fun showBoldText(text: String) {
    Text(
            text = text, color = Color.Black, fontSize = TextUnit.Sp(25),
            fontFamily = FontFamily.Default,
            style = TextStyle(fontWeight = FontWeight.Bold),
            modifier = Modifier.padding(top = 30.dp, start = 20.dp)
    )
}

Menu

@Composable
fun menuOptionList() {
    Row(horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier.fillMaxWidth().padding(start = 20.dp, end = 20.dp, top = 40.dp),
        verticalGravity = Alignment.CenterVertically) {
        menuOptionItem(image = R.drawable.salad, color = Color(red = 230, green = 230, blue = 250))
        menuOptionItem(image = R.drawable.burger,color = Color(red = 249, green = 249, blue = 249))
        menuOptionItem(image = R.drawable.pizza, color = Color(red = 249, green = 249, blue = 249))
        menuOptionItem(image = R.drawable.fries, color = Color(red = 249, green = 249, blue = 249))
    }
}
@Composable
fun menuOptionItem(image: Int, color: Color) {
    Box(backgroundColor = color,
        modifier = Modifier
            .clip(shape = RoundedCornerShape(8.dp))) {

        Image(
            imageResource(id = image),
            modifier = Modifier.tag("image")
                .padding(20.dp)
                .preferredWidth(30.dp)
                .preferredHeight(30.dp)
                .gravity(Alignment.CenterVertically)
                .gravity(Alignment.CenterHorizontally))
    }
}

Box — It is like a container.

Scrollbar

@Composable
fun bannerList() {
    HorizontalScroller(modifier = Modifier.padding(top = 30.dp, start = 10.dp)) {
        Row {
            bannerItem(image = R.drawable.background_one)
            bannerItem(image = R.drawable.background_two)
            bannerItem(image = R.drawable.background_one)
        }
    }
}

@Composable
fun bannerItem(image: Int) {
    Card(modifier = Modifier
        .height(190.dp)
        .wrapContentWidth()
        .padding( start = 10.dp, end = 20.dp),
        shape = RoundedCornerShape(8.dp)
       ) {
        Image(
            imageResource(id = image),
            modifier = Modifier.width(300.dp)
               )
    }
}

HorizontalScroller/VerticalScroller is same like scrollView in normal XML layout.

There should be a row / column placed in HorizontalScroller/VerticalScroller.
In that row/column, you can place your items.

The components which we have discussed are the ones which are used in our UI.

Task : If you think, you have understood enough then you should try to build the rest of the layout. Check out your answer after finishing up the layout.

Bottom List

@Composable
fun bottomItemList() {
    HorizontalScroller(modifier = Modifier.padding(top = 30.dp,
            start = 10.dp, bottom = 40.dp)) {
        Row {
            bottomItem(image = R.drawable.item_one)
            bottomItem(image = R.drawable.item_two)
            bottomItem(image = R.drawable.item_three)
            bottomItem(image = R.drawable.item_one)
        }
    }
}

@Composable
fun bottomItem(image: Int) {
    Card(modifier = Modifier
            .height(200.dp)
            .width(150.dp)
            .padding( start = 10.dp, end = 20.dp),
            shape = RoundedCornerShape(8.dp)
    ) {
        Image(
                imageResource(id = image),
                modifier = Modifier.width(300.dp)
        )
    }
}

Preview

@Preview
@Composable
fun main() {
    VerticalScroller {
        Column {
            toolbar()
            header()
            menuOptionList()
            bannerList()
            showBoldText(text = "Popular this week")
            bottomItemList()
        }
    }
}

MainActivity

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

If you know some more smatter approach, please share it in comments.

I hope this blog must have helped you in some way. Feel free to reach out to me for any queries or suggestions.

Thank you!