How to change the color of drawable shape in the layout file

Question

I have created a drawable circular shape. I am using this as a background to my linear layout. It is working fine. But the problem is, I want to create 6 circles with different colors. So can i use only one drawable shape and change its color for different circles?

This is my drawable circular shape

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>

<solid
    android:color="@color/colorPrimary"
    />
<size
    android:width="30dp"
    android:height="30dp"/>
</shape>

I want to create this layout using drawable circular shape with different colors.

layout:

Answer 1

Keep the same shape and apply different app:backgroundTint

android:background="@drawable/shape"
app:backgroundTint="@color/blue"

Note the app:(custom namespace) for more informations Android Layout - when to use app: vs android:?

Answer 2

You can use now backgroundTint tag for changing drawable shape color (API level 21)

                android:backgroundTint="@color/yellow_color"

Answer 3

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:

Answer 4

You can by setting the same drawable (the one you provided) to all the buttons, then in your code:

Example:

Drawable mDrawable = ContextCompat.getDrawable(context, R.drawable.yourDrawable); 
mDrawable.setColorFilter(new PorterDuffColorFilter(yourColorInt,PorterDuff.Mode.MULTIPLY));

final int sdk = android.os.Build.VERSION.SDK_INT;
if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
    yourButton.setBackgroundDrawable(mDrawable);
} else {
    yourButton.setBackground(mDrawable);
}

Do this for each of your buttons, but remember to replace yourColorInt with the color you want for the button you're applying it to.