---
title: "Creating custom and compound Views in Android"  
description: "Hi, I am telling you about Creating custom and compound Views in Android"  
author: "Manoj Pandey"  
published: 2015-02-13  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1578/creating-custom-and-compound-views-in-android  
category: "android"  
tags: ["custom controls", "android"]  
reading_time: 6 minutes  

---

# Creating custom and compound Views in Android

In my previous post, we have implemented [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) deletion in android : Android Delete Multiple [Selected Items](https://www.mindstick.com/forum/352/i-need-to-display-my-checkboxlist-selected-items-in-a-label-how-to-do) in [Listview](https://www.mindstick.com/articles/12744/listview-in-android). In this post we are going to learn custom and compound views

The Android [framework](https://yourviews.mindstick.com/view/81101/time-for-improvement-in-healthcare-facility-framework) provides several default views but [developer](https://www.mindstick.com/blog/11970/how-to-become-a-successful-blockchain-developer-in-just-six-months) can also create their custom views and use them in their application.

You can make your control according to your need. By extending the View class or one of its subclasses you can create your custom view.

Compound views also allow you to [add custom](https://www.mindstick.com/forum/34385/add-custom-css-in-razor-view) API to update and query the state of the compound view.

1. Create a demo Project

2. Create n new class for create [vertical](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text) button and paste following code

3. In Main activity class

```
package com.example.customviewexample; import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.Toast; public class MainActivity extends Activity {             Button btnFirst, btnSecond;              @Override             protected void onCreate(Bundle savedInstanceState) {                         super.onCreate(savedInstanceState);                         setContentView(R.layout.activity_main);                         btnFirst = (Button) findViewById(R.id.firstButton);                         btnSecond = (Button) findViewById(R.id.secondButton);                         btnFirst.setOnClickListener(new OnClickListener() {                                      @Override                                     public void onClick(View v) {                                                // TODO Auto-generated method stub                                                 // Show toast message on First button click                                                 Toast.makeText(getApplicationContext(), "First Button Action",                                                                         Toast.LENGTH_SHORT).show();                                      }                         });                         btnSecond.setOnClickListener(new OnClickListener() {                                      @Override                                     public void onClick(View v) {                                                // TODO Auto-generated method stub                                                 // Show toast message on Second button  click                                                 Toast.makeText(getApplicationContext(), "Second Button Action",                                                                         Toast.LENGTH_SHORT).show();                                      }                         });            }              @Override             public boolean onCreateOptionsMenu(Menu menu) {                        // Inflate the menu; this adds items to the action bar if it is present.                         getMenuInflater().inflate(R.menu.main, menu);                         return true;            } } 
```

4. Now create a class for create vertical button

```
package com.example.customviewexample;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.Toast;

public class MainActivity extends Activity {
             Button btnFirst, btnSecond;

             @Override             protected void onCreate(Bundle savedInstanceState) {                         super.onCreate(savedInstanceState);                         setContentView(R.layout.activity_main);                         btnFirst = (Button) findViewById(R.id.firstButton);                         btnSecond = (Button) findViewById(R.id.secondButton);                         btnFirst.setOnClickListener(new OnClickListener() { 
                                     @Override                                     public void onClick(View v) {
                                                // TODO Auto-generated method stub                                                 // Show toast message on First button click                                                 Toast.makeText(getApplicationContext(), "First Button Action",                                                                         Toast.LENGTH_SHORT).show(); 

                                     }

                         });
                         btnSecond.setOnClickListener(new OnClickListener() {
                                     @Override                                     public void onClick(View v) {                                                // TODO Auto-generated method stub                                                 // Show toast message on Second button  click                                                 Toast.makeText(getApplicationContext(), "Second Button Action",
                                                                         Toast.LENGTH_SHORT).show();

                                     }

                         });

            }
             @Override             public boolean onCreateOptionsMenu(Menu menu) {
                        // Inflate the menu; this adds items to the action bar if it is present.                         getMenuInflater().inflate(R.menu.main, menu);                         return true;

            }

 }
```

***5.*** Create another class for create rounded image

```
 package com.example.customviewexample; import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.widget.ImageView; // This class make your Image Roundedpublic class RoundedImageView extends ImageView {              public RoundedImageView(Context ctx, AttributeSet attrs) {                         super(ctx, attrs);            }              @Override             protected void onDraw(Canvas canvas) {                          Drawable drawable = getDrawable();                          if (drawable == null) {                                     return;                         }                          if (getWidth() == 0 || getHeight() == 0) {                                     return;                         }                        // A Bitmap to hold the pixels,                         Bitmap b = ((BitmapDrawable) drawable).getBitmap();                         Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);                          int w = getWidth(), h = getHeight();                          Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);                         canvas.drawBitmap(roundBitmap, 0, 0, null);             }             //  Round and crop your image             public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {                          Bitmap finalBitmap;                         if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)                                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,                                                             false);                         else                                     finalBitmap = bitmap;                        // Basically your problem arises form the fact that you create a  bitmap.                         // You don't put anything in it. You then create a smaller bitmap and                         // then you render an imageView to that smaller bitmap.                         Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),                                                 finalBitmap.getHeight(), Config.ARGB_8888);                        // a Canvas to host the draw calls (writing into the bitmap)                         Canvas canvas = new Canvas(output);                        // The Paint class holds the style and color information about how to                         // draw geometries, text and bitmaps.                         final Paint paint = new Paint();                        // Rect holds four integer coordinates for a rectangle                         final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),                                                 finalBitmap.getHeight());                          paint.setAntiAlias(true);                         paint.setFilterBitmap(true);                         paint.setDither(true);                         canvas.drawARGB(0, 0, 0, 0);                         paint.setColor(Color.parseColor("#BAB399"));                        // draw circle with radius                         canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,                                                 finalBitmap.getHeight() / 2 + 0.7f,                                                 finalBitmap.getWidth() / 2 + 0.1f, paint);                         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));                         canvas.drawBitmap(finalBitmap, rect, rect, paint);                          return output;            } }
```

6. Now create control in activity_main.xml

```
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    tools:context=".MainActivity" >     <LinearLayout        android:layout_width="wrap_content"        android:layout_height="fill_parent"        android:orientation="vertical" >         <!-- your  PackageName.Customclass -->               <!--   <Button -->        <com.example.customviewexample.CustomView            android:id="@+id/firstButton"            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_weight=".50"            android:text="First" />               <!--   <Button -->        <com.example.customviewexample.CustomView            android:id="@+id/secondButton"            android:layout_width="wrap_content"            android:layout_height="0dp"            android:layout_marginTop="-8sp"            android:layout_weight=".50"            android:text="Second" />    </LinearLayout>     <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content" >         <!--   <ImageView -->        <com.example.customviewexample.RoundedImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="70sp"            android:src="@drawable/chrome" />    </LinearLayout> </LinearLayout> 
```

7. Now run [your application](https://answers.mindstick.com/qa/95487/how-do-you-troubleshoot-when-your-application-link-is-not-responding)

Without use custom view my activity will look like this:

\
![Creating custom and compound Views in Android](https://www.mindstick.com/mindstickarticle/3361b3f6-81e2-4ce1-90a9-3a47ebfc1cbb/images/344bbc37-3e39-4f36-a55b-d691091a0868.png)\

Whereas, after using Custom view Activity, UI will look like:

\
![Creating custom and compound Views in Android](https://www.mindstick.com/mindstickarticle/3361b3f6-81e2-4ce1-90a9-3a47ebfc1cbb/images/45953784-7939-44b1-af83-bd0caf9887c5.png)

---

Original Source: https://www.mindstick.com/articles/1578/creating-custom-and-compound-views-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.