How to arrange the components perfectly in android

Question

I have a beginner knowledge in android I am trying to design a screen like below my design is not work perfectly in landscape mode.I want to overcome this problem I don't know how to rectify this. What I am trying......

   <?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="match_parent">
   <RelativeLayout
        android:id="@+id/rL"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@mipmap/lay10"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

     <FrameLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/frame">
        <LinearLayout
            android:id="@+id/linearfromdate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|center"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">
      <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="From Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
        </LinearLayout>
      <LinearLayout
            android:id="@+id/linear"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linearfromdate"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="2dp">
             <EditText
                android:id="@+id/fromDate"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                 android:background="@drawable/edittext_round"/> 
     </LinearLayout>
     </FrameLayout>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/frame2"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@id/frame1">
        <LinearLayout
                android:id="@+id/lineartodate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                android:orientation="horizontal">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="To Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/linear1"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">
         <EditText
                android:id="@+id/todate"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="@drawable/edittext_round" />
                   </LinearLayout>
            </FrameLayout>
              <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/frame2"
            android:layout_marginLeft="2dp"
            android:id="@+id/frame3"
            >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/lineardigit"
                android:orientation="horizontal"
                android:layout_gravity="top|center"
                android:layout_marginTop="5dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Digit"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear3"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:background="@drawable/edittext_round"
                >

                <Spinner
                    android:id="@+id/digitspinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>


        </FrameLayout>


        <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/frame4"
            android:layout_marginRight="3dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/frame3">

            <LinearLayout
                android:id="@+id/lineartime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Time"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_round"
                android:orientation="horizontal">

                <Spinner
                    android:id="@+id/timespinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </FrameLayout>
        <FrameLayout
          android:layout_width="200dp"
          android:layout_height="wrap_content"
            android:id="@+id/frame5"
            android:layout_toStartOf="@+id/rL"
            android:layout_below="@id/frame1"
            android:layout_toLeftOf="@id/frame4"
            android:layout_marginLeft="2dp"
            >

            <LinearLayout
            android:id="@+id/linearname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_gravity="top|center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/linear4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/edittext_round"
            android:orientation="horizontal">

            <Spinner
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        </FrameLayout>

        <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/frame6"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="2dp"
            android:layout_below="@id/frame4"
            android:layout_toRightOf="@id/frame5"

           >

            <LinearLayout
                android:id="@+id/linearnametype"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name Type"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_round"
                android:orientation="horizontal">

                <Spinner
                    android:id="@+id/nametype"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                </Spinner>
            </LinearLayout>
        </FrameLayout>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:id="@+id/frame7"
            android:layout_marginRight="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginTop="15dp"
            android:layout_toRightOf="@id/frame6"
            android:layout_below="@id/frame4">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Go"
                android:background="@drawable/edittextstyle"
               />

        </FrameLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linearweb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/rL"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/webView">

        </WebView>

    </LinearLayout>

</RelativeLayout>

I want to reduce the extra space in landscape mode.It works perfectly in portrait mode.I am trying my best with beginner knowledge.

Answer 1

Try it

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@mipmap/lay10">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="From Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <EditText
                android:id="@+id/fromDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="To Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <EditText
                android:id="@+id/todate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Digit"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/digitspinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Time"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/timespinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Name"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Name Type"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/nametype"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/edittextstyle"
            android:text="Go" />
    </LinearLayout>
</LinearLayout>

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

Answer 2

You can create a new layout for your application when it's in landscape mode. Meaning you can arrange all your components again to have a better fit by placing them at different positions or possibly using other layouts.

Here's a nice udacity course you might be interested in: Material design for android course. The entire course is about making your app look great across multiple devices different layouts.

Some links of interest:

Supporting Different Screens

Android portrait and landscape example

Hope this helped and good luck :)

Answer 3

Create different layout for diffrent orientation.

When you have only layout/main.xml then by default Android will render same layout file for both orientation.
If you want your layout to look different for landscape mode then create one more layout specifically for landscape mode.

For that create a folder layout-land/ and put your landscape layout inside that folder.
So your final folder structure will look like this

Here is the official documentation for Creating different layouts
Stackoverflow on same problem