Android Custom Views Tutorial. Part-1

Learning the Android platform takes a loooong period of time.

At a certain point during this learning, you reach a point where most developers are with nearly similar experience. Consequently, they develop similar-looking applications, with identical design rules.

At such a stage, what makes your apps unique and different from others depends on the additional skills you learn in the field. These skills set you apart from the crowd, and takes you one big step closer to the pro level.

These skills can be:

1. The invisible changes to the app, like performance based enhances :

Performance Pattern Videos

2. Visible changes like following Material Design Guidelines or making Custom Views that set your app a majestic feel. This series of tutorials is aimed at enhancing your skills on Custom Views, covering most of the aspects of the same.

There are TWO WAYS of making custom views in Android:

1. Extending the View class- Building the view from scratch
2. Extending already existing views ( TextViews, LinearLayouts Etc )

In this series, we will be focusing on the first way of making custom views. Once you cover this series, making custom views using the second method should be a cakewalk for you. :)

In this Series of Four Parts, you will cover:

1. How to make basic shapes using Custom Views
2. How to add custom attributes to your Custom Views
3. How to make shape manipulations using Custom Views (increase/decrease shape size, change shape colour using functions)
4. How to add Accessibility Hooks onto your Custom Views

Now that you have got the overview of what is to be covered, lets begin with the part 1 of the series:

HOW TO MAKE BASIC SHAPES USING CUSTOM VIEWS:

I would recommend cloning/forking/downloading the GitHub repository to hop onto the code that we will write in the series:

robillo/CustomViewsTutorial

You can catch a glimpse of what you are going to make through the following illustration:

In this part, we will make a simple rectangular shape as for the custom view we will be showcasing.

Making a Custom View will follow the following steps:

1. Create a new Android Studio project and select Empty Activity template. At this point you should only have one class named “MainActivity” inside your project.
2. Create a new class, name it “MyCustomView”, and extend in by View class.
3. At this point, android Studio will prompt you to an error to create constructor(s) matching super. On clicking the prompt, you should select all the options for the constructor.

4. Next, you create a new function void init(@Nullable AttributeSet set) with blank body and make all the constructors access this function by calling init(attrs) on all constructors (except you have to pass null in the first constructor) ( to be used later).

5. Override the onDraw(Canvas canvas) in this class. In this function you have to: Create a new Paint object and assign a colour to it, Create a Rect object and assign left, right, top, bottom coordinates to it ( Please note that a shape in canvas has positive coordinates from top to bottom and left to right), then call canvas.drawRect( your rect object, your paint object). (Ignore any warnings that follow, those will be covered in the remaining parts).

6. Last step: Add your custom view to the activity_main.xml.

Thats it! Thats all you needed to do to make a simple shape from scratch as an custom view in android. In the next parts, you will gain more control on these custom views by making them use custom attributes, handling touch events, etc. So it is recommended that you stay strapped to this series to the end! Happy programming. :)

Link to other parts of this series:

• Part-2 (Custom Attributes)
• Part-3 (Shape Manipulations)
• Part-4 (Making Views More Accessible)