I love learning new things. That was the reason for doing tutorials, I was learning and then sharing what I learned. It helped me evolve as a designer. From time to time I go back to that and you probably remember a couple of weeks ago when I posted a Photoshop tutorial on how to create the iPhone SE Wallpaper. Then I decided to do it in SwiftUI. I shared that one last week. This week I decided to do the same but this time in Jetpack Compose for Android. I’ve never used it before but in a way it’s quite similar to SwiftUI, a bit more verbose, but the idea is the same. So check it out.
Step 1
Start a new Android Studio project and select Compose activity.
Step 2
Now let’s create the rectangle to use as our base.
@Composable fun Bar() { Box( modifier = Modifier .fillMaxHeight() .fillMaxWidth() .clip(RectangleShape) ) ) }
Step 3
In order to add the gradient I found out that I need a way to convert hexadecimal to jetpack color. A good Google Search and StackOverflow had the answer. I used this object that does the job.
object HexToJetpackColor { fun getColor(colorString: String): Color { return Color(android.graphics.Color.parseColor("#" + colorString)) } }
Step 4
For the gradient you use the .background modifier with “brush”, then just add the colors you want in hexadecimal.
@Composable fun Bar() { Box( modifier = Modifier .fillMaxHeight() .fillMaxWidth() .clip(RectangleShape) .background( brush = Brush.verticalGradient( colors = listOf( getColor("005a3ec3"), getColor("5a3ec3"), getColor("eba5c5"), getColor("e1d4b7"), getColor("e9b74c"), getColor("cf1403"), getColor("00cf1403") ) ) ) ) }
Step 5
Now let’s create another composition and add the multiple bars. To do that I added a Row() then inside of the row I added a Column() which I will manipulate the weight and the height. Inside of that column I will add the bar.
Here’s the code. Notice I added a gradient background for the row to match the original wallpaper.
@Composable fun BarStackManual() { Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier .fillMaxSize() .background( brush = Brush.verticalGradient( colors = listOf( getColor("1a0047"), getColor("300604") ) ) ) ) { Column( modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat()) ) { Bar(shape = RectangleShape) } } }
Step 6
Add as many Columns (bars) you want. Make sure you change the .fillMaxHeight() fraction and the .zIndex() so the big ones are above the smaller ones. Here’s the sample:
@Composable fun BarStackManual() { Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier .fillMaxSize() .background( brush = Brush.verticalGradient( colors = listOf( getColor("1a0047"), getColor("300604") ) ) ) ) { Column( modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.9f).zIndex((5).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.8f).zIndex((4).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.7f).zIndex((3).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.6f).zIndex((2).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.7f).zIndex((3).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.8f).zIndex((4).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(.9f).zIndex((5).toFloat()) ) { Bar(shape = RectangleShape) } Column( modifier = Modifier.weight(1f).fillMaxHeight(1f).zIndex((6).toFloat()) ) { Bar(shape = RectangleShape) } } }
Conclusion
That’s pretty much it. You can make the bars dynamic by creating a for loop. But then it’s up to you. This was just a little example of how fun it’s to build something in Jetpack Compose. You can download the full code on Github.