CODEWITHSUNDEEP
androidbackgroundandroid-relativelayout
pqn
pqn

Reputation: 1532

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>

Upvotes: 23

Views: 58291

Answers (4)

Flynn81
Flynn81

Reputation: 4168

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).

Upvotes: 63

Sheharyar Ejaz
Sheharyar Ejaz

Reputation: 2858

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

 android:scaleType="fitCenter"

Upvotes: 0

Amirhossein Ghasemi
Amirhossein Ghasemi

Reputation: 22138

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>

Upvotes: 6

tiguchi
tiguchi

Reputation: 5410

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

Upvotes: 13

Related Questions