如何更改布局文件中可绘制形状的颜色

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?

我创造了一个可画的圆形。我把这个作为线性布局的背景。它工作正常。但问题是，我想用不同的颜色画6个圆圈。那么我是否可以只使用一个可绘制的形状，并针对不同的圆改变它的颜色呢?

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:

布局:

2 个解决方案

#1

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.

对每个按钮都这样做，但是请记住用要应用的按钮的颜色替换colorint。

#2

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 :

虽然@AbAppletic的答案是好的，但是我想添加另一种方法来解决这个问题。您可以在java中定义一个circle视图，然后在您的xml布局中多次使用这个视图，并根据您的需要更改它们的颜色。圆的观点:

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:

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

这是截图:

#1