Is there a way to disable date input method inside google material date picker

Question

"i'm using google's material date picker 'com.google.android.material:material:1.1.0-alpha10' version,and i want to disable the input method through keyboard,is there a way to disable/hide the edit method"

Bimetallic

It doesn't seem like a good idea, as it will hurt accessibility. Not everyone can use the calendar method. – Ragtime

Any success? I also want to implement this functionality. – Undertint

Answer 1

you can use custom style as workaround to disable calendar input mode toggle. This toggle uses style attribute materialCalendarHeaderToggleButton, so:

<style name="Widget.AppTheme.MaterialDatePicker" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarHeaderToggleButton">@style/Widget.AppTheme.MaterialCalendar.HeaderToggleButton</item>

<style name="Widget.AppTheme.MaterialCalendar.HeaderToggleButton" parent="Widget.MaterialComponents.MaterialCalendar.HeaderToggleButton">
<item name="android:visibility">gone</item>

And after that apply theme with:

MaterialDatePicker.Builder.dateRangePicker()
    .setTheme(R.style.Widget_AppTheme_MaterialDatePicker)

Balliol

Answer 2

You can access PickerDialogs View and then make this button Gone but make sure to wait for the dialogs view to initialize first by adding this line after dialog.show method

activity?.supportFragmentManager?.executePendingTransactions()

then

(picker.view?.findViewById(R.id.mtrl_picker_header_toggle) as View).visibility = View.GONE 

Spearhead

Answer 3

After surfing out on this scenario for while I was able to find a good solution on this. Here is the solution on how to achieve this scenario.

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
</style>

<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerSize">16dp</item>
</style>

<style name="ThemeOverlay.App.DatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="colorPrimary">@color/txt_yellow</item>
    <item name="colorAccent">@color/txt_yellow</item>
    <item name="materialCalendarHeaderToggleButton">
        @style/Widget.AppTheme.MaterialCalendar.HeaderToggleButton
    </item>
    <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent
    </item>
    <item name="buttonBarPositiveButtonStyle">@style/TextButton</item>
    <item name="buttonBarNegativeButtonStyle">@style/TextButton</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="itemStrokeColor">@color/txt_yellow</item>
</style>

<style name="Widget.AppTheme.MaterialCalendar.HeaderToggleButton" parent="Widget.MaterialComponents.MaterialCalendar.HeaderToggleButton">
    <item name="android:visibility">gone</item>
</style>

<style name="TextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    <item name="android:textColor">@color/black</item>
</style>

Adjust this code into your styles code of the MaterialDialog Theme.

And later add this line for calling your custom theme into the dialog.

MaterialDatePicker.Builder.dateRangePicker()
    .setTheme(R.style.ThemeOverlay.App.DatePicker)

By this, you will be able to remove the input mode icon.

Kudos to the same issue listed in the mateial github for android. Material Github Link

Happy Coding :)

Streaming