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 :
- Basic knowledge about Jetpack Compose.
- 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 ?
This UI will be divided in 4 parts:
- Toolbar
- Header
- Menu
- 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 :
- 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.
- vectorResource : This will display a vector image i.e the one which import from vector asset in drawable folder.
- 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!
