How to make UI in landscape mode

Question

I have a layout which looks perfect in portrait mode but looks worst in landscape mode, I also created different folder for landscape. Still now able to make it perfect for all screens in landscape.

Here is the xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center"
android:orientation="vertical"
android:padding="5dp" >

<RelativeLayout
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray"
    android:gravity="center" >

    <TextView
        android:id="@+id/head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Choose Mode"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#ffffff" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/question_image" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/menu_image" />

</RelativeLayout>

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button1"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="1" />

                <Button
                    android:id="@+id/button2"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="2" />

                <Button
                    android:id="@+id/button3"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="3" />

                <Button
                    android:id="@+id/button4"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="4" />

                <Button
                    android:id="@+id/button5"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="5" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button6"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="6" />

                <Button
                    android:id="@+id/button7"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button8"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />

                <Button
                    android:id="@+id/button9"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="9" />

                <Button
                    android:id="@+id/button10"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button11"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />

                <Button
                    android:id="@+id/button12"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button13"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="9" />

                <Button
                    android:id="@+id/button14"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button15"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="8" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button16"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button17"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button18"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button19"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button20"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>

            <TableRow
                android:id="@+id/tableRow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center" >

                <Button
                    android:id="@+id/button21"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button22"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button23"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button24"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />

                <Button
                    android:id="@+id/button25"
                    style="@style/box_sky_blue"
                    android:layout_weight="1"
                    android:text="7" />
            </TableRow>
        </TableLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:gravity="center" >

            <ImageView
                android:id="@+id/imageButton1"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_weight="0.25"
                android:background="@drawable/reset" />

            <ImageView
                android:id="@+id/imageButton2"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/check_solution" />

            <ImageView
                android:id="@+id/imageButton3"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/hint" />

            <ImageView
                android:id="@+id/imageButton4"
                android:layout_width="40dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dp"
                android:layout_weight="0.25"
                android:background="@drawable/next" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

For portrait

enter image description here

For Landscape enter image description here

Do i need to remove the weight from those four icons, help me out :(

Yes, I'd rather not use weights. Use density pixels, and adjust your view accordingly. — Bijay Koirala, Jul 21 '14 at 08:17
You can see the answer here : http://stackoverflow.com/a/4858052/3098590 — ihsanbal, Jul 21 '14 at 08:20

SuppressWarnings · Accepted Answer · 2014-07-21T08:17:16.493

The main problem I see is the ImageView's. First off , never use "fill_parent" values since they are deprecated, instead use "match_parent".

Then, you need to remove weight property from them aswell. That's why they try to fill the screen by stretching which makes them look out of proportion.

Use fixed dp (density pixel) size (width/height) for the images, so that they maintain a proportion, no matter the size or the display quality. You can then, use different sizes and element display for both landscape and portrait using layout and layout-land folders, both storing different layout compositions with the same name so that they get called by the android framework depending on orientation.

You have official documentation about supporting multiple screen sizes / orientation (more specifically) here.

score 3 · Answer 2 · answered Jul 21 '14 at 08:23

3

on the imageview of last 4 button add this attributes -

android:adjustViewBounds="true" 
android:scaleType="fitCenter"

answered Jul 21 '14 at 08:23

Ratul Ghosh

1,512
9
15

How to make UI in landscape mode

2 Answers2