Android Custom Component View w/Rounded Corners

Question

I'm trying to create a View with rounded corners (and a background color of choice) that I can reuse with different background colors; hard to explain, so here's my code:

/app/src/com/packagename/whatever/CustomDrawableView.java


package com.packagename.whatever;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.PaintDrawable;
import android.util.AttributeSet;
import android.view.View;

public class CustomDrawableView extends View {
    private PaintDrawable mDrawable;
    int radius;

    private void init(AttributeSet attrs) {
        TypedArray a = getContext().obtainStyledAttributes(attrs,R.styleable.RoundedRect);
        radius = a.getInteger(R.styleable.RoundedRect_radius, 0);
    }

    public CustomDrawableView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);

        mDrawable = new PaintDrawable();
    }

    protected void onDraw(Canvas canvas) {
        mDrawable.setCornerRadius(radius);
        mDrawable.draw(canvas);
    }
}

Here's the XML to display the custom component: /app/res/layout/test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ny="http://schemas.android.com/apk/res/com.packagename.whatever"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:padding="10dp">

    <com.packagename.whatever.CustomDrawableView
        android:id="@+id/custom"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#b80010"
        ny:radius="50"
    />

</LinearLayout>

I'm wanting the red box to have 50px rounded corners, but as you'll see, it does not:

Red box without rounded corners

The idea is that I could easily change the background color in the XML and automatically have a nice View with rounded corners, without having to create multiple drawables.

Thanks for the help!

score 8 · Accepted Answer · answered Apr 29 '11 at 02:13

You need to set your corner radius and color into the background drawable.

Here is one way that would work. Grab the color you set in android:background, then use it to create a new drawable that you set into the background in the constructor. This will work as long as you only set android:background to a color value.

   public CustomDrawableView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);

        // pull out the background color
        int color = attrs.getAttributeIntValue("http://schemas.android.com/apk/res/android", "background", 0xffffffff);

        // create a new background drawable, set the color and radius and set it in place
        mDrawable = new PaintDrawable();
        mDrawable.getPaint().setColor(color);
        mDrawable.setCornerRadius(radius);
        setBackgroundDrawable(mDrawable);
    }

If you override onDraw, make sure you call super.onDraw(canvas) first to get the background drawn.

score 3 · Answer 2 · answered Apr 29 '11 at 01:40

given a simple shapedrawable like this:

public ShapeDrawable Sd(int s){

float[] outerR = new float[] { 12, 12, 12, 12, 12, 12, 12, 12 };
ShapeDrawable mDrawable = new ShapeDrawable(new RoundRectShape(outerR, null,null));

            mDrawable.getPaint().setColor(s);
return mDrawable;
}

you can do the following:

    LinearLayout l=(LinearLayout) findViewById(R.id.testLayout);
l.setBackgroundDrawable(Sd(0xff74AC23));

where the 12's represent the radius. you could apply this to any view for a background drawable.

if you already have the buttons colored and you need to round corner them i use this code Resources res = this.getResources(); button2.setBackgroundDrawable(this.Sd(res.getColor(R.color.color1x2))); — max4ever, May 17 '11 at 13:08

score 2 · Answer 3 · edited May 23 '17 at 12:34

2

Take a look at this question: How do I set the rounded corner radius of a color drawable using xml?

And perhaps also these two:

How to add rounded corner to a drawable I'm using as a background in Android?
How should I give images rounded corners in Android?

edited May 23 '17 at 12:34

Community

1
1

answered Apr 29 '11 at 01:22

Aleadam

40,203
9
86
108

Thanks for responding, but I'm trying to dynamically set the background color. Your first two links are the methods I normally use, but only allow for a static bg, hence my problem. The third link might do the trick... I'll take a look. :) – iamkoa Apr 29 '11 at 01:43
@iamkoa calling `setBackgoundColor()` afterwards does not work? – Aleadam Apr 29 '11 at 01:48
Yes, but this would require that you add a android:background drawable, then manually override the background color of the drawable in Java, right? I'm looking for a solution that allows everything to be in one XML call. – iamkoa Apr 29 '11 at 01:58

Android Custom Component View w/Rounded Corners

3 Answers3