Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make image fill RelativeLayout background without stretching

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>
like image 794
pqn Avatar asked Jun 30 '12 16:06

pqn


3 Answers

Other than turning your image into a nine patch I don't think this is possible. What you could do instead is-

  1. Add an ImageView as the first view in your RelativeLayout.
  2. Set layout_centerInParent to true.
  3. Have the layout_width and layout_height set to match_parent.
  4. 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).

like image 130
Flynn81 Avatar answered Nov 01 '22 13:11

Flynn81


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

like image 20
tiguchi Avatar answered Nov 01 '22 13:11

tiguchi


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>
like image 40
Amir Hossein Ghasemi Avatar answered Nov 01 '22 13:11

Amir Hossein Ghasemi