Android text selection handles have white background (instead of transparent)

Question

The following screenshot shows my problem:

The text selection handles have a white background and overlay other UI elements. How can I make the background transparent?

Or the better question is actually: what could I possibly have done to make the background white?

Here is the style applied to the EditText :

<style name="TextInputLayout" parent="AppTheme">
    <item name="android:background">@color/grey_50</item>
    <item name="colorControlNormal">@color/grey_500</item>
    <item name="colorControlActivated">@color/grey_900</item>
    <item name="colorControlHighlight">@color/grey_900</item>
    <item name="backgroundTint">@color/grey_900</item>
    <item name="colorAccent">@color/grey_900</item>
    <item name="colorPrimary">@color/grey_900</item>
    <item name="android:textCursorDrawable">@null</item>
</style>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/grey_500</item>
    <item name="colorPrimaryDark">@color/grey_500</item>
    <item name="colorAccent">@color/grey_700</item>
    <item name="android:colorBackground">@color/grey_50</item>
    <item name="android:colorForeground">@color/grey_900</item>
    <item name="android:textColorPrimary">@color/grey_900</item>
    <item name="android:textColorPrimaryInverse">@color/grey_50</item>
    <item name="android:textColorSecondary">@color/grey_900</item>
    <item name="android:textColorSecondaryInverse">@color/grey_50</item>
    <item name="android:windowBackground">@color/grey_50</item>
    <item name="android:textColorHint">@color/grey_700</item>
    <item name="android:colorActivatedHighlight">@color/grey_900</item>
    <item name="colorControlNormal">@color/grey_700</item>
    <item name="colorControlActivated">@color/grey_900</item>
    <item name="colorControlHighlight">@color/grey_900</item>
    <item name="android:textColorHighlight">@color/grey_500</item>
    <item name="android:colorControlNormal" tools:targetApi="lollipop">@color/grey_700</item>
    <item name="android:colorControlActivated" tools:targetApi="lollipop">@color/grey_900</item>
    <item name="android:colorControlHighlight" tools:targetApi="lollipop">@color/grey_900</item>
    <item name="android:stateListAnimator" tools:targetApi="lollipop">@null</item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@color/grey_900</item>
    <item name="android:navigationBarColor" tools:targetApi="lollipop">@color/grey_900</item>
</style>

Edit #1

The EditText's XML (note that I see the same behaviour with EditText s and AppCompatEditText s):

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_home_autocomplete"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/activity_horizontal_margin_small"
    android:layout_marginTop="@dimen/activity_horizontal_margin_small"
    android:layout_weight="3.5"
    android:background="@null"
    android:hint="@string/location"
    android:padding="@dimen/activity_vertical_margin_medium"
    android:theme="@style/TextInputLayout"
    app:hintAnimationEnabled="true"
    app:hintEnabled="true"
    app:hintTextAppearance="@style/TextAppearance.TextInputLayout">

    <AutoCompleteTextView
        android:id="@+id/user_home_autocomplete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3.5"
        android:dropDownWidth="match_parent"
        android:inputType="textAutoComplete"
        android:maxLines="1"
        android:paddingTop="@dimen/activity_horizontal_margin_small" />

</android.support.design.widget.TextInputLayout>

The Phone I used for the screenshot runs Android 6.0.1 with OxygenOS 3.2.7

Getting rid of all @null elements did not work.

Answer 1

As per the android docs, the theme is applied to views used in the layouts of entire activity or application. For individual views in the layout , we need to apply styles.

Ref: https://developer.android.com/guide/topics/ui/themes.html

The theme is applied as a common style for all the views in an activity or application.

Answer 2

从主题<item name="android:popupBackground">????</item>删除它

Answer 3

This could happen if you set a background color in your main theme , something like this

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:background">@color/white</item>
    ...
 </style>

remove this property solve this issue for me , if you want to setup a background for all your screens set windowBackground instead.

<item name="android:windowBackground">@color/white</item>

Answer 4

This happens because you set the background as part of the style, and declare android:theme="@style/TextInputLayout" as theme and not as style.

This makes that the children views of that view have the same behaviour including the text selection handler.

Move this line <item name="android:background">@color/grey_50</item> out of the style.

Answer 5

please set the background for the view :

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="YOUR_CUSTOM_COLOR" />
    <item android:state_selected="true" android:color="#80000000" />
    <item android:color="YOUR_CUSTOM_COLOR" />
    </selector>

Answer 6

try this may help you

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Pressed State -->
    <item android:state_pressed="true"
        android:color="#FFFFFF" />  

    <!-- Focused State -->
    <item android:state_focused="true"
        android:color="#FFFFFF" /> <!-- use background color here -->

    <!-- Default State -->
    <item android:color="#000000" />
</selector>

set this property as background to your edit-text