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).
1 | class CustomButton : Button {//...} |
The main entries for Views are constructors, so we need to override the default constructors:
1 | constructor(context: Context) : super(context) {} |
The “one argument constructor” is used when creating an instance with the new keyword, which means creating the view in code.
1 2 3 4 5 6 7 | constructor(context: Context, attrs: AttributeSet) : super(context, attrs) { //... } constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { //... } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <resources> <declare-styleable name="CustomButton"> <attr name="pressed_color" format="color"/> <attr name="unpressed_color" format="color"/> <attr name="round_radius" format="dimension"/> <attr name="btn_radius" format="dimension"/> <attr name="btn_shape_type" format="enum"> <enum name="circle" value="0"/> <enum name="rectangle" value="1"/> </attr> </declare-styleable> <!--.--> <resources> |
We have created our custom attributes within the res.xml file.
3. Customize your view
1 2 3 4 5 6 7 | <io.bachirio.CustomButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:pressed_color="@color/login_button_pressed" app:btn_shape_type="rectangle" app:unpressed_color="@color/login_button_unpressed" /> |
After defining your desired attributes, you should use your attributes in your XML layout
1 2 3 4 5 | val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomButton) pressedColor = typedArray.getColor(R.styleable.CustomButton_pressed_color, resources.getColor(R.color.pressed_color)) unPressedColor = typedArray.getColor(R.styleable.CustomButton_unpressed_color, resources.getColor(R.color.unpressed_color)) |
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 official website kotlinlang.org.
- Course in safariBooks made by Hadi Hariri.
- Useful Articles in Medium.
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.