Although @AbAppletic answer is good, I want to add another way to solve the problem. You can define a circle view in java and then use this view multiple times in your xml layouts and change their color as you wish. The Circle View :
import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; public class Circle extends View { Paint p; int color ; public Circle(Context context) { this(context, null); } public Circle(Context context, AttributeSet attrs) { this(context, attrs, 0); } public Circle(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // real work here TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.Circle, 0, 0 ); try { color = a.getColor(R.styleable.Circle_circleColor, 0xff000000); } finally { // release the TypedArray so that it can be reused. a.recycle(); } init(); } public void init() { p = new Paint(); p.setColor(color); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); if(canvas!=null) { canvas.drawCircle(getHeight()/2, getWidth()/2,getWidth()/2,p ); } } }
Add these lines in attrs.xml:
<declare-styleable name="Circle"> <attr name="circleRadius" format="integer"/> <attr name="circleColor" format="color" /> </declare-styleable>
And then you can use this view in your layout multiple times, also you can change their background:
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <TableRow android:gravity="center"> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color1" /> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv2" android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color2" /> </TableRow> <TableRow android:gravity="center"> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv3" android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color3" /> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv4" android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color4" /> </TableRow> <TableRow android:gravity="center"> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv5" android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color5" /> <com.afranet.broadbandportal.view.Circle xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cv6" android:layout_width="120dp" android:layout_height="120dp" android:layout_margin="5dp" android:background="@color/colorPrimary" app:circleColor="@color/color6" /> </TableRow>
Here is the screenshot: 
