Android circle background becomes oval
To get this
I used two LinearLayout inside each other and set parent gravity to CENTER
<LinearLayout
android:layout_width="80dp"
android:layout_height="50dp"
android:baselineAligned="false"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:background="@drawable/oval"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Text"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
and this is oval.xml inside drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#393939" />
<size
android:width="40dp"
android:height="40dp" />
</shape>
without inner LinearLayout you'll get this
which it's code is
<LinearLayout
android:layout_width="80dp"
android:layout_height="50dp"
android:baselineAligned="false"
android:gravity="center"
android:background="@drawable/oval"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Text"
android:textSize="12sp" />
</LinearLayout>
You can create your own Drawable which will constrain the radius to the min value between its width and height.
package com.example.android;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
public class ColorCircleDrawable extends Drawable {
private final Paint mPaint;
private int mRadius = 0;
public ColorCircleDrawable(final int color) {
this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
this.mPaint.setColor(color);
}
@Override
public void draw(final Canvas canvas) {
final Rect bounds = getBounds();
canvas.drawCircle(bounds.centerX(), bounds.centerY(), mRadius, mPaint);
}
@Override
protected void onBoundsChange(final Rect bounds) {
super.onBoundsChange(bounds);
mRadius = Math.min(bounds.width(), bounds.height()) / 2;
}
@Override
public void setAlpha(final int alpha) {
mPaint.setAlpha(alpha);
}
@Override
public void setColorFilter(final ColorFilter cf) {
mPaint.setColorFilter(cf);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
then apply to your textView:
textView.setBackground(new ColorCircleDrawable(Color.RED));
- Change your
textView
'slayout_height
andlayout_width
towrap_content
- Add size tag inside shape tag as follows
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">> <solid android:color="#79bfea" /> <size android:height="25dp" android:width="25dp"/> </shape>
If it is still oval, try increasing the width and height in size tag. It worked for me!