Background image and scaled foreground image in ImageView

Question

We have an imageview with a background image, we want to place an ImageView above a textview as the foreground "image" centered relative to the ImageView size.

        selectedImageView = (ImageView) view.findViewById(R.id.selectedImage);
        selectedImageView.setBackgroundResource(R.drawable.back_item);
        selectedImageView.setImageResource(R.drawable.icon_alarm);

The code above makes the foreground image stretch to the size of the ImageView but we want the foreground to be "Inside" the background circle.

If padding is used there might be issues with different screen sizes.

The foreground image should be scaled to 50% of the height and width of the ImageView size and the textview should be placed underneath the foreground image.

Black outer square: the imageview boundary, black circle: background image, read square: foreground image, blue rectangle: foreground text

Answer 1

This is quite heavy , but using this layout , should work :

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"

        android:src="@drawable/ic_action_search" />

    <ImageView
        android:id="@+id/foreground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Hope it'll help