Material 2 Date Picker Android Text Size so small

I face the issue when implement Material 2 DatePicker in MDC. the text size look so small when running. I haven’t implement any theme / style to my date picker

screenshot-datepicker

I see tutorial example https://www.geeksforgeeks.org/material-design-date-picker-in-android/ and it look normal even without implement any style.

AndroidManifest.xml

 <application
    android:name=".MyApplication"
    android:allowBackup="false"
    android:dataExtractionRules="@xml/data_extraction_rules"
    android:fullBackupContent="@xml/backup_rules"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="false"
    tools:targetApi="31”>

Fragment.kt

  private fun showDatePicker(){
    viewBinding.btnEditProfile.setOnClickListener {
        object : DialogDatePicker(requireActivity()) {
            override fun onSelectedDate(date: String) {
                viewBinding.root.showSnackbar(date)
            }
        }.singleDatePicker(fragmentManager = childFragmentManager,
            startDate = -70,
            endDate = -10)
    }
}

DatePicker

fun singleDatePicker(fragmentManager: FragmentManager, startDate : Int = 0, endDate : Int = 0){

    val today = Date()

    val starCal = Calendar.getInstance()
    starCal.time = today
    starCal.add(Calendar.YEAR, startDate)

    val endCal = Calendar.getInstance()
    endCal.time = today
    endCal.add(Calendar.YEAR, startDate)

    val constraintsBuilder = CalendarConstraints.Builder()
    if (endDate != 0) {
        constraintsBuilder.setEnd(endCal.timeInMillis)
        constraintsBuilder.setOpenAt(endCal.timeInMillis)
    }
    if (startDate != 0)
        constraintsBuilder.setStart(endCal.timeInMillis)

    val builder = MaterialDatePicker.Builder.datePicker()
        .setTitleText("Pilih Tanggal")
        .setCalendarConstraints(constraintsBuilder.build())

    val picker = builder.build()

    // Set a listener to handle the selected date
    picker.addOnPositiveButtonClickListener { selection ->
        if (selection != null) {
            // Handle the selected date (selectedDate)
            val calendar = Calendar.getInstance()
            calendar.timeInMillis = selection
            val year = calendar.get(Calendar.YEAR)
            val month = calendar.get(Calendar.MONTH)
            val day = calendar.get(Calendar.DAY_OF_MONTH)
            // Do something with the selected date
            onSelectedDate(
                year.toString()+"-"+ String.format(
                    "%02d",
                    month + 1
                )+ "-" + String.format("%02d", day)
            )
        }
    }

    // Show the date picker
    picker.show(fragmentManager, picker.toString())
}

Theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name=“AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/blue_500</item>
    <item name="colorPrimaryDark">@color/blue_800</item>
    <item name="colorAccent">@color/blue_300</item>
    <item name="colorPrimaryVariant">@color/blue_650</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/blue_800</item>
    <item name="colorSecondaryVariant">@color/blue_800</item>
    <item name="colorOnSecondary">@color/blue_200</item>

    <item name="android:windowBackground">@color/blue_700</item>
    <item name="android:colorForeground">@color/blue_600</item>
    <item name="buttonTint">?attr/colorPrimary</item>
    <item name="textAppearanceCaption">@color/caption</item>
    <item name="textAppearanceBodySmall">@color/blue_100</item>
    <item name="textAppearanceBodyMedium">@color/blue_100</item>
    <item name="textAppearanceBodyLarge">@color/blue_100</item>
    <item name="textAppearanceSubtitle1">@color/blue_100</item>
    <item name="textAppearanceSubtitle2">@color/blue_100</item>
    <item name="textAppearanceHeadline5">@color/blue_100</item>
    <item name="textAppearanceHeadline4">@color/blue_100</item>
    <item name="textAppearanceHeadline3">@color/blue_100</item>
    <item name="textAppearanceHeadline2">@color/blue_100</item>
    <item name="textAppearanceHeadline1">@color/blue_100</item>
    <item name="colorOutline">@color/blue_500</item>
    <item name="hintTextColor">@color/grey_cold</item>
    <item name="indicatorColor">@color/light_grey</item>
    <item name="colorTertiary">@color/blue_200</item>
    <item name="colorOnTertiary">@color/blue_700</item>
    <item name="android:activatedBackgroundIndicator">@color/grey</item>

    <!-- Status bar color. -->
    <item name="android:statusBarColor">@color/blue_700</item>
    <!-- Customize your theme here. -->


</style>

All right, I was finally able to reproduce this issue when I copied your style straight into my test app. The problem are all the textAppearance... properties - when I removed them, everything went back to normal.

I'm not that familiar with Material DatePickers, but guessing from the name, I think any textAppearance... property should be assigned with a TextAppearance value, not a color. Assigning a color probably leads to some unexpected behaviour, which you just experienced.