The Startup
Published in

The Startup

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 :

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!

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Lifecycle for Android Developers (Part 3)

ViewBinding with Kotlin Property Delegate

Modern Security in Android (part 3)

READ/DOWNLOAD%* Learn Android Studio: Build Androi

Microsoft Teams — Designing for Emerging Markets —  Part 1 (Network Profile)

Wild Storage | Part 2 — Threading and Concurrency

Android User Preferences Simplified — Preferences DataStore with Hilt

Android Drawable with Custom States

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Himanshu Choudhary

Himanshu Choudhary

Android Developer @BluSmart

More from Medium

Automatic Scrolling To Composable On Focus Change With BringIntoViewRequester in Jetpack Compose

How to Show Snackbars Across Multiple Screens in Jetpack Compose

Safe compose arguments: An improved way to navigate in Jetpack Compose — Part 2

Koin for Compose proposal (Jetpack and Multiplatform)