mtorres
mtorres

Reputation: 197

Circle changes to oval

I have a drawable that I would like to use as a background for a textView. The drawable is declared in the xml as a textView background. I am having a problem when testing the drawable on different screen sizes, as sometimes it stretches out and turns into an oval shape instead of staying as a circle.

So, specifically, my question is as follows: Is there any way to make sure that a drawable is always a circle and does not stretch into an oval? Preferably I would like everything to be done in XML.

I can post some of my code, but I think it is unnecessary because it is a simple drawable that uses the oval shape, and then in the layout I set the drawable to the background of a textView. My attempt to make the drawable to a circle was to use weights and a linear layout, and for the most part it works but it still stretches a bit in some screen sizes.

For completeness, if anyone is interested here is the layout code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="6"
    android:text="Button" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="4"
    android:gravity="center_horizontal|bottom"
    android:text="Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView
    android:id="@+id/gradientline1"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:src="@drawable/gradient_line" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="8"
    android:gravity="center"
    android:text="Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="4"
    android:gravity="center_horizontal|bottom"
    android:text="Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView
    android:id="@+id/gradientline2"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:src="@drawable/gradient_line" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="24"
    android:orientation="horizontal" >

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="5" >
    </View>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:background="@drawable/circle"
        android:gravity="center"
        android:text="Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <View
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_weight="5" >
    </View>
</LinearLayout>

and here is the circle drawable (just layers of circles):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="oval" >
        <solid android:color="@color/circle_one" />
    </shape>
</item>
<item
    android:bottom="3dp"
    android:left="3dp"
    android:right="3dp"
    android:top="3dp">
    <shape android:shape="oval" >
        <solid android:color="@color/circle_two" />
    </shape>
</item>
<item
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp">
    <shape android:shape="oval" >
        <solid android:color="@color/circle_three" />
    </shape>
</item>
<item
    android:bottom="12dp"
    android:left="12dp"
    android:right="12dp"
    android:top="12dp">
    <shape android:shape="oval" >
        <solid android:color="@color/circle_two" />
    </shape>
</item>
<item
    android:bottom="16dp"
    android:left="16dp"
    android:right="16dp"
    android:top="16dp">
    <shape android:shape="oval" >
        <solid android:color="@color/circle_three" />
    </shape>
</item>
<item
    android:bottom="28dp"
    android:left="28dp"
    android:right="28dp"
    android:top="28dp">
    <shape android:shape="oval" >
        <solid android:color="@color/circle_one" />
    </shape>
</item>

Upvotes: 3

Views: 3056

Answers (2)

M. Usman Khan
M. Usman Khan

Reputation: 4418

Use shape="ring" (not oval)

try:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false"  >

    <!-- View background color -->
    <solid
        android:color="@color/white" >
    </solid>

    <!-- View border color and width -->
    <stroke
        android:width="1.6dp"
        android:color="@color/beam_grey" >
    </stroke>
</shape>

Upvotes: 4

Jo&#227;o Marcos
Jo&#227;o Marcos

Reputation: 3972

put in your xml file the layout width and height in wrap content.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Upvotes: 2

Related Questions