Illuminate your path using Kotlin to build your new Android custom components
Kotlin is the new chaos that penetrated suddenly all the tech teams all over the world since google have fully supported it and integrated it within their Android Studio IDE and considered it as a stable language, and as as a result of this movement, soft -or even brute- actions need to be considered in order to be fully operational and familiar with Kotlin. To contribute to this movement, I decided to write an article combining android and Kotlin. This isn’t not a step by step Kotlin tutorial, but it’s a kind of helper for Android developers migranting to Kotlin who want to build their new custom views using Kotlin, and also for Android developers who are willing to externalize their custom UI components into a separate library (usually big compagnies do that).
For the new Kotlin Developers I’ll attach some links for you 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 feel the constraints and the 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 it’s the base class for all android widgets (Buttons, Imageviews, Space, ProgressBar) , and the ViewGroup is the base class for layouts that can contain and hold other views or view groups. See the picture bellow for more details .
Creating Our custom component Step by Step
The Main and important parts of every Android view drawing process are measurements, Laying out and Drawing.
The Measure phase: Each parent (container) gives to it’s children the constraint to respect and the children decide what to occupy vis à vis 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.
All the three methods above are present in the android API as follows: onMeasure() ,onLayout(), onDraw() .
you may need to use all the 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. Step one: 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).
class CustomButton : Button {//...}The main entries for Views are constructors so we need to override the default constructors:
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.
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, it’s simple:
<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
<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 now you should use your attributes in your XML layout
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 above method. In the example above we get btn_shape_type, pressed_color and unpressed_color.
So this is my little story about building a custom view using Kotlin.
You can find all the code above hosted in my personnel 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 for the 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 that will help you grow your coding muscles is by training and doing various coding movement so think about a small project and start Kotling it .
Credits
Figure 2 : Source
