I'm experiencing a problem with the AutoCompleteTextView dropdown component.
As you can see from the image below, there are those black borders inside the popup that I cannot get rid of.
Black borders:
I'm an Android noob, and I already tried basically everything with any success.
Below the code, I'm using.
activity.xml:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="Categoria"
android:layout_marginRight="#dimen/spacing_xlarge"
app:hintEnabled="true"
app:boxBackgroundColor="#color/white"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<AutoCompleteTextView
android:dropDownSelector="#color/white"
android:id="#+id/private_place_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dropDownHeight="300dp"
android:inputType="none"
android:drawableTint="#color/white"
android:backgroundTint="#color/white"
android:editable="false"
android:textColor="#color/piumaBaseColor"
/>
</com.google.android.material.textfield.TextInputLayout>
dropdown_menu_popup_item.xml:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:paddingLeft="#dimen/spacing_medium"
android:paddingRight="#dimen/spacing_medium"
android:paddingBottom="#dimen/spacing_medium"
android:ellipsize="end"
android:maxLines="1"
android:textAppearance="#style/TextAppearance.MaterialComponents.Body1"
android:gravity="center_vertical"
android:background="#color/white"
android:backgroundTint="#color/white"
android:textColor="#color/grey_extradark"
android:text="test"/>
Can you please help me? Thank you a lot!
This dark lined are additional background from PopupBackgroundView. For fix the issue just use for background the same surfaceColor as you have in your theme
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="colorSurface">#FFFFFF</item>
</style>
Related
I have a TextInputLayout with the style OutlinedBox.ExposedDropdownMenu. I am trying to set the outline color using app:boxStrokeColor but it is not working.
The rest of customizations work, I mean, I can set the boxStrokeWidth correctly and the endIconTint correctly, too.
Any ideas?
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Select an option"
android:textColorHint="#0000ff"
app:endIconTint="#0000ff"
app:boxStrokeColor="#0000ff"
app:boxStrokeWidth="2dp"
app:startIconDrawable="#drawable/ic_baseline_bolt_24">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:focusable="false"
android:inputType="none"
android:hint="Select an option"/>
</com.google.android.material.textfield.TextInputLayout>
When I am running 360x640 it looks perfect, but when i go higher resolution it starts to look like that:
Code:
// TOP INPUT
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dob_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:focusable="false"
android:hint="#string/date_of_birth"
app:endIconDrawable="#drawable/ic_more_arrow"
app:endIconMode="custom"
app:layout_constraintEnd_toEndOf="#+id/bottom_text"
app:layout_constraintStart_toStartOf="#+id/bottom_text"
app:layout_constraintTop_toBottomOf="#+id/bottom_text">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dob_input_et"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:hint="#string/_12_15_2000"
android:importantForAutofill="no"
app:layout_constraintBottom_toTopOf="#+id/last_name_layout_input"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bottom_text" />
</com.google.android.material.textfield.TextInputLayout>
// BOTTOM INPUT
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/phoneNumber_input_layout"
style="#style/TextInputLayoutTransparent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:focusable="false"
android:hint="#string/phone_number"
android:paddingTop="8dp"
app:endIconDrawable="#drawable/ic_more_arrow"
app:endIconMode="custom">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/phoneNumber_input_et"
style="#style/text_input_black_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ems="10"
android:focusable="false"
android:hint="#string/set_your_phone_number"
android:importantForAutofill="no"/>
</com.google.android.material.textfield.TextInputLayout>
What I tried is going with some custom padding between TextInputLayout and TextInputEditText but it changed nothing. First input is default style and the other one is custom, that's another thing that I thought was worth to look into.
EDIT
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
this little imp which is present in styles-v27 and above is making this effect, when i get rid of it, it's looking perfect.
Anyone has any idea what might be the reason for it?
I want to know why my autocomplete textview suggestion is hiding the autocomplete textview , i am attaching the picture for better understanding.
<AutoCompleteTextView
android:id="#+id/current_location"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/round_background_white"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingLeft="5dp"
android:completionThreshold="1"
android:dropDownHeight="80dp"
android:dropDownWidth="wrap_content"
android:singleLine="true"
android:focusable="true"
android:textColor="#000000"
android:textColorHint="#000000"
android:dropDownListViewStyle="#style/DropDownListViewStyle"/>
Style.xml:
<style name="DropDownListViewStyle">
<item name="android:dividerHeight">2dp</item>
</style>
It's probably due to the custom drawable round_background_white.
Make sure you are specifying enough height & padding in it.
Also post your round_background_white over here.
I am using AutoCompleteTextView in my layout. But it's colorControlNormal and Activate is not Working as I expected.
My Color value is #0072BA.
Below is figure for Different Device.
1.) Android Kitkat
2.) Android LolliPop
3.) Android Marshmallow
Xml code that i used is below
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/md_black_1000"
android:layout_marginTop="5dp"
android:textSize="15sp"
android:text="Medical Store Name"
android:textColorHint="#999999"
android:layout_below="#+id/search_drug_store"
android:id="#+id/autoCompleteTextView_storename"
android:layout_marginLeft="15dp"
android:layout_marginRight="10dp"/>
<AutoCompleteTextView
android:id="#+id/autoCompleteTextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="12sp"
android:textColor="#999999"
android:layout_below="#+id/autoCompleteTextView_storename"
android:layout_marginLeft="25dp"
android:inputType="textNoSuggestions"
android:layout_marginRight="10dp"/>
I am not giving any style to AutoCompleteTextView then Why it's Happening ?
What I Have Try :
If i give this Style
Reference Material Design link :
http://www.materialdoc.com/autocomplete-view/
and give this style
<style name="Autocomplete" parent="Widget.AppCompat.Light.AutoCompleteTextView">
<item name="android:background">#color/green500</item>
<item name="colorControlNormal">#color/amber500</item>
<item name="colorControlActivated">#color/cyan500</item>
</style>
But in Lollipop nothing has Change.
Is this bug in lollipop version or i am doing something wrong ?
actually this is not solution to this problem but you can use this for unique design all over device.
i have implemented for edittext like this in xml,set background null for edittext and add horizontal line below edittext.
<EditText
android:id="#+id/newPasswordEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:background="#null"
android:textColor="#color/color_black"
android:inputType="textPassword"
android:layout_marginBottom="10dp"
android:hint="Enter New Password"
android:layout_marginTop="10dp"
android:textSize="14sp"
android:layout_below="#+id/titleTextView" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="2dp"
android:orientation="horizontal"
android:layout_marginBottom="7dp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_below="#+id/newPasswordEditText"
android:background="#color/color_standard_green" />
There is no bug in lollipop version you just not override the style of theme with your style,use in this way https://stackoverflow.com/a/26631227/4745569
I'm using a TextInputLayout wrapped around an EditText. Right now the counter is black, I'd like it to be white. I'm not sure what option to set to get it to be white.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
>
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
I decided to write this answer based on comments from previous one.
At first, you need to create the style for your counter, for example:
<style name="CounterStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#android:color/white</item>
<!--other parameters that you want to change -->
</style>
Then add this style to TextInputLayout:
app:counterTextAppearance="#style/CounterStyle"
That's all, it should works. Full code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterTextAppearance="#style/CounterStyle"
android:textColor="#color/white"
android:textColorHint="#color/white">
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
You can also use some style for the overflow counter:
app:counterOverflowTextAppearance="#style/YourOverflowTextStyleHere"
As described here (thanks #Sufian for the link)
Please add:
app:counterTextAppearance="#android:color/white"
to your TextInputLayout.
Hope this helps!