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:

Check this post: http://stackoverflow.com/questions/40183852/defined-custom-shape-for-button-in-xml-now-i-want-to-change-the-color-dynamical — Ali Bdeir, Oct 22 '16 at 05:30
check this [post](http://stackoverflow.com/questions/16636412/change-shape-solid-color-at-runtime-inside-drawable-xml-used-as-background). — Akash Patel, Oct 22 '16 at 05:31

score 14 · Accepted Answer · edited Oct 22 '16 at 06:29

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.

Milad Faridnia · Answer 2 · 2016-10-22T10:11:13.800

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:

@AbAppletic Thanks your answer is perfect too ;) – Milad Faridnia Nov 19 '16 at 05:08 — Milad Faridnia, Nov 19 '16 at 05:08

score 3 · Answer 3 · answered Oct 15 '18 at 17:12

3

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

                android:backgroundTint="@color/yellow_color"

answered Oct 15 '18 at 17:12

Aditya Rohilla

389
3
10

1

Problem is that outlines/stroke also change color. – Rowan Gontier Apr 05 '19 at 04:55

score 1 · Answer 4 · answered May 21 '21 at 10:03

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:?

answered May 21 '21 at 10:03

Raymond Chenon

11,482
15
77
110

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

4 Answers4