Button's background isn't displayed

Question

Background isn't displayed. If the button hasn't background, it displayed OK

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/colorBackgroundFloating"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_weight="1"
        android:background="@drawable/my_round_button"
        android:onClick="onClick"
        android:text="@string/button_1"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

When app button hasn't background, button looks like ractangle

my_round_button

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
    <solid android:color="#FFFFFF" />
</shape>

What's wrong? Button should looks like ring

Look at this [how-to-create-ring-shape-drawable-in-android](https://stackoverflow.com/questions/30676208/how-to-create-ring-shape-drawable-in-android) — Krishna Sharma, Sep 01 '18 at 08:29

Son Truong · Answer 1 · 2018-09-01T09:42:34.570

A picture is worth a thousand words

So in your case to create a ring shape:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="80dp"
    android:shape="ring"
    android:thickness="5dp"
    android:useLevel="false">

    <solid android:color="#FFF" />

    <size
        android:width="200dp"
        android:height="200dp" />
</shape>

You can change innerRadius, thickness, size property based on your UI requirements.

score 0 · Answer 2 · answered Sep 01 '18 at 08:18

problem is in your shape.

for example you can change your shape to:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false"
    android:shape="ring"

    >
    <solid android:color="#FFFFFF" />

</shape>

Krishna Sharma · Answer 3 · 2018-09-01T09:57:49.267

I would recommend you to create custom view, which render the view in form of Circle and as per width/height we pass from the layout. It's more dynamic.

I did like the answer suggested by Son Truong but that seems not more generic as we need to hard code the size width/height.

Step 1: Create a theme in style.xml

<declare-styleable name="CircleCompatTextView">
    <attr name="cctv_stroke_width" format="dimension" />
    <attr name="cctv_background_color" format="color" />
    <attr name="cctv_border_color" format="color" />
</declare-styleable>

Step 2: Create a custom view.

public class CircleCompatTextView extends AppCompatTextView {
    private final Paint paintCircle = new Paint();
    private final Paint paintStroke = new Paint();
    private final Resources resources;
    private int strokeWidth;
    private int bgColor;
    private int borderColor;
    private int cxCy;

    public CircleCompatTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        resources = context.getResources();
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleCompatTextView);
        strokeWidth = a.getDimensionPixelSize(R.styleable.CircleCompatTextView_cctv_stroke_width, 1);
        bgColor = a.getColor(R.styleable.CircleCompatTextView_cctv_background_color, resources.getColor(android.R.color.transparent));
        borderColor = a.getColor(R.styleable.CircleCompatTextView_cctv_border_color, resources.getColor(android.R.color.background_dark));
        a.recycle();
        init();
    }

    private void init() {
        paintCircle.setColor(bgColor);
        paintCircle.setFlags(Paint.ANTI_ALIAS_FLAG);
        paintStroke.setColor(borderColor);
        paintStroke.setStyle(Paint.Style.STROKE);
        paintStroke.setStrokeWidth(strokeWidth);
        paintStroke.setFlags(Paint.ANTI_ALIAS_FLAG);
    }


    @Override
    public void draw(Canvas canvas) {
        canvas.drawCircle(cxCy, cxCy, cxCy - strokeWidth / 2, paintStroke);
        canvas.drawCircle(cxCy, cxCy, cxCy - strokeWidth / 2, paintCircle);
        super.draw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        int size = ((height > width) ? height : width);
        cxCy = size / 2;
        setMeasuredDimension(size, size);
    }
}

Step 3: Usage of custom view

<CircleCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical"
        android:padding="16dp"
        android:textAlignment="center"
        app:cctv_background_color="@android:color/transparent"
        app:cctv_border_color="@android:color/background_dark"
        app:cctv_stroke_width="2dp" />

Here is the output

Button's background isn't displayed

3 Answers3