Illuminate your path using Kotlin to build your new Android custom components

Kotlin is the new chaos that suddenly penetrated all the tech teams all over the world. Google fully supported Kotlin, integrated it into their Android Studio IDE and considered it a stable language. As a result of this movement, soft or even brute actions need to be considered to be fully operational and familiar with Kotlin. 

Ally with trees

To contribute to this movement, I decided to write an article combining Android and Kotlin. This isn’t a step by step Kotlin tutorial, but it’s a kind of helper for Android developers migrating to Kotlin. More specifically for those who want to build their new custom views using Kotlin, and for those who are willing to externalize their custom UI components into a separate library (usually big companies do that).

For all new Kotlin Developers, I’ll attach some links to unearth and discover.

I will begin by talking about custom views and how they are developed. Afterwards, I am going to build a custom component using Kotlin and dig into more details about different building blocks of custom views.

Custom views

When developing your Android application you usually use the built-in widgets, and when you stumble upon a complex UI you can feel the constraints and limitations. So to alleviate the burden and have more freedom, the Android API gives you the ability to use the already existing widgets and create your own sculptures.

To create our custom component we can use one of the Android UI’s building blocks: Views or ViewGroups. The View is for drawing and event handling, and is the base class for all Android widgets (Buttons, Imageviews, Space, ProgressBar). The ViewGroup is the base class for layouts that can contain and hold other views or view groups. See the picture below for more details.

View is the parent of all Android UI Components

Creating our custom component step by step

The main important parts of every Android View drawing process are Measurements, Laying out and Drawing.

The Measure phase: Each parent (container) provides its children the constraints to respect, and the children decide how much to occupy depending on those constraints.

The Layout phase: Each parent is aware of how the children will be positioned.

The Draw phase: Once Measure and Layout phases are complete, the parent draws itself and requests its children to draw themselves.

Measure, Layout, Draw = Measure, Layout, Build

All the three methods above are present in the Android API as follows: onMeasure() ,onLayout(), onDraw() .

You may need to use all three methods if you are building a fully customized UI component, but in our examples, we are going to be interested in the onDraw method.

1. Overriding the View and customizing it

After choosing your custom view (View, Button, Textview), it’s time to inherit its properties and override its methods (I chose Button as the desired view to customize).

The main entries for Views are constructors, so we need to override the default constructors:

The “one argument constructor” is used when creating an instance with the new keyword, which means creating the view in code.

The other constructors -including the two and three arguments constructors- are used when inflating the views from XML, the AttributeSet are the attributes of the XML tag of that view, the defStyleAttr is for styling the component.

There is a more reduced approach mentioned in this article, by Antonio Leiva for overriding the view constructors using @JVMOverloads Annotation.

2. Define your custom attributes

When creating a simple built-in view, you specify many attributes. Like the height, the width, the text for text views and so on. Those attributes are already created with the Android API, so to create our custom attributes for our custom view is simple:

We have created our custom attributes within the res.xml file.

3. Customize your view

After defining your desired attributes, you should use your attributes in your XML layout

We retrieve the XML attributes using the AttributeSet attributes provided via the constructor. We can’t access them directly, but we can get them using the method above. In the example, we get btn_shape_type, pressed_color and unpressed_color.

You can find all the code above hosted in my personal Github repo as a growing Library. The article and Library will be updated regularly.

Please feel free to reach out to me for any update related to this library, or contribute directly. I hope to make it a reference for customized dazzling buttons using Kotlin.

 Resources to start Learning Kotlin

The best thing to help you grow your coding muscles is by training and doing various coding movements, so think about a small project and start Kotling it.

Published 2018-01-17