xml Layout issue: doesn't fit in all screens

Question

I am having an issue with the layout.I need to add the edittext with imagebutton button in the single row.

I need to add the 2 timepicker one for date.another for time.

I get the two picker for date and time in a single row.But while clicking the preview screens in graphical layout,it shows overlapping and more spaces left between edittext and imagebutton for all screens.

Below I am posted the codes what I have tried so far.

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:onClick="selectDate" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="55dp"
        android:background="@drawable/text"
        android:ems="5"
        android:inputType="date" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/editText1"
        android:layout_toRightOf="@+id/editText1"
        android:contentDescription="@string/selectdate"
        android:cropToPadding="true"
        android:onClick="selectDate"
        android:src="@drawable/ic_datepicker" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignBottom="@+id/imageButton1"
        android:layout_toRightOf="@+id/imageButton1"
        android:background="@drawable/text"
        android:ems="5"
        android:inputType="date" >

        <requestFocus />
    </EditText>

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/editText2"
        android:layout_toRightOf="@+id/editText2"
        android:contentDescription="@string/selecttime"
        android:cropToPadding="true"
        android:onClick="selecttime"
        android:src="@drawable/ic_datepicker" />

</RelativeLayout>

Editext and imagebutton have to be in single row.It have to exactly fit for all devices.Anyone can help me with this.Thank you.

Answer 1

Unfortunately, Android suffers from what is called "fragmentation problem". One part of this problem is that you as a developer need to do some work to support different screen sizes.

Here is a guide that explains this process. You need to create different layouts for the different screen sizes that your app needs to support.

Answer 2

You could use a linear layout instead of a relative layout with the value orientation="horizontal".

You can find out more information here http://developer.android.com/guide/topics/ui/layout/linear.html but I've included a brief description below.

This will layout the edit text and image button horizontally automatically. To force them to appear on the same row and not overlap, you can assign each views width to be 0dp and their weights to be 1.

This will tell android to layout the views with equal width across the screen regardless of screen size. If you want one view to be wider, change its weight value so it is higher than the other. It always ends up being a ratio of the total weights.

Answer 3

You can try this layout, it will meet your requirement and fits in all screen.

Though i made some changes in your xml layout by replacing your Relative layout with linear layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:onClick="selectDate" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_weight="1.5"
        android:inputType="date" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:cropToPadding="true"
        android:onClick="selectDate"
        android:src="@drawable/ic_launcher" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:layout_gravity="bottom"
        android:inputType="date" >

    </EditText>

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:cropToPadding="true"
        android:onClick="selecttime"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Hope this helps you somehow :)

Answer 4

Put image text in one linearlayout which has orientation as "horizontal" and place edittext and button in that. You can use weightSum to give weights to the elements in the linear layout so that they will be at a distance which is same in proportion irrespective of device screen size.

<LinearLayout
   android:id="@+id/linearlayout1"
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:orientation="horizontal"
   android:weightSum="2"
>
<EditText
        android:id="@+id/editText1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="55dp"
        android:background="@drawable/text"
        android:ems="5"
        android:layout_weight="1.0"
        android:inputType="date" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/editText1"
        android:layout_toRightOf="@+id/editText1"
        android:contentDescription="@string/selectdate"
        android:cropToPadding="true"
        android:onClick="selectDate"
        android:layout_weight="1.0"
        android:src="@drawable/ic_datepicker" />
</LinearLayout>