CODEWITHSUNDEEP
androidandroid-layout
Rohit Chaturvedi
Rohit Chaturvedi

Reputation: 43

Android Layout creating problems while switching from portrait to landscape with relative and linear layout

I tried to create UI for login page with logo two edit text and login button, things were very nice in phone portrait mode but when i checked it in landscape and Tablet then the problem started.

i got two solutions

1. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayoutparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fed2db"
    android:orientation="vertical"
    >
        <RelativeLayout
            android:id="@+id/linearlayout_parents"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/relativelayoutbasic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/margin20"
                android:layout_marginRight="@dimen/margin20"
                android:layout_centerInParent="true"
                >
                <EditText
                    android:id="@+id/userName"
                    android:inputType="text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="[email protected]"
                    android:hint="UserName"
                    android:drawableStart="@mipmap/ic_launcher"
                    android:drawablePadding="10dp"
                    android:background="@null"
                    android:layout_marginTop="10dp" />
                <View
                    android:id="@+id/view"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#f7f7f7"
                    android:layout_below="@id/userName"
                    android:layout_marginTop="10dp" />
                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/view"
                    android:inputType="textPassword"
                    android:hint="Password"
                    android:text="Password@123"
                    android:drawablePadding="10dp"
                    android:background="@null"
                    android:drawableStart="@mipmap/ic_launcher"
                    android:layout_marginTop="10dp" />
                <Button
                    android:id="@+id/buttonLogin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/password"
                    android:background="#f7f7f7"
                    android:text="Login"
                    android:textColor="@android:color/black"
                    android:textAllCaps="false"
                    android:textStyle="bold"
                    android:textSize="17sp"
                    android:layout_marginTop="10dp" />
                <Button
                    android:id="@+id/buttonForgotPassword"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/buttonLogin"
                    android:layout_marginTop="10dp"
                    android:text="Forgot Password ?"
                    android:textColor="@android:color/white"
                    android:textAllCaps="false"
                    android:background="@null" />
            </RelativeLayout>

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_marginTop="@dimen/margin20"
                android:layout_above="@id/relativelayoutbasic"
                android:layout_centerHorizontal="true"/>
        </RelativeLayout>
</RelativeLayout>

this works perfect in portrait mode but as we rotate in landscape it decrease the image size.

show the example below in portrait enter image description here

show the example below in Landscapeenter image description here

So i tried the next Solution

2.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayoutparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#3996db"
    android:orientation="vertical"
    >

    <ScrollView
        android:id="@+id/linearlayout_parentscroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/linearlayout_parents"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:layout_marginTop="@dimen/margin20"
                android:layout_gravity="center_horizontal"/>

            <RelativeLayout
                android:id="@+id/relativelayoutbasic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/margin20"
                android:layout_marginRight="@dimen/margin20"

                >
                <EditText
                    android:id="@+id/userName"
                    android:inputType="text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="[email protected]"
                    android:hint="UserName"
                    android:drawableStart="@mipmap/ic_launcher"
                    android:drawablePadding="10dp"
                    android:background="@null"
                    android:layout_marginTop="10dp" />
                <View
                    android:id="@+id/view"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#f7f7f7"
                    android:layout_below="@id/userName"
                    android:layout_marginTop="10dp" />
                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/view"
                    android:inputType="textPassword"
                    android:hint="Password"
                    android:text="Password@123"
                    android:drawablePadding="10dp"
                    android:background="@null"
                    android:drawableStart="@mipmap/ic_launcher"
                    android:layout_marginTop="10dp" />
                <Button
                    android:id="@+id/buttonLogin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/password"
                    android:background="#f7f7f7"
                    android:text="Login"
                    android:textColor="@android:color/black"
                    android:textAllCaps="false"
                    android:textStyle="bold"
                    android:textSize="17sp"
                    android:layout_marginTop="10dp" />
                <Button
                    android:id="@+id/buttonForgotPassword"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/buttonLogin"
                    android:layout_marginTop="10dp"
                    android:text="Forgot Password ?"
                    android:textColor="@android:color/white"
                    android:textAllCaps="false"
                    android:background="@null" />
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

A. In this solution we cannot use the property android:layout_centerInParent="true" as it is for relative layout so we are not able to make the login text fields center as we did in solution one, this solution looks good in smaller screens and has scroll also but not working on large screens as it will not come in center.

B. we are not able to use relative layout inside scrollview as it create so many other complications.

i spend so much time, use so many stack overflow references and others also but nothing is working.

please suggest some way to work on it. Thanks in advance...

Upvotes: 1

Views: 138

Answers (3)

Siddharth Venu
Siddharth Venu

Reputation: 1388

While opening apps in landscape mode, Android first checks if there is any layouts specific to landscape, and if yes, loads it instead of the layouts specified in the layouts folder. To do so, you will need to create a new folder res/layout-land, and then copy the layout from the layouts folder to this folder, and then edit it and make a beautiful landscape layout.

Upvotes: 1

jerogaren
jerogaren

Reputation: 344

You can create an specified layout-land or even layout-sw600dp-land for tablets.

Upvotes: 0

Linh
Linh

Reputation: 60913

The problem here is you are using @mipmap/ic_launcher image with width/height "wrap_content".
So the ImageView size will base on ic_launcher image size
And the ic_launcher image size is smaller in landspace than portrait
=> Your ImageView in landscape is smaller than portrait

Therefore, simple set the width for your ImageView, then your image size will look same in both portrait and landscape

<ImageView
  android:id="@+id/imageview"
  android:layout_width="100dp" // or whatever you want
  android:layout_height="100dp"
  android:src="@mipmap/ic_launcher"
  android:layout_marginTop="@dimen/margin20"
  android:layout_gravity="center_horizontal"/>

Upvotes: 1

Related Questions