CODEWITHSUNDEEP
androidandroid-layoutbackgroundscaling
Paddy1990
Paddy1990

Reputation: 946

android:background stretching not preserving aspect ratio

On landscape mode my background image stretches, I would like the image to enlarge rather than stretch to fit the size. From what I've seen I have to add it to it's own layout (E.g. LinearLayout) or 'ImageView` and the have a layout for the content on the view, am I correct in saying this?

My current xml layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/photo_background"
android:tag="layout" >

<ScrollView
    android:id="@+id/scroll_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:fadingEdge="none" >
    <include layout="@layout/instructions_internal" />
</ScrollView>

Which includes the following layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scroll_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:id="@+id/instructionsLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent_black" >

    <RelativeLayout
        android:id="@+id/more_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <WebView
            android:id="@+id/top_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp" />

        <Button
            android:id="@+id/test"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/top_content"
            android:layout_marginBottom="10dp"
            android:layout_centerHorizontal="true"
            android:onClick="onClickHandler" />

        <Button
            android:id="@+id/instructionsbutton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/test"
            android:background="@color/dark_gray"
            android:drawableLeft="@drawable/arrow_down_float"
            android:gravity="left|center"
            android:onClick="onMoreInstructions"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:text="@string/more_instructions_start"
            android:textColor="@color/solid_white" />
    </RelativeLayout>

    <WebView
        android:id="@+id/bottom_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/more_info"
        android:layout_marginTop="10dp" />
</RelativeLayout>

Any guidance on this would be gladly appreciated. Thanks

Upvotes: 1

Views: 2218

Answers (2)

Ivan Bartsov
Ivan Bartsov

Reputation: 21056

Yes you're correct. View's background scaling type is equivalent to ImageView's ScaleType.FIT_XY It will mess up the aspect ratio unless you're using wrap_content and the contents do not make it stretch past background bounds.

So in this situation I usually use an ImageView I place behind the view I need to give a properly-scaled background to. (Most likely yo're looking for CENTER_CROP scale type)

UPD here's some code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/instructions"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:tag="layout" >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/photo_background"
        android:scaleType="centerCrop" />

    <ScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fadingEdge="none" >
        <include layout="@layout/instructions_internal" />
    </ScrollView>
</FrameLayout>

Upvotes: 4

CoffeeBeans
CoffeeBeans

Reputation: 21

use an image that matches or in accordance with the android device resolution and screen size.

the image cannot itself enlarge itself, even if you use a linear layout dedicatedly for the image, the image is bound to stretch.

keep images of all possible resolutions in separate folders that you plan to run you application on.

Upvotes: -1

Related Questions