How to make an item layout with a fixed aspect ratio background on multiple types of devices in Android?

122 Views Asked by At

What we want to make:

enter image description here

Display a sub layout on the screen of the TV. The width of the TV layout is match_parent.

What I Tried:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:src="@drawable/bg_tv_left" />
    <include
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="13dp"
        android:layout_marginLeft="13dp"
        layout="@layout/content" />
</RelativeLayout>

The Result:

enter image description here

1

There are 1 best solutions below

1
On

Your ratio looks good, you need both child have the same layout_width and layout_height to get the perfect position, try this one:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:src="@drawable/bg_tv_left" />
<!-- adjust the margin to get the best positioning -->
<include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="13dp"
        android:layout_marginLeft="13dp"
        layout="@layout/content" />
</RelativeLayout>

You may need one more layout to wrap them, depend on your UI design