79396671

Date: 2025-01-29 12:09:25
Score: 2
Natty:
Report link

How to Customize AppCompat EditText in Android with Focus Effects? I'm trying to customize AppCompat EditText in my Android app by adding:

A cut-cornered border that changes color when focused. A dynamic icon that switches color when the EditText gains or loses focus. I've implemented the following:

1️⃣ EditText Border Selector (custom_edit_text_cut.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Border turns green when focused -->
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="2dp" android:color="@color/colorPrimary"/>
        </shape>
    </item>

    <!-- Border turns gray when not focused -->
    <item android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="2dp" android:color="@android:color/darker_gray"/>
        </shape>
    </item>

</selector>

2️⃣ Icon Selector (custom_mail_icon.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Icon turns green when focused -->
    <item android:drawable="@drawable/ic_mail_focused" android:state_enabled="true" android:state_focused="true"/>

    <!-- Default gray icon -->
    <item android:drawable="@drawable/ic_mail" android:state_enabled="true"/>

</selector>

3️⃣ Usage in activity_main.xml

 <EditText
        android:id="@+id/emailField1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:background="@drawable/custom_edit_text_cut"
        android:drawableStart="@drawable/custom_mail_icon"
        android:drawablePadding="12dp"
        android:hint="Email"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"/>

Issue: The border color and icon change work fine, but sometimes the icon flickers when gaining/losing focus. Has anyone faced this issue? Any optimizations or best practices for handling focus changes dynamically?

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • Ends in question mark (2):
  • Starts with a question (0.5): How to
  • Low reputation (1):
Posted by: salman khan