How to style DatePicker on Android

Question

I have date picker which I've tried to customize to a different style but to no avail. I want to show a DatePicker and not a DatePickerDialog.

In the layout design tab on Android Studio, the DatePicker's background color is black and the text color is white.

However, the datePicker occupies space on the device screen but is not visible. I've also tried to change the AppTheme. The DatePicker code is below:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.AgeFragment">


        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:fontFamily="@font/roboto_medium"
            android:text="Sign up"
            android:textColor="@color/titleBlack"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            app:srcCompat="@drawable/ic_baseline_arrow_back_24"
            app:layout_constraintBottom_toBottomOf="@+id/textView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:fontFamily="@font/roboto_medium"
            android:text="When's your birthday?"
            android:textColor="@color/titleBlack"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Your birthday won't be shown publicly"
            android:textColor="#7A7474"
            android:textSize="16sp"
            app:layout_constraintStart_toStartOf="@+id/textView2"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

        <DatePicker
            android:id="@+id/date_picker2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:calendarViewShown="false"
            android:calendarTextColor="@android:color/holo_green_dark"
            android:background="@android:color/holo_red_dark"
            android:datePickerMode="spinner"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView3"
            tools:targetApi="lollipop" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:background="@color/pinkBtnBackground"
            android:fontFamily="sans-serif-medium"
            android:text="Next"
            android:textAllCaps="false"
            android:textColor="@android:color/white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/date_picker2" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorPrimaryDark">@android:color/transparent</item>
        <item name="colorAccent">@android:color/transparent</item>
        <item name="android:background">@android:color/white</item>
        <item name="android:textColor">@color/textColor</item>
        <item name="android:datePickerStyle">@style/DatePickerStyle</item>

    </style>

    <style name="DatePickerStyle">
        <item name="android:calendarTextColor" tools:ignore="NewApi">@android:color/holo_green_dark</item>
        <item name="backgroundColor">@android:color/holo_red_dark</item>
    </style>

The result is still the same. I've searched for answers but none provides a solution to this problem. Any help or reference to a documentation that provide an explanation would be highly appreciated.

Answer 1

Try removing <item name="android:background">@android:color/white</item> from the style. It is messing with your current Layout