Circle layout becomes square if I set the background programatically

Question

I've come across an issue that I can not find a solution. I have a circle layout which I set a random colour as background. The problem is, the layout is square instead of a circle shape. Here is my code:

The oval shape in res/drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
    android:width="@dimen/avatar_height"
    android:height="@dimen/avatar_height" />
</shape>

the array of colours which sits in drawable/values/colors

    <integer-array name="avatar_colors">
    <item>@color/avatar_1</item>
    <item>@color/avatar_2</item>
    <item>@color/avatar_3</item>
    <item>@color/avatar_4</item>

</integer-array>

This is my circle layout

<RelativeLayout
                        android:id="@+id/letter_avatar"
                        android:layout_width="@dimen/avatar_height"
                        android:layout_height="@dimen/avatar_height"
                        android:background="@drawable/avatar">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textSize="@dimen/textsize_splash_screen"
                            android:textColor="@color/jwhite"
                            android:layout_marginBottom="@dimen/gap_small"
                            android:text="A"
                            android:layout_centerInParent="true"/>
                    </RelativeLayout>

and this is how I set the random colour as a background

    mLetterAvatar = (RelativeLayout) findViewById(R.id.letter_avatar);

  int[] androidColors = getResources().getIntArray(R.array.avatar_colors);
        int randomAndroidColor = androidColors[new Random().nextInt(androidColors.length)];
        mLetterAvatar.setBackgroundColor(randomAndroidColor);

And this is the result I'm getting

Note: If I don't set the background programatically the layout has a circle shape (see screen-shot below)

How can I get the circle layout and have the option to add a colour as a background programatically? Thank you.

the background you set in your drawable is a circular shape, the background you set in your code is not a circular drawable . if you want to change the color you should use tint or change to a drawable with a different color. — Ramin, Jul 22 '16 at 14:30

score 1 · Accepted Answer · edited May 23 '17 at 12:32

1

The problem is that you are replacing your drawable background with a plain colour with this line:

mLetterAvatar.setBackgroundColor(randomAndroidColor);

So if you want to change the circle color instead, you should have another shape with a different color, or get the drawable from code and set the color as describes this link

edited May 23 '17 at 12:32

Community

1
1

answered Jul 22 '16 at 14:43

Jonathan Aste

1,764
1
13
20

score 0 · Answer 2 · answered Jul 22 '16 at 14:30

0

As I see you place avatar.xml as background in XML and avatar_color.xml[with random index] in code.

answered Jul 22 '16 at 14:30

Michael Spitsin

2,539
2
19
29

`setBackgroundColor` overrides setted drawable in xml, so you will have inside not ShapeDrawable, but ColorDrawable, thus you have square background, but not circle. – Michael Spitsin Jul 22 '16 at 14:58

score 0 · Answer 3 · answered Jul 25 '16 at 08:48

So after a busy weekend, I managed to find a solution based on Jonathan Aste answer. I don't know if this is the cleanest way to do it, but here it goes:

in res/drawable I've created 4 different shapes with different background colours.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="#ffcc00"/>
<size
    android:width="@dimen/avatar_height"
    android:height="@dimen/avatar_height" />

After that, I've created this array in res/values/arrays.xml.

<array name="random_avatar_array">
    <item>@drawable/avatar_green</item>
    <item>@drawable/avatar_yellow</item>
    <item>@drawable/avatar_red</item>
    <item>@drawable/avatar_blue</item>
</array>

and in code, this is what I have done

        if (view.getBackground() == null) {
        TypedArray avatars = getResources().obtainTypedArray(R.array.random_avatar_array);
        Drawable drawable = avatars.getDrawable(new Random().nextInt(avatars.length()));
        view.setBackground(drawable);
    }

Hope it helps someone.

Circle layout becomes square if I set the background programatically

3 Answers3