Circle background for a imageview

Question

I am trying to place three image views with circle background. I have also placed a draw with round shape.

But the background is not round shows oval.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/contactphone"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:src="@drawable/phonecall"
            android:layout_margin="10dp"
            android:background="@drawable/contact_icon_round"
            android:layout_height="75dp" />

        <ImageView
            android:id="@+id/contactemail"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:src="@drawable/mail"
            android:layout_margin="10dp"
            android:background="@drawable/contact_icon_round"
            android:layout_height="75dp" />

        <ImageView
            android:id="@+id/contactlocation"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:src="@drawable/location"
            android:layout_margin="10dp"
            android:background="@drawable/contact_icon_round"
            android:layout_height="75dp" />
            android:layout_gravity="fill_vertical" />
    </LinearLayout>

Round Shape Drawable:

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

There is something wrong but not able to figure out the mistake?

Thanks!

give your image views exact width and height instead of wrap_content — Rajen Raiyarela, Jun 06 '18 at 12:37
Possible duplicate of [Android circle background becomes oval](https://stackoverflow.com/questions/19063041/android-circle-background-becomes-oval) — Daria Pydorenko, Jun 06 '18 at 12:40

HedeH · Answer 1 · 2018-06-06T12:55:42.210

1

As long as your image sources are a perfect square, you can change the android:layout_height attribute of all Images to wrap_content. This way you can still use the weight behaviour.

Otherwise you have to use a fixed and equal width and height and remove the weight attributes...

edited Jun 06 '18 at 12:55

answered Jun 06 '18 at 12:39

HedeH

2,869
16
25

Sachin Varma · Accepted Answer · 2018-06-06T12:57:11.740

Make use of this layout,

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android"
    >

  <LinearLayout
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="75dp"
      >
  <ImageView
      android:id="@+id/contactphone"
      android:layout_width="75dp"
      android:src="@drawable/phonecall"
      android:layout_margin="10dp"
      android:background="@drawable/contact_icon_round"
      android:layout_height="75dp" />
  </LinearLayout>
  <LinearLayout
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="75dp"
      >
  <ImageView
      android:id="@+id/contactemail"
      android:layout_width="75dp"
      android:src="@drawable/mail"
      android:layout_margin="10dp"
      android:background="@drawable/contact_icon_round"
      android:layout_height="75dp" />
  </LinearLayout>
  <LinearLayout
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="75dp"
      >
  <ImageView
      android:id="@+id/contactlocation"
      android:layout_width="75dp"
      android:src="@drawable/location"
      android:layout_margin="10dp"
      android:background="@drawable/contact_icon_round"
      android:layout_height="75dp" />
  </LinearLayout>
</LinearLayout>

Background is shown as oval because of the uneven width and height.

Hope it may help you.

This solution is ok, but will not scale consistently for the range of screen densities for Android devices (xhdpi->xxxhdpi). Yes, you can address it by using values for the respective sizes, but it involves trial an error to make them look consistent. — angryITguy, Mar 07 '19 at 02:50

score 1 · Answer 3 · answered Sep 14 '18 at 03:22

To paint a circular yellow background with a 2-pixel black border behind a circular imageView without XML:

GradientDrawable gd = new GradientDrawable();
gd.setColor(Color.YELLOW);          // (no gradient)
gd.setStroke(2, Color.BLACK);
gd.setShape(GradientDrawable.OVAL);
gd.setGradientType(GradientDrawable.RADIAL_GRADIENT);
gd.setGradientRadius(iv.getWidth()/2);
iv.setBackground(gd);

Circle background for a imageview

3 Answers3