android – How to make image fill RelativeLayout background without stretching-ThrowExceptions

Exception or error:

In my Android project, I am not quite sure how to make my background image fill the entirety of the RelativeLayout root element in XML, which is the size of the screen. I want to be sure that this works for all aspect ratios, so the image will clip vertically or horizontally as necessary. Does someone know how to do this easily? I’ve only seen questions regarding ImageViews and Buttons, but not really generic Views.

My XML file currently:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/enclosing_rl"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background"
    android:fitsSystemWindows="false">
<!-- Other elements -->
</RelativeLayout>
How to solve:

Other than turning your image into a nine patch I don’t think this is possible. What you could do instead is add an ImageView as the first view in your RelativeLayout. Set layout_centerInParent to true and have the layout_width and layout_height set to match_parent. Then set scaleType to centerCrop. That will make sure the image fills the screen without any distortion, but depending on screen size/orientation either some of the top/bottom or left/right of the image may be cut off.

<ImageView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
            android:src="@drawable/background" />

Any other views in the RelativeLayout will appear on top of the ImageView, as long as it is the first view in the RelativeLayout (when you are in the xml).

###

Create a bitmap drawable XML resource in your res/drawable folder:

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

Use that drawable as background instead of @drawable/background

###

according to this answer If you want your ImageView fill your RelativeLayout,use align parameters for ImageView.

you can put all of your views to a LinearLayout and set align parameter to your background ImageView:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

     <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/my_background"
        android:scaleType="centerCrop"
        android:layout_alignTop="@+id/my_views"
        android:layout_alignBottom="@+id/my_views"

        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/my_views"
        android:orientation="vertical" >
    <!-- stuff -->
    </LinearLayout>


</RelativeLayout>

###

Its smart and 100% working answer is to set the property scaleType of image view !

 android:scaleType="fitCenter"

Leave a Reply

Your email address will not be published. Required fields are marked *