Kotlin Custom View Part 1

Kotlin Custom View Part 1

Kotlin Custom View Part 1

We are going to see about Custom View.

Berfore we start we need to know about what is Custom View? In android every element which we can see called “View”.

there are two types of views available.One, Generic View. There are more than 70 view’s available in this catogeory.Two, Custom View.

This is the one we are going to do in this video.Some android app has unique needs that aren’t covered by generic view.In that case, we need to use customview.

For easy understanding, We are going to create a custom view which will contain more than one generic views.Let’s see an example.Let’s take qualification..

A User can have zero or more qualifications.So we are going to create a custom view for this scenario.User needs to select a qualification from our suggestion,Also he can able to give his own.

So we need to use AutoCompleteTextView for giving suggestions,A listview to hold all the selected qualificationAnd a button to add the selected item to the list.

Kotlin Custom View Part 1
Kotlin Custom View Part 1

I am creating a new project to demonstrate this.I have given all the drawables used in this video as a zip file in the description below.

Right click on drawables and select “Show on explorer”.

Copy the files here.(Coping those drawables into PROJECT_LOCATION/app/src/main/res/drawable..)Right click on layout folder.New -> “Layout resource file”.

I am Giving the file name as my custom view layout.Click on Next.Click on Text.Change the root layout to merge. and remove width and height attribute.Using merge tag for custom view might improve performance.

Inside I am creating a linear layoutwith width as match parent, height as match parent and orientation as vertical.Adding a textview to display the titlewith width as match parent. height as wrap content and text size as 15sp.

Below that, i am creating a relativelayout to displayThe autocompletetextview and imageview for adding the selection.Create Autocompletetextview with width as match parent and height as wrap content.

Create an ImageView to display “add” icon withwidth as 48dp and height as 40dp.align parent end “true”, centerVertical “true”background as selection button inverted background from drawable.source as add_white from drawable.

We need to add align parent right as “true”To support the devices which have API level less than 17.Assigning id for the imageview as add.aligning the autocompletetextview to the left of add buttonUsing toStartOf as the add view and toLeftOF as the add view.Assigning id.Also assigning an id for the title textview.

Now we need to create the custom view item for displaying the selected item.so create a new layout file and give the name my_custom_view_item.

Change the root layout to relativelayoutwith width as match parent and height as wrap_content.Inside I am adding an image to display delete iconwith width as 48dp and height as 40dp.

Aligning it to the right of the parentUsing align parent end and align parent right.setting the background as selection button background, source as delete from drawable and padding 5dp.

Assigning id for the imageview as deleteAdding textview to display selected textwith width as match parent and height as wrap content.

I don’t want the item to be more than one lineso setting I am setting the ellipsize as “end” and maxline to 1.Center vertical true “I am adding this to imageviewbut I didn’t cover it previously. so add it now.

“Aligning the textview before delete imageviewusing toStartOf and toRightOf Attributes.Assigning text size as 18 sp. Sorry, we need to use toLeftof not toRightOf.

so I am changing it now.Now I am creating a new kotlin file for customview.

I am naming this as MyCustomView.create a class as same as file name.

Creating constructor with contextattribute set as a parameter and extending LinearlayoutBecause we have Linear layout inside merge tag.

I am extending linearlayout.in init, we need to inflate the custom viewwhich we need to show to the user.In next part Will see how to use the inflated viewand how to use the customeview.

That’s all for this tutorial guys.If you have any doubt, please put it in the comment section.

March 23, 2019 Ravindra Datir

Leave a Reply

Your email address will not be published. Required fields are marked *