Android date picker does not show the title or the numbers clearly

Question

I am an Android newbie learning how to build Android apps. I am trying to build a custom date picker for a screen. Unfortunately the numbers are being cut off at the bottom, and I don't know why. I would appreciate any feedback that I may get.

Screen as observed on the simulator

This is my layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/date_picker_title"
        android:textSize="20sp"
        android:id="@+id/datepicker_title"
        app:layout_constraintTop_toTopOf="parent"
        style="?android:listSeparatorTextViewStyle"
        android:layout_margin="16dp"/>
    <DatePicker
        android:id="@+id/datepicker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="true"
        android:datePickerMode="spinner"
        app:layout_constraintTop_toBottomOf="@+id/datepicker_title"
        android:padding="16dp" />
    <Button
        android:padding="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/datepicker2_ok"
        app:layout_constraintTop_toBottomOf="@+id/datepicker2"
        app:layout_constraintRight_toRightOf="parent"
        android:text="@android:string/ok"/>
</android.support.constraint.ConstraintLayout>

Github project: https://github.com/manoflogan/android-projects/tree/custom_dialog/02-Criminalntent

Layout file: https://github.com/manoflogan/android-projects/blob/custom_dialog/02-Criminalntent/app/src/main/res/layout/datepicker2.xml

The functionality works as intended. I don't have a horizontal layout as yet, as I am trying to make the numbers at the bottom visible.

I am also trying to display the same screen in the horizontal layout but the title and the button at the bottom is cut off.

Here is the screen shot of the same. Horizontal Layout

Here is the the layout which does not show the Ok button in horizontal layout.

<?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="wrap_content"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/date_picker_title"
        android:textSize="16sp"
        android:id="@+id/datepicker_title"
        app:layout_constraintTop_toTopOf="parent"
        style="?android:listSeparatorTextViewStyle"
        android:layout_margin="8dp"/>
    <DatePicker
        android:layout_margin="8dp"
        android:id="@+id/datepicker2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:calendarViewShown="true"
        android:datePickerMode="spinner"
        app:layout_constraintTop_toBottomOf="@+id/datepicker_title" />
    <Button
        android:padding="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/datepicker2_ok"
        app:layout_constraintTop_toBottomOf="@+id/datepicker2"
        app:layout_constraintRight_toRightOf="parent"
        android:text="@android:string/ok"/>
</LinearLayout>

I don't know what I am doing wrong.

Answer 1

Try to remove this line from datepicker

       android:datePickerMode="spinner"