How to turn off keyboard icon at TimePicker?

Question

I have a timepicker, everything works well but the problem is that I can't make it look like designer wants. For now it looks like this:

I need to hide this keyboard icon under the buttons. How can I do it? It's just a prototype, so here's only its xml:

<?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="match_parent"
  android:orientation="vertical"
  android:tag="ww">

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Time"
    android:textAppearance="?android:attr/textAppearanceLarge" />

  <TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:amPmBackgroundColor="#6400AA"
    android:numbersSelectorColor="#6400AA" />

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:orientation="horizontal">

    <Button
      android:id="@+id/button2"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="Cancel"
      android:textColor="#6400AA" />

    <Button
      android:id="@+id/button1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="OK"
      android:textColor="#6400AA" />

  </LinearLayout>

</LinearLayout>

Meagre

I do not believe you can remove the icon, it is part of the UI on Android O – Abortive

@Abortive May I change it on previous versions of Android? Say it 5.1 – Meagre

That icon is not there on previous versions, its there to make the manual editing of the time more apparent, you could always click on the time and change it but its wasnt obvious you could do that – Abortive

@Abortive Could you please write it as answer and I will close this question? – Meagre

Answer 1

As far as I can tell you cannot remove this icon, it is part of the UI on Android O.

The icon is there to make the manual editing of the time more apparent because in previous versions it was not obvious that you could click on the time and change it via keyboard

Abortive

how do we access that keyboard? I want that keyboard to be visible instead of the clock – Mehetabel

@Mehetabel you got any suggestion for showing digital picker instead of analog at initial view? – Indignation

@SARATHV try using R.style.Theme_***** or apply android:timePickerMode – Mehetabel

@Sarathv you can use MaterialTimePicker.Builder().setInputMode(INPUT_MODE_KEYBOARD) OR .setInputMode(INPUT_MODE_CLOCK)to show Keyboard and clock time picker respectively. – Bigler

Answer 2

I just inspected the hierarchy in layout inspector and found that keyboard icon. For portrait and landscape hierarchy is different, so we have a orientation check for this and also have OS check from Oreo(from Oreo only this icon is availble), I tried this code and it is working fine. PS: Kotlin Code

    fun hideKeyboardInputInTimePicker(orientation: Int, timePicker: TimePicker)
    {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O)
        {
            try
            {
                if (orientation == Configuration.ORIENTATION_PORTRAIT)
                {
                    ((timePicker.getChildAt(0) as LinearLayout).getChildAt(4) as LinearLayout).getChildAt(0).visibility = View.GONE
                }
                else
                {
                    (((timePicker.getChildAt(0) as LinearLayout).getChildAt(2) as LinearLayout).getChildAt(2) as LinearLayout).getChildAt(0).visibility = View.GONE
                }
            }
            catch (ex: Exception)
            {
            }

        }
    }

Call like this

hideKeyboardInputInTimePicker(this.resources.configuration.orientation, startTimePicker)

Oakland

Answer 3

Okay this is my solution. After inspecting the Layout I found that the keyboard is AppCompatImageButton. So you just do a recursion over the TimePicker which is a Viewgroup. So you can call it for example like this:

private fun initTimePicker() {
    timePicker.setIs24HourView(true)
    setImageButtonToGone(timePicker)
}

private fun setImageButtonToGone(viewGroup: ViewGroup) {
    for (i in 0 until viewGroup.childCount) {
        val child = viewGroup.getChildAt(i)
        if (child is LinearLayout) {
            setImageButtonToGone(child)
        } else if (child is AppCompatImageButton) {
            child.visibility = View.GONE
        }
    }
}

And you will get the desired layout.

WARNING!!! This depends heavely that the keyboard button is the only AppCompatImageButton if they change the XML of TimePicker this will not work properly anymore.

Piegari

Answer 4

Try to use:

timePicker.setDescendantFocusability(TimePicker.FOCUS_BLOCK_DESCENDANTS);

You also can use android:descendantFocusability="blocksDescendants" in xml.

Lethe

Answer 5

Android N :

Date/Time picker come with rolling clock and that improved interaction with users to make entry but that made minute selection more tedious .Rolling clock sucks big time in 24h mode and while using thumb it was impossible to see exact time .

Android O :

Date/Time picker (in Calendar, Clock, etc) gets one small icon(manual entry) at the bottom left: a keyboard. Tapping it switches to text-based entry where you can manually type in the exact precise time.

Muller

Answer 6

So I played with things a bit (probably more than I should have !! )

Here is some code to customize the TimePicker more (or at the very least to get others started for full customization mayhem...)

public static void Clock_Hide_Keyboard(TimePicker Clock){
    //Get Clock layout
    LinearLayout getClockInfo = (LinearLayout) Clock.getChildAt(0);
    //Get the layout of that stupid button
    LinearLayout keyboard = (LinearLayout) getClockInfo.getChildAt(4);
    //Abracadabra        
    keyboard.setVisibility(View.GONE);
}

public static void Clock_setLowerText(TimePicker Clock, String msg, float textSize){
    LinearLayout getClockInfo = (LinearLayout) Clock.getChildAt(0);
    TextView lowerText = (TextView) getClockInfo.getChildAt(2);
    lowerText.setText(msg);
    lowerText.setTextSize(textSize);
    lowerText.setGravity(View.TEXT_ALIGNMENT_GRAVITY);
    lowerText.setBackgroundColor(getColor("white"));
    lowerText.setTextColor(getColor("black"));
    lowerText.setVisibility(View.VISIBLE);
}

public static void Clock_setTime(TimePicker Clock,
                                 String colorBackground,
                                 float time_size,
                                 String colorHour,
                                 String colorSeperator,
                                 String colorMinute){
    //Get the Clock Layout
    LinearLayout getClockInfo = (LinearLayout) Clock.getChildAt(0);
    //Get the Time display layout and its children
    RelativeLayout timeLayout = (RelativeLayout) getClockInfo.getChildAt(0);
    TextView hour = (TextView) timeLayout.getChildAt(0);
    TextView seperator = (TextView) timeLayout.getChildAt(1);
    TextView minute = (TextView) timeLayout.getChildAt(2);
    //Set Layout color (Can be a background from drawable I suppose)
    timeLayout.setBackgroundResource(fun.getColor(colorBackground));
    //Set text size
    hour.setTextSize(time_size);
    seperator.setTextSize(time_size);
    minute.setTextSize(time_size);
    //Set Color
    hour.setTextColor(getColor(colorHour));
    seperator.setTextColor(getColor(colorSeperator));
    minute.setTextColor(getColor(colorMinute));
}

public static int getColor(String aString) {
    return ContextCompat.getColor(c.ctext, c.ctext.getResources().getIdentifier(aString, "color",c.ctext.getPackageName()));}

Sprite