Search code examples
androidandroid-layoutandroid-relativelayoutlandscape-portrait

Scale all layout elevemts to fit landscape mode


I have an activity layout defined as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:padding="0dp"
    android:gravity="center">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/tv_example"
                android:textSize="45sp"
                android:textStyle="bold"
                android:textAlignment="center"
                android:maxLines="2"
                android:ellipsize="end"
                android:padding="5dp"
                android:background="@color/transparent">
            </TextView>

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:inputType="number"
                android:text="@string/tv_example"
                android:textSize="40sp"
                android:textStyle="bold|italic"
                android:textAlignment="center"
                android:maxLines="1"
                android:ellipsize="end"
                android:padding="5dp"
                android:background="@color/transparent">
            </EditText>
        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:maxHeight="150dp"
            android:maxWidth="150dp"
            android:src="@mipmap/ic_launcher"
            android:padding="15dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"/>

        <Button
            android:id="@+id/button_item_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:alpha="0.3"
            android:clickable="false"
            android:ellipsize="end"
            android:padding="15dp"
            android:layout_margin="50dp"
            android:text="@string/button_edit"
            android:textAlignment="center"
            android:textSize="25sp"/>
    </LinearLayout>
</RelativeLayout>

Which produces the following on portrait mode:

[portrait mode[1]

But, when switching it to landscape mode, the button disappears:

landscape mode

How can I make the missing TextView appear at landscape mode, Or better yet - scale all items to fit the new orientation?

Basically, The text views are the important views - I want them to be visible, even at the cost of downsizing the Button and\or the ImageView

I've tried removing the android:layout_weight="1" line from the most-inner LinearLayout containing the TextView -

This makes the text apear in landscape mode, But makes the Button dissappear:

(It also makes the entire layout to be aligned to the top instead of the center of the screen in portrait mode)

no weight landscape

Thanks


Solution

  • The best practice in such situation is to have 2 layout files, one for each orientation.

    Create a new folder under your /res directory and call it layout-land in Android Studio and put your layout xml files for the landscape with the same naming.

    Upon orientation change Android OS will use the xml file from that folder instead of trying to adjust the original one. This is the recommended approach for orientation support.