Comment Implémenter le Clic sur les Drawables EditText

La fonctionnalité drawable dans EditText permet aux développeurs d’ajouter des icônes sur les côtés des champs de saisie Android. Cependant, implémenter le clic sur les drawables d’EditText nécessite une approche spécifique utilisant OnTouchListener. Dans ce guide pratique, vous apprendrez des techniques éprouvées avec du code prêt à l’emploi optimisé pour les meilleures performances et expérience utilisateur.

Comprendre les Concepts du Clic Drawable EditText

L’EditText d’Android supporte le placement de drawables dans quatre positions différentes : start, top, end et bottom. Pour gérer les clics sur ces éléments, vous devez utiliser OnTouchListener car il n’existe pas de méthode onClick dédiée. Cette approche permet la détection précise des coordonnées de toucher et la comparaison avec la zone du drawable.

En tant que développeur, comprendre le mécanisme du clic drawable EditText est crucial pour créer des expériences utilisateur intuitives. Cette technique est couramment utilisée dans les formulaires de saisie, les champs de recherche et les contrôles numériques des applications Android modernes.

Implémentation du Layout XML pour les Drawables

Premièrement, créez un layout avec EditText ayant des drawables dans les propriétés drawableStart et drawableEnd. Assurez-vous d’avoir ajouté les icônes requises dans le dossier res/drawable avec des tailles et résolutions appropriées.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    android:padding="16dp">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:drawableStart="@drawable/ic_baseline_remove_circle_24"
        android:drawableEnd="@drawable/ic_baseline_add_circle_24"
        android:drawablePadding="8dp"
        android:ems="10"
        android:gravity="center_horizontal"
        android:inputType="number"
        android:text="1"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Configuration d’OnTouchListener dans MainActivity

Voici l’implémentation complète d’OnTouchListener pour détecter les clics sur les drawables. Utilisez les constantes de position des drawables et calculez les zones de limite de toucher avec précision pour une interaction fiable.

public class MainActivity extends AppCompatActivity {

    private static final int DRAWABLE_LEFT = 0;
    private static final int DRAWABLE_RIGHT = 2;
    
    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setupDrawableClickListeners();
    }

    private void setupDrawableClickListeners() {
        EditText myText = findViewById(R.id.editText1);
        myText.setOnTouchListener((view, motionEvent) -> {
            if (motionEvent.getAction() == MotionEvent.ACTION_UP) {
                Drawable[] drawables = myText.getCompoundDrawables();
                
                // Détecter le clic sur le drawable end (droite)
                if (isDrawableClick(motionEvent, myText, drawables, DRAWABLE_RIGHT)) {
                    incrementValue();
                    return true;
                }
                
                // Détecter le clic sur le drawable start (gauche)
                if (isDrawableClick(motionEvent, myText, drawables, DRAWABLE_LEFT)) {
                    decrementValue();
                    return true;
                }
            }
            return false;
        });
    }

    private boolean isDrawableClick(MotionEvent event, EditText editText, 
                                   Drawable[] drawables, int drawableIndex) {
        if (drawables[drawableIndex] == null) {
            return false;
        }
        
        int drawableWidth = drawables[drawableIndex].getBounds().width();
        float x = event.getRawX();
        
        switch (drawableIndex) {
            case DRAWABLE_RIGHT:
                return x >= (editText.getRight() - drawableWidth - editText.getPaddingRight());
            case DRAWABLE_LEFT:
                return x <= (editText.getLeft() + drawableWidth + editText.getPaddingLeft());
            default:
                return false;
        }
    }

    private void incrementValue() {
        EditText myText = findViewById(R.id.editText1);
        try {
            int value = Integer.parseInt(myText.getText().toString());
            myText.setText(String.valueOf(value + 1));
        } catch (NumberFormatException e) {
            myText.setText("1");
        }
    }

    private void decrementValue() {
        EditText myText = findViewById(R.id.editText1);
        try {
            int value = Integer.parseInt(myText.getText().toString());
            if (value > 1) {
                myText.setText(String.valueOf(value - 1));
            }
        } catch (NumberFormatException e) {
            myText.setText("1");
        }
    }
}