Your First Kotlin Android App: Polishing the App

If you take a look at the slider, it still has the default appearance of a basic slider.

Let’s change that and give it a custom design where you have a custom thumb and progress indicator just like the screenshot on the slide.

To achieve the custom thumb, you will make use of a drawable. A Drawable is just any visual resource that can be drawn on the screen. So a shape, an icon or an image are all classified as drawables in Android.

The first thing you’re going to do is to add the custom thumb image. The thumb image you will use has already been added to the resources folder inside the materials for this episode. For this click on the Resource Manager tab on the left side of the tool window bar. The Resource manager window shows us all the different resources used in our project.

You can see the drawables provided for us when we create a project. You can see the colors, strings, layouts and other resources in your app. You can also add more resources from this window.

Do note that the colors here are the ones defined in the colors.xml file and not the ones we specified in the Color.kt file.

To add a drawable, make sure the drawable tab is selected then click on the plus icon at the top-left corner of the window. Then select “Import Drawables.” This opens up a finder window on mac or the file explorer on windows for you to search for the image to import. You should have the thumb file in the resources folder of the download materials so you should locate it in the finder or file explorer.

Mine is on my desktop so I’ll head over there and select the nub image file. This adds the image and asks us to set up a few things.

For the qualifier type, if you click on it, you will see different qualifiers. For example, if you want to add this drawable based on the screen orientation, you will select the screen orientation qualifier and then set it to maybe landscape.

But for this drawable, you would select density as its qualifier. For starters, density here just refers to the screen size and the medium density is automatically selected by default. We’ll leave it that way. You can add multiple drawables for different screen sizes. So if you’re also designing for very large screens, you could add a bigger nub image and select a higher density. With this, Android would automatically use the bigger nub on big screen devices.

Okay, that’s enough talk on device densities.

I’ll go ahead and select next. It shows us the save location and you can see the second portion of the folder name starts with md which signifies medium. So android groups the drawables into folders based on the density qualifier. Finally, I’ll click on Import. And you can see the nub is added to the drawables section.

I’ll close up the Resource manager window. Then head over to the TargetSlider.kt file.

And add in the thumb lambda argument like so:

Slider(
  //...
  thumb = {
    Image(
      modifier = Modifier.size(100.dp),
      painter = painterResource(id = R.drawable.nub),
      contentDescription = "Slider Thumb"
    )
  }
)

We have an error on the Slider. Let’s hover over it. It says that “This material API is experimental.” This is expected as the Slider that accepts a custom thumb is still an experimental composable and might likely change. But we need this for this feature so let’s click on “Opt in for ExperimentalMaterial3Api” link. If we scroll to the top, you can see it adds in an @OptIn annotation which tells Android Studio that this composable wants to use this feature so it can let us proceed without a warning.

Lets scroll back down.

Alright, let’s break down the code. The thumb lambda expects a composable function and that is what we do here. We pass in an Image composable and give it a size of 100.dp using a modifier. We then use the painter argument to pass in the drawable we just added using the painterResource function. And finally we pass in a contentDescription string for accessibility purposes. And remember adding stings directly is not the recommended practice so lets extract the contentDescription to the strings.xml file.

Click on the string. Then the bulb icon. Then select “Extract string resource.” Enter slider_thumb_description as the name. Then tap the OK button.

Before we go further, let’s try it out. Go ahead and run your app.

You can see the thumb appears. Move it around to see how it looks. Then tap the hit me button. Everything works fine and you can even see that our AlertDialog also takes in styling from our custom color palette. Cool!!!

Finally let’s change up the appearance of the progress bar to a more custom look. The bar in a Slider is known as the track. We’ll be creating a custom track with rounded corners.

Enter the following code below the thumb argument:

track = {
  Box(
    modifier = Modifier
    .height(8.dp)
    .fillMaxWidth()
    .background(
      color = MaterialTheme.colorScheme.primary,
      shape = MaterialTheme.shapes.small
    )
  )
},

In here we use a Box to draw a shape. We don’t specify any content for the Box because we just want a shape and nothing else so the box just acts like a container for the styling. We use a modifier to give it a height of 8.dp, then use the fillMaxWidth() to make it take all of the horizontal space available.

Finally, we set the background to red which is the primary color and also give it a small shape which results to a RoundedCornerShape of 8.dp. And if you noticed, we have a chain of modifiers so those modifications would be added one after the other.

Go ahead and run your app.

And there you have it, the Slider’s track is now styled with a red color and rounded corners.