Display DatePicker and TimePicker along side each other in xml

Question

Android Studio 0.6.0
minSdkVersion 10
targetSdkVersion 19

Hello,

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:calendarViewShown="false"
    android:scaleX="0.5"
    android:scaleY="0.5"
    android:layout_alignParentLeft="true"/>

<TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleX="0.5"
    android:scaleY="0.5"
    android:layout_alignParentRight="true"
    android:layout_alignBaseline="@id/datePicker"/>
</LinearLayout>

I have the following xml that contains a DatePicker and TimePicker. However, when I test on the device they are too big to fit side by side.

I have tried messing around with the weights and try to make width and height smaller but it still doesn't look right.

Many thanks for any suggestions,

Answer 1

I tried your problem and found this link. Though scaling reduced the size of the picker (I tried 0.5) I was unable to place both views on the same layout. This occured due to the padding in the respective pickers. Heres the sample xml:

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

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

    <DatePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="false"
        android:scaleX="0.5"
        android:scaleY="0.5" >
    </DatePicker>
</LinearLayout>

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

    <TimePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX="0.5"
        android:scaleY="0.5" >
    </TimePicker>
</LinearLayout>

Answer 2

Try using the following nested layout to achieve your desired visual display. Note that the EditText layout shown is just an alternative in case you don't like the scrollable views of date and time.

The attributes like padding, height and width of Date and Time pickers are rigid and so can't be just modified just in the XML. Scaling them makes them just look weird.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingTop="20dp" >

    <HorizontalScrollView
        android:id="@+id/dateScrollView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5" >

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

            <DatePicker
                android:id="@+id/datePicker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.5" />
        </LinearLayout>
    </HorizontalScrollView>

    <HorizontalScrollView
        android:id="@+id/timeScrollView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.5" >

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

            <TimePicker
                android:id="@+id/timePicker1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0.5" />
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

<TextView
    android:id="@+id/dateTimeInstructions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:text="Swipe across Date and Time widgets above to see hidden parts as needed"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="30dp" >

    <EditText
        android:id="@+id/dateInput"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:ems="10"
        android:hint="Enter Date here"
        android:inputType="date" />

    <EditText
        android:id="@+id/timeInput"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:ems="10"
        android:hint="Enter Time here"
        android:inputType="time" />
</LinearLayout>

Answer 3

Do the following on your layouts:

1. (a) Change your root layout from LinearLayout to RelativeLayout.

1. (b) Set the following attributes on your 'picker' layouts:

DatePicker: android:layout_alignParentRight="true"

TimePicker: android:layout_alignParentLeft="true"

You can interchange the attributes in any order you want for the two pickers.

2. Give each of your layouts an ID for reference.

3. On any of them, set the following attribute: android:layout_alignBaseline="@+id/OTHER_LAYOUT_ID", e.g. assuming you gave the DatePicker layout an ID of 'datepicker', you can set the 'alignBaseline'attribute on the TimePicker as;

android:layout_alignBaseline="@+id/datepicker"

This will make both layouts align horizontally on the same line.

Note: These attributes work best for elements like buttons and other smaller form fields.