Search code examples
androidandroid-imageviewandroid-drawableandroid-imageandroid-shape

Circle background for a imageview


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

preview

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!


Solution

  • 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.