Summary

This article discusses how to create a Horizontal Custom TextView in Android Kotlin, covering the basics of custom views and the benefits of creating custom views for specific needs.

Abstract

In this article, the author explains the concept of custom views in Android Kotlin, emphasizing their importance for Android developers. Custom views allow developers to extend pre-existing views according to specific needs. The article focuses on creating a Horizontal Custom TextView, which includes an ImageView and two TextViews placed horizontally. The author guides the reader through setting up an Android project in Android Studio, creating a layout for the custom view, defining attributes in an attrs.xml file, and extending the LinearLayout class in Kotlin. The author also explains how to set values from both XML and Kotlin files and provides code examples.

Bullet points

Custom views are crucial for Android developers, allowing them to extend pre-existing views according to specific needs.
This article covers creating a Horizontal Custom TextView with an ImageView and two TextViews placed horizontally.
Set up an Android project in Android Studio using the empty view Activity and enable view binding in the build.gradle file.
Create a layout for the Horizontal Custom TextView using an ImageView and two TextViews placed horizontally.
Define attributes in an attrs.xml file inside the values folder to set values through XML.
Extend the LinearLayout class in Kotlin and define constructors for the custom view.
Set the orientation of the Linear Layout to horizontal and define binding to get the IDs of the views.
Initialize a variable to receive values from the XML and pass the header text and leading icon from the XML.
Set the respective values to the view using binding.
Set values from the Kotlin file by writing public methods such as setValue() and setHeaderText() and calling these functions in the MainActivity.kt file.

Custom Views in Android Kotlin

Custom views is one of the most crucial concept one should know as an Android Developer. We have many pre-defined built-in views in Android Framework such as TextView, EditText, Button, but if we want to create our own custom views we can also do that. Let’s first understand what are custom views,

Custom Views are the user interface that the user’s create by extending one of the the pre-existing views according to the specific needs.

In this article, we will understand how to build a Horizontal Custom Text view. I picked this horizontal custom view as this is easy to implement and understand. One of the advantages of creating a custom view is that if we have to use this in many places throughout the project then in each and every place we don’t have to write the whole layout code.

Now let’s deep dive and design Horizontal custom TextView,

First we will create an Android Project in Android Studio using the empty view Activity. It will be better if you implement view binding, for this you go to the build.gradle inside the Gradle Scripts and set viewBinding and dataBinding as true and add the kotlin Kapt plugin.

Now we will create layout for our Horizontal Custom TextView. In this custom text view, we have have an ImageView and two TextViews placed horizontally.

For setting the values through XML inside our custom view we define a Layout Resource File attrs.xml file inside the values folder.

Let’s define a our class HorizontalCustomTextView.kt which extends Linear Layout. As each layout extends three types of constructors we define them.

As our orientation is horizontal in Linear Layout so we set the orientation as Horizontal. Then we define the binding to get the id’s of our views.

Now for getting the values from the XML which we can get through the attrs.xml we initialize a variable a. We will pass the header text and the leading icon from the XML.

We will receive the values from the xml using a.getResourceId from image & getString for textviews, after that we set the respective values to the view using binding.

We can also set the values from the Kotlin file. For this we have written public methods such as setValue(), setHeaderText(). We will call these function in our MainActivity.kt file.

This is how it will look,

In this way, we can make our own custom views.

Happy learning : )