How to make the user interface look the same in landscape mode?

Question

My LinearLayout changes with screen orientation. In portrait mode, it looks perfect:

But in landscape mode, it looks like this:

How can I fix my UI to look the same in both modes?

 <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/border" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:id="@+id/imgfourth1" android:layout_width="70dp" android:layout_height="50dp" android:layout_marginRight="25dp" android:layout_marginLeft="25dp" android:paddingTop="2dp" android:src="@drawable/amlet1" /> <ImageView android:id="@+id/imgfourth2" android:layout_width="70dp" android:paddingTop="2dp" android:layout_height="50dp" android:layout_marginRight="25dp" android:contentDescription="@null" android:src="@drawable/lnch1" /> <ImageView android:id="@+id/imgfourth3" android:layout_marginRight="25dp" android:paddingLeft="20dp" android:layout_width="70dp" android:layout_height="50dp" android:paddingTop="2dp" android:contentDescription="@null" android:src="@drawable/supper" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="20dp" android:background="@drawable/border4" android:orientation="horizontal" > <TextView android:id="@+id/txtfth1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="2dp" android:layout_marginLeft="25dp" android:paddingLeft="10dp" android:paddingRight="10dp" android:gravity="center" android:contentDescription="@null" android:text="Breakfast" /> <TextView android:id="@+id/txtfth2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="25dp" android:paddingLeft="10dp" android:gravity="center" android:paddingRight="35dp" android:layout_marginTop="2dp" android:contentDescription="@null" android:text="Lunch" /> <TextView android:id="@+id/txtfth3" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="20dp" android:layout_marginTop="2dp" android:gravity="center" android:paddingRight="30dp" android:contentDescription="@null" android:text="Supper" /> </LinearLayout> </LinearLayout> 

Answer 1

You can create two different layouts: one for portrait mode and one for landscape mode. This will solve your problem.

 Keep your 1. portrait mode layout in res/layout folder and 2. landscape mode layout in res/layout-land folder. 

Android will accept the appropriate layout based on your orientation.

* EDIT: single layout * **

If you want to use a single layout for portrait and landscape orientation, the following will help you

I used android:weightsum and android:layout_weight so that it looks correct.

 <?xml version="1.0" encoding="utf-8"?> 

 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="100"> <ImageView android:id="@+id/imgfourth1" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:src="@drawable/ic_launcher" /> <ImageView android:id="@+id/imgfourth2" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:src="@drawable/ic_launcher" /> <ImageView android:id="@+id/imgfourth3" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:src="@drawable/ic_launcher" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="20dp" android:orientation="horizontal" android:weightSum="100" > <TextView android:id="@+id/txtfth1" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:gravity="center_horizontal" android:text="Breakfast" /> <TextView android:id="@+id/txtfth2" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:gravity="center_horizontal" android:text="Lunch" /> <TextView android:id="@+id/txtfth3" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="33" android:gravity="center_horizontal" android:text="Supper" /> </LinearLayout> 

Answer 2

You have 3 LinearLayouts, 1 external and 2 internal. On the internal layouts, put this android:layout_gravity="center_horizontal" . This should center both.

It’s also a fact that you think your portrait is not working properly . Pay attention to the empty space on the right.

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/border" android:orientation="vertical" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" > <ImageView android:id="@+id/imgfourth1" android:layout_width="70dp" android:layout_height="50dp" android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:paddingTop="2dp" android:src="@drawable/amlet1" /> <ImageView android:id="@+id/imgfourth2" android:layout_width="70dp" android:layout_height="50dp" android:layout_marginRight="25dp" android:contentDescription="@null" android:paddingTop="2dp" android:src="@drawable/lnch1" /> <ImageView android:id="@+id/imgfourth3" android:layout_width="70dp" android:layout_height="50dp" android:layout_marginRight="25dp" android:contentDescription="@null" android:paddingLeft="20dp" android:paddingTop="2dp" android:src="@drawable/supper" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="20dp" android:layout_gravity="center_horizontal" android:background="@drawable/border4" android:orientation="horizontal" > <TextView android:id="@+id/txtfth1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="25dp" android:layout_marginTop="2dp" android:contentDescription="@null" android:gravity="center" android:paddingLeft="10dp" android:paddingRight="10dp" android:text="Breakfast" /> <TextView android:id="@+id/txtfth2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="25dp" android:layout_marginTop="2dp" android:contentDescription="@null" android:gravity="center" android:paddingLeft="10dp" android:paddingRight="35dp" android:text="Lunch" /> <TextView android:id="@+id/txtfth3" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="20dp" android:layout_marginTop="2dp" android:contentDescription="@null" android:gravity="center" android:paddingRight="30dp" android:text="Supper" /> </LinearLayout> </LinearLayout> 

Answer 3

In addition to answereeta answer, just add android:layout_gravity="center_horizontal" for your internal LinearLayout tags.

Answer 4

Try the following lines:

 <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:weightSum="3" android:orientation="horizontal"> <ImageView android:id="@+id/imgfourth1" android:layout_width="0dip" android:layout_height="50dp" android:layout_weight="1" android:src="@drawable/amlet1" /> <ImageView android:id="@+id/imgfourth2" android:layout_width="0dip" android:layout_height="50dp" android:layout_weight="1" android:src="@drawable/lnch1" /> <ImageView android:id="@+id/imgfourth3" android:layout_width="0dip" android:layout_height="50dp" android:layout_weight="1" android:src="@drawable/supper" /> </LinearLayout> 

Basically, you should think that you fill the screen and then divide it according to your needs, so it will correspond to the landscape, or according to the portrait, or even with different densities. And I also suggest that you put your image height in the differens density dens folder, so that it can also be varied.

Answer 5

Simply put, android: layout-weight = "33" this will give 33% space for all three elements and will correspond to any resolution in any orientation