How to set background in circular imageView

Question

I have a circular ImageView as you can see below, this references a vector drawable, I would like to fill the inside of the circle with another View, without having that rectangle outside the circle, is this possible in any way?

<FrameLayout
    android:layout_gravity="center_horizontal"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:background="@android:color/black"
    >

    <com.myapp.MySpecialBackground 
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/icon"
        android:tint="@color/blue"/>
</FrameLayout>

Answer 1

You can use a ShapeDrawable as background resource. Add a drawable resource file to your project and set the "padding" so the circular shape will not show outside of your blue circle:

<?xml version="1.0" encoding="utf-8"?>
<shape
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
     <padding
         android:left="30dp"
         android:top="30dp"
         android:right="30dp"
         android:bottom="30dp" />
     <size
         android:width="150dp"
         android:height="150dp" />

     <solid android:color="#ff0000"/>
</shape>

I used 30dp but that's hard to tell from your screenshot, so most likely you'll have to experiment. Just keep in mind that you'll get a circle if your ImageView is a square and all padding values are equal.

(For older android versions: the size tag is relatively new, in earlier versions the width and height attributes went into the shape tag)