Showing the MaterialDatePicker when clicking into the Material Outlined Text Field - android

I am working on a small app where the user can start an activity.
By doing that, a text input shall is shown where todays date is set by default.
When clicking into the text field, the MaterialDatePicker shall be shown as dialog.
I have successfully implemented that the MaterialDatePicker shows up when clicking on a button, but I cannot find a sololution to show the dialog instead of the Android standard android keyboard.
Any advises on that?
Activity XML:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/edtStartWearLensDate"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/txtLabelWearSelectStartDate"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txtLabelStartWearLensID">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
Activity:
On Create:
edtStartWearLensDate = findViewById(R.id.edtStartWearLensDate);
edtStartWearLensDate.setOnClickListener(view -> onEdtStartWearLensDateClick());
On Click into the text field
private void onEdtStartWearLensDateClick() {
showDatePickerDialog();
}
Method to show dialog (works when calling from a Button on click listener)
private void showDatePickerDialog(){
MaterialDatePicker.Builder builder = MaterialDatePicker.Builder.datePicker();
builder.setTitleText("Select start date");
builder.setSelection(MaterialDatePicker.todayInUtcMilliseconds());
final MaterialDatePicker materialDatePicker = builder.build();
materialDatePicker.show(getSupportFragmentManager(), "DATE_PICKER");
materialDatePicker.addOnPositiveButtonClickListener(new MaterialPickerOnPositiveButtonClickListener() {
#Override
public void onPositiveButtonClick(Object selection) {
edtStartWearLensDate.getEditText().setText(materialDatePicker.getHeaderText());
}
});
}

Try to set the clickable and focusable properties to true in the TextInputEditText:
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/text_input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:clickable="true"/>
And call the setOnClickListener method on it:
findViewById<TextInputEditText>(R.id.text_input_edit_text).setOnClickListener(view -> onEdtStartWearLensDateClick())

Related

Unable to get the data from EditText view in the alert dialog

I created an alertDialog which basically contains two editTexts to enter the data(component Id, component name).When the user clicks on yes button in the alert dialog new component is added to the datbase(as of now I haven't added any on click listeners for yes and no buttons in the dialog) but for some reason I can't get the data from the edit text. I'm new to android app development please help me out guys.....Thanks in Advance :)
Note : 1. I'm using viewModel.flag so that the alertDialog stays persistent with rotations.
onCancel() method simply cancels the alertDialog(I intend to use this for updating certain parameters).
This is kotlin code which creates the alert dialogs.
fun onAddComponent()
{
val builder = AlertDialog.Builder(requireActivity())
builder?.setTitle("New Component Info")
val inflater = requireActivity().layoutInflater
builder?.setView(inflater.inflate(R.layout.new_comp, null))
builder?.setPositiveButton(R.string.Okay_button){ dialogInterface, which->
viewModel.flag = false
val editText : EditText? = compAlert?.findViewById(R.id.new_Component)
println(editText.toString())
}
builder?.setNegativeButton(R.string.NO){ dialogInterface, which->
viewModel.flag = false
}
compAlert= builder?.create()
compAlert?.setOnCancelListener{OnCancel()}
viewModel.flag = true
compAlert?.show()
}
This is the xml layout which I inflated in the onAddComponent()
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/new_Component"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:ems="10"
android:hint="comp Id"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/new_component_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="comp name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/new_Component"
app:layout_constraintStart_toStartOf="#+id/new_Component"
app:layout_constraintTop_toBottomOf="#+id/new_Component" />
</androidx.constraintlayout.widget.ConstraintLayout>
To get the text inside the EditText you need to do editText.getText().toString() and NOT editText.toString() which you have in your code.
In your code, editText.toString() will return the string representation of the editText object. See the documentation of String's toString() method here.

How to open an EditText View when clicking on an Action Bar Menu Options Item

I am working on an app (in Java) where the Action bar has an Options Menu of items/options (onCreateOptionsMenu resulting in the three vertical dots on the top right of the screen), so that when the user clicks on the three vertical dots, the menu expands showing the list of items/options. I want one of these items, when clicked, to open up an EditText view to enable the user to enter some text. I've spent quite some time researching this but I've not been able to find how it's done. Can somebody please provide the outline of how to achieve this or perhaps point me to an example.
Many thanks
create a dialog_layout.xml file and add below code
<?xml version="1.0" encoding="utf-8"?>
<EditText
android:id="#+id/editTextDialog"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/edit_text_background"
android:hint="#string/about_routine_dialog_image"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:textColor="#3C3B3B"
android:inputType="number"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end">
<Button
android:id="#+id/buttonDialogSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/submit"/>
</LinearLayout>
then run below function calling showDialog when user click on that particular menu-item:
public void showDialog() {
Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog_layout);
final EditText editText = dialog.findViewById(R.id.editTextDialog);
Button buttonDialog = dialog.findViewById(R.id.buttonDialogSubmit);
buttonDialog.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
String text = editText.getText().toString(); //your text from editText
dialog.dismiss();
//do your work here
}
});
dialog.setCanceledOnTouchOutside(false);
dialog.show();
}

How to show error at autocompleteTextView dropdown if user doesn't select in android?

I have question to answer my curiosity. I have implemented dropdown with material design like snippet code xml at the below
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/provinsi_register_form"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/address_register_form">
<AutoCompleteTextView
android:id="#+id/filled_dropdown_provinsi"
style="#style/greySubText"
android:layout_width="match_parent"
android:layout_height="55dp"
android:hint="#string/provinsi_form"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
You can see the result implementation on this link
picture result dropdown
for the list, I got from ViewModel like on this snipet code below:
konfirmasiViewModel.provinsi.observe(this, { provinsi ->
for (i in provinsi.indices) {
provinsiNama.add(provinsi[i].provinsi!!)
}
val adapter =
ArrayAdapter(this, R.layout.support_simple_spinner_dropdown_item, provinsiNama)
filled_dropdown_provinsi.setAdapter(adapter)
filled_dropdown_provinsi.setOnItemClickListener { adapterView, view, i, l ->
lifecycleScope.launch {
siscaPreference.saveId(provinsi[i].id!!)
}
prov = provinsi[i].id.toString()
}
})
How to make condition if user doesn't choose anything either click by button or not?
Thanks for much attention

Hide the keyboard after clicking on the EditText

I'm using Date and Time Picker to handle the meeting date field, so there is no need for the keyboard. How can I prevent the keyboard from showing after clicking on the field?enter image description here
There is a better way of programatically hiding the keyboard.
Go in xml and add the following attribute android:focusable="false"
E.g
<EditText
android:id="#+id/time_date_et"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/prompt_light"
android:focusable="false"
android:textSize="17sp" />
The above attribute ensures that the keyboard won't appear!
You can use property android:focusableInTouchMode="false" in xml
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:inputType="text|date"/>
And add click listener to this view in code
editText.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
//show date picker
}
});
val activity: Activity = this //if you are in the Activity
val imm = activity.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
var view = activity.currentFocus
if (view == null) {
view = View(activity)
}
imm.hideSoftInputFromWindow(view.windowToken, 0)
this piece of code should hide your virtual keyboard. Just put it in a method and call. :)

TextInputEditText needs 2 taps to fire the associated listener

I have a view with some input fields, one of those is a TextInputEditText with a datepicker associated which shows up when the field is selected. The problem is that at the first tap, the TextInputEditText field gets the focus and it is required a second tap do show the datepicker.
This is how the field is defined
<android.support.design.widget.TextInputLayout
android:id="#+id/wExpiresAt"
style="#style/AppTheme.TextInputLayout"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:errorTextAppearance="#style/AppTheme.Text.ErrorText"
app:hintTextAppearance="#style/AppTheme.Text.HintText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/wMessage">
<android.support.design.widget.TextInputEditText
android:id="#+id/tvExpiresAt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/tv_pick_date_ph"
android:imeOptions="actionNext"
android:textSize="18sp" />
</android.support.design.widget.TextInputLayout>
While inside the activity:
val mExpiresAt: TextInputEditText = findViewById(R.id.tvExpiresAt)
mExpiresAt!!.setOnClickListener {
val cal = Calendar.getInstance()
val year = cal.get(Calendar.YEAR)
val month = cal.get(Calendar.MONTH)
val day = cal.get(Calendar.DAY_OF_MONTH)
val dialog = DatePickerDialog(
this#NewMessageActivity,
android.R.style.Theme_Material_Light_Dialog_MinWidth,
mDateSetListener,
year, month, day)
dialog.show()
}
My guess is that the problem is caused by the TextInputLayout which wraps the TextInputEditText, the first tap fires the animation which moves the hint string from the text field to its top and gives the focus to the field itself, the second tap fires the listener associated to the text field and the datepicker appears. How can I get all the events on the first tap?
Just set for editText. It allows for a view to handle click and focus at the same time!
android:focusableInTouchMode="false"

Categories

Resources