Creating simple Android Custom View

You may be wondering why you would ever want to create a custom view. Android comes with many views already, and these views follow behaviors that the user expects and has grown accustomed to (buttons, check boxes, text inputs). These views are fine and work great, but sometimes they do not provide all the functionality that your apps requires, or you may simply wish to build a more customizable component.

Views make it easy to add event listeners, use in the layout editor, and reuse in your current application or even share across projects.

For this tutorial we will be creating a view in which we will draw a rectangle . This view itself may not be extremely useful, but it provides a simple introduction to custom views.

How Android Draws Views

Drawing begins with the root node of the layout. It is requested to measure and draw the layout tree. Drawing is handled by walking the tree and rendering each View that intersects the invalid region. In turn, each ViewGroup is responsible for requesting each of its children to be drawn (with the draw() method) and each View is responsible for drawing itself. Because the tree is traversed in-order, this means that parents will be drawn before (i.e., behind) their children, with siblings drawn in the order they appear in the tree.

Drawing the layout is a two pass process: a measure pass and a layout pass. The measuring pass is implemented in measure(int, int) and is a top-down traversal of the View tree. Each View pushes dimension specifications down the tree during the recursion. At the end of the measure pass, every View has stored its measurements. The second pass happens in layout(int, int, int, int) and is also top-down. During this pass each parent is responsible for positioning all of its children using the sizes computed in the measure pass.

Preview :

 

 

preview

Lets get Started :

1. Create new project :

Create a new project File -> New -> Android Project with package name “com.example.customview”.

2. Create Custom view class

create MyView.class inside package “com.example.customview” and copy following code to it.

In this code we have overridden onDraw method which provide a canvas on which we have to draw stuff. in this case we drawn a rectangle and other rectangle beside it and then connected both of them using lines so that it might look like a cube. The paint object used in this is used to add properties like color stroke etc.

3. Adding custom view to activity_main.xml

The MyView.java we created must be visible in custom android views.

 

Capture

 

Now just drag and drop it into the layout file. After this content of activity_main.xml would be like this.

There is no need to make any changes in other files.

4. Build and Run

now just build and run the project to see the output.

guru

Technology enthusiast. Loves to tinker with things. Always trying to create something wonderful using technology. Loves coding for Android, Raspberry pi, Arduino , Opencv and much more.

You may also like...