Creating a circle in xml file is not actually a circle

Question

I have a gradient view which animates from left to right. I have a XML that describes the circle inside, but the borders of XML are actually rectangular as you can see, how can I make the overflow hidden of the outside of the XML. It looks like that only the background is a circle but not the the shape itself ,I thought that the solution is by using PorterDuff.Mode but it doesn't help.

this is my circle.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />

    <corners android:radius="7.5dp" />
    <size android:width="327dp" android:height="211.5dp" />

</shape>

And in my layout i use it like this :

  <RelativeLayout
        android:id="@+id/white_rectangle"
        android:layout_width="327dp"
        android:layout_height="211.5dp"
        android:layout_gravity="center"
        android:clipChildren="true"
        android:adjustViewBounds="true"
        android:background="@drawable/circle"
        >

        <View
            android:id="@+id/scanner"
            android:layout_width="123.5dp"
            android:layout_height="211.5dp"
            android:layout_gravity="center"
            android:background="@drawable/scanner"
            android:visibility="gone" />

    </RelativeLayout>

i don't want the scanner to go outside the borders

it's because different height and width of shape – Ashish Jul 09 '19 at 12:41 — Ashish, Jul 09 '19 at 12:41

score 0 · Answer 1 · answered Jul 09 '19 at 12:37

You need to set square dimensions for it to appear as a circle.

Your width is larger than your height. Try this

  <RelativeLayout
        android:id="@+id/white_rectangle"
        android:layout_width="211.5dp"
        android:layout_height="211.5dp"
        android:layout_gravity="center"
        android:clipChildren="true"
        android:adjustViewBounds="true"
        android:background="@drawable/circle"
        >

        <View
            android:id="@+id/scanner"
            android:layout_width="123.5dp"
            android:layout_height="123.5dp"
            android:layout_gravity="center"
            android:background="@drawable/scanner"
            android:visibility="gone" />

    </RelativeLayout>

score 0 · Answer 2 · answered Jul 10 '19 at 07:13

0

The solution for me was to use CardView and give it cardCornerRadius.

found it here How to make a view in android with rounded corners

answered Jul 10 '19 at 07:13

Maxim Toyberman

1,906
1
20
35

score -1 · Answer 3 · edited Jul 10 '19 at 00:49

-1

try this library. Use same height and width for view

https://github.com/hdodenhof/CircleImageView

edited Jul 10 '19 at 00:49

Brandon Stillitano

1,304
8
27

answered Jul 09 '19 at 13:16

Rajkumar Sharma

554
1
4
9

Creating a circle in xml file is not actually a circle

3 Answers3