How to Use MaterialAutoCompleteTextView with Completion Threshold - android

I'd like to start using material components in my Android app, and I am having a bit of trouble with the MaterialAutoCompleteTextView. I want it to behave like a standard AutoCompleteTextView, and I prefer the OutlinedBox style. Furthermore, it should observe the completionThreshold property, expanding the dropdown only after three matching characters are entered.
There are four styles available for this component that are creating an outlined box:
Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu
Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu
Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense
Widget.MaterialComponents.TextInputLayout.OutlinedBox
However, the first two styles do not observe the completionThreshold and expand the dropdown immediately when they are in focus. The remaining ones seem broken and are probably not meant to be used with this component.
One option obviously is to use one of the latter styles and modify it. But this could end up a bit messy for this relatively complex component, and it seems a rather hacky way to make use of a built-in behavior.
What would be the right approach?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Option 1"
app:helperText="OutlinedBox.Dense.ExposedDropdownMenu"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="3"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Option 2"
app:helperText="OutlinedBox.ExposedDropdownMenu"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="3"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Option 3"
app:helperText="OutlinedBox.Dense"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="3"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Option 4"
app:helperText="OutlinedBox"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="3"
/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

Please try using setThreshold(3) on your AutoCompleteTextView in your java code, and also set app:endIconMode="none" in your xml, in the TextInputLayout that contains the AutoCompleteTextView.

Related

How to change EditText style in AlertDialog?

I added Cyanea (a theme engine) into my app and the EditText style changed (see images, color doesn't matter. The first picture is how it looks now, and the second one is what I want the dialog to look like). How can I change old EditText style back?
My code:
dialog_input.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="4dp"
android:paddingTop="16dp">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/md_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/subj_name_input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Hello, World!"
android:hint="#string/subject_name_dialog_hint"
android:inputType="text"
android:maxLines="1"
android:maxLength="32" />
</com.google.android.material.textfield.TextInputLayout>
</FrameLayout>
Use the Widget.Design.TextInputLayout style:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.Design.TextInputLayout"

Soft Keboard covers up TextInputEditText inside a fragment activity

I have a fragment with 2 TextInputEditText. When my activity starts, the soft keyboard covers part of my input, and when clicking NEXT on the keyboard the focus passes to the second input that is completely covered by the keyboard. It´s possible to see what has been typed only when I close the keyboard.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/back_gradient"
android:orientation="vertical"
android:padding="#dimen/DP10"
tools:context=".activities.MainActivity">
<TextView
android:id="#+id/tv_new_course_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/SP22"
android:layout_marginBottom="150dp"
android:text="#string/newCourse"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/SP26"
android:textStyle="bold"/>
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/DP20"
android:layout_marginRight="#dimen/DP20"
android:hint="#string/courseName">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_new_course_name"
style="#style/LoginTextInputEditStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:nextFocusDown="#+id/et_new_course_acronym"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/DP20"
android:layout_marginRight="#dimen/DP20"
android:hint="#string/acronym">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_new_course_acronym"
style="#style/LoginTextInputEditStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_save_course"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/DP40"
android:layout_marginBottom="#dimen/DP10"
android:text="#string/save"
android:textColor="#color/color_ok"
app:cornerRadius="#dimen/DP15"
app:strokeColor="#color/color_ok"
app:strokeWidth="#dimen/DP2" />
The same layout works fine if inflated on an activity, but here it´s a fragment.
There are multiple ways to remove the problem:
Process 1
Use a ScrollView as the root layout and put all the other layouts inside it.
Process 2 (recommended)
Use android:windowSoftInputMode="adjustPan|adjustResize" in your manifest file.
More detail about this is here.
please add this in your activity attribute in the manifest
<activity android:name="Your_Activity" android:windowSoftInputMode="adjustPan" ></activity>

Switch right of TextInputLayout Android

I would like to place a Switch right of a TextInputLayout, with match_parent parameters on the TextInput and a margin.
Placing the switch to the left seems to work, however it is hidden when placing it to the right.
See the two images below:
As you can see the switch places itself wrongly.
Here is my XML code. The main layout is a CoordinatorLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social Networks"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#color/blue_grey_800"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Change the layout_width of your TextInputLayout to 0dp, and add this attribute to it as well:
android:layout_weight="1"
What's happening right now is that your TextInputLayout has a width of match_parent. What this will do is fill the entire remaining space of the parent (this is somewhat unique to LinearLayout). When your Switch is on the left, it gets enough space for it and then the TextInputLayout takes up the rest. However, when the Switch is on the right, the TextInputLayout takes up all the space first!
Using weight instead will make sure that other components get the space they need before the weighted component gets the extra space.
You're missing two bits in your XML.
Firstly, the orientation on your linear layout containing both your input layout and switch. Secondly, use weighting to show both items as you've specified that the text input layout should match the parent (fill the view width in this case).
This layout produces your desired output:
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social Networks"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#android:color/holo_red_dark"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
I would suggest you use RelativeLayout instead of LinearLayout, or even better redo the whole layout in a ConstraintLayout.
The RelativeLayout implementation would probably be something like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/textInputLayout"
android:layout_toStartOf="#+id/switch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#color/blue_grey_800"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_gravity="center_vertical"/>
</LinearLayout>

UI Design Issue

I am new to Android. I am creating a layout for a registration form. Base container I am using as relative layout. Inside relative layout i am keeping liner layout container and then inside this all components of a registration form.
But after drooping two edit text field inside liner layout I can see both the edit text field are overlapping each other and it is visible as one and also moving towards center in liner container. Hope so understood. Well I need components one after one horizontally. Help?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/l_border"
android:padding="30dp"
>
<EditText
android:id="#+id/txtMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Name"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
<EditText
android:id="#+id/txtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Mobile"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
</LinearLayout>
</RelativeLayout>
[
First of all, unless you want to add something over your inner LinearLayout, there is no point in nesting it inside the RelativeLayout.
Second, your inner LinearLayout has no orientation set, so by default is set to horizontal which means the first edit text (layout_width="match_parent") will push out of the screen the second EditText.
If you set the orientation for the inner LinearLayot, to "vertical", you will be able to see both fields.
If you want to have both edit texts, placed horizontally, set the "layout_width"="0; "weight"="1 on both of the text fields. Or you can play around with the RelativeLayout positioning.
UPDATE -- Suggested by #petey
Here's a way to achieve what you want:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" // this view is kind of pointless
android:background="#color/colorAccent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/l_border"
android:padding="30dp">
<EditText
android:id="#+id/txtMobile"
android:layout_width="0dp" // NOTICE THIS
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1" // // NOTICE THIS
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Name"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
<EditText
android:id="#+id/txtName"
android:layout_width="0dp" // NOTICE THIS
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="1" // NOTICE THIS
android:background="#drawable/ll_border"
android:backgroundTint="#color/colorAccent"
android:hint="Enter Mobile"
android:padding="10dp"
android:textColorHint="#color/colorBlack" />
</LinearLayout>

EditField in RelativeLayout has input lag

So I have a layout that is fairly simple and I have some weird interactions going on.
when i type on the "search_field" EditText the input works as expected. When I type in search_field2 field the input is randomly lagged and slow. Not every character is but its delayed enough to be unusable.
The only difference between the 2 editText fields is that the lagged one is nested in a relative layout. Does anyone know what could be causing it?
<?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="wrap_content"
android:orientation="vertical"
android:layout_margin="10sp"
>
<EditText
android:id="#+id/search_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:imeOptions="actionDone"
android:background="#FFF"
android:inputType="textPersonName"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="#+id/search"
android:src="#drawable/ico_search"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/search"
android:text="Top recognized"/>
<EditText
android:id="#+id/search_field2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/title"
android:ems="10"
android:imeOptions="actionDone"
android:background="#FFF"
android:inputType="textPersonName"/>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/order"
></ListView>
</LinearLayout>
We had a similar issue in an application. Unfortunately we never found any solution other than avoiding RelativeLayout. It seems that is the culprit to this, I just don't know why. Our solution was to use LinearLayout instead and then place things a bit differently. Not optimal if you like RelativeLayouts, but in our case the Linear were not too hard to use.

Categories

Resources