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 up for a custom design where you have a custom thumb and progress indicator just like the screenshot on the slide.

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. You’ll be using another approach to add the image drawable.

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 we added and the ones 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.

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 finder on mac or the file explore 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 densitites.

I’ll go ahead and select next. It shows us the save locations 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 layout file. Inside here, I’ll navigate to the code for the seekbar. Then set the thumb to the nub drawable like so:

android:thumb="@drawable/nub"

The height of the seekbar increases because of the size of the thumb. Before we go further, let’s try it out. Go ahead and run your app.

Move the thumb around to see how it looks. You can see that the thumb cuts off at the start and the end of the seekbar. Also, the thumb pushes the game controls down.

Let’s fix these problems now. For the game controls, all you need to do it to set the vertical bias of the hit me button to zero. This will align the button to the start of the vertical constraint. Do that now. And you can see the button and every other view below it is pushed up. This is because we constrained the start over button to the bottom of the hit me button. And once the hit me button moves, every other view in the horizontal chain we created moves accordingly. Thats the power of constraint layout.

Okay, let’s solve the cut off slider thumb. First let’s try add some padding to the start and end of the seekbar like so:

android:paddingStart="40dp"
android:paddingEnd="40dp"

Run the app. The thumb is no longer cut off at the start and end of the seekbar. But notice that there’s an annoying white space around the thumb. To solve that set the splitTrack attribute to false:

android:splitTrack="false"

Setting the split track to false removes the gap from the thumb.

Finally let’s change up the appearance of the progress bar to a more custom look. For this, you’ll create a drawable. Let’s do this from the resource manager window. So go ahead and open it up.

Make sure you’re in the drawable tab then click on the plus icon. Then select “Drawable Resource File.” Name it seekbar_progress Then click OK. Close up the resource manager window.

For the circular button, we used a selector but since this is a something different, we wont be using a selector element. Instead you will use a layer-list element. And as its name suggests, it takes in a collection of drawables and draws them on top of each other. Let me show you what I mean. Replace the selector with the following code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="8dp"/>
            <size android:height="15dp" />
            <solid android:color="@color/grey" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <size android:height="15dp" />
                <solid android:color="@color/red_accent" />
            </shape>
        </clip>
    </item>
</layer-list>

The first item is the background of the seekbar and it’s id is important. You give it an id of background and android knows that if this is assigned as a progress drawable for the seekbar then this item should be the background. The item contains a rectangle shape with a corner radius of 8 to give some roundness on the edge. It sizes it to a height of 15dp and with a grey color.

We do something similar for the progress item but this time around, we give it a red color. We also wrap it with a clip element to create a masking effect. And do note that this item has an id of progress.

Okay, you need to use this drawable for the seekbar. Head over to the seekbar code in the layout file. Then add in the following attribute:

android:progressDrawable="@drawable/seekbar_progress"

Run your app. And you have the progress and background showing their respective colors.

Now the code for the seekbar’s progress drawable was added to just show you how to fully style a seekbar using drawables. For bullseye, you want the entire progress bar to have a red color.

So, go back to the drawable file and copy and paste the layer-list. Then comment out the bottom one by selecting it then press Cmd + /. Then update the one at the top by removing the progress item so it just has the backgrond item. Then give it a red color.

Run your app once again. And there you have it, the seekbar’s track is now styled with just a red color.