Search code examples
androidandroid-layoutbackground-imagedrawable

let background drawable be smaller than view


How do I let or force a background drawable to be smaller than the view? Say I have an ImageView which a user clicks to take a photo. I want to place the ic_photo_camera icon as the background of the ImageView. But I don’t want the icon to stretch to fit the size of the ImageView: I want the icon to maintain its own size. How do I do this without using a combination of views? but rather just one view? For instance I can use A RelativeLayout and two ImageView to accomplish this. But I am wondering if there is an option for just one ImageView.

update

I think this is as good as a picture: this does it presently. But I don't want to use three views, I want to use one if I can.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#eeeeee"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="250dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:scaleType="center"
            android:src="@drawable/ic_photo_camera_white_48dp" />

        <ImageView
            android:id="@+id/photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>

    <TextView
        android:id="@+id/label"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:layout_below="@+id/container"
        android:background="#FFFFFF"
        tools:text="This is the label to some image" />


</RelativeLayout>

enter image description here


Solution

  • Yes, you can.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#eeeeee">
    
        <ImageView
            android:id="@+id/container"
            android:layout_width="250dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:scaleType="center"
            android:src="@drawable/ic_photo_camera_white_48dp"
            android:background="@drawable/bg"/>
    
        <TextView
            android:id="@+id/label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/container"
            android:background="#FFFFFF"
            android:gravity="center"
            tools:text="This is the label to some image" />
    
    </RelativeLayout>
    

    and create bg.xml in your res/drawable:

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:gravity="clip_horizontal"
        android:src="@drawable/photo" />
    

    @drawable/photo is what you wanna put into your old ImageView with id "photo". gravity can be changed to clip_vertical based on your image aspectRatio.

    If your wanna dynamically set "photo", you can:

        ImageView iv_container = (ImageView) findViewById(R.id.container);
        Drawable drawable = getResources().getDrawable(R.drawable.photo_2);
        ((BitmapDrawable)drawable).setGravity(Gravity.CLIP_HORIZONTAL);
        iv_container.setBackgroundDrawable(drawable);