JETPACK COMPOSE

Design with Jetpack Compose: Part II

  1. Must have read Part I of this series.

Dependencies

These configuration are for compose version : 0.1.0-dev13

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'
}
Final piece
  1. Header
  2. Menu
  3. Scrollbar

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)

)
}
}
  1. vectorResource : This will display a vector image i.e the one which import from vector asset in drawable folder.
  2. imageResource : This will display an image asset.

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))
}
}

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)
)
}
}

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()
}
}
}

Android Developer @BluSmart

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