Dans le développement Android, la personnalisation de l'interface utilisateur repose souvent sur l'utilisation de ressources XML dessinables (drawables). L'utilisation des balises <shape> et <selector> permet de créer des composants avec des bordures arrondies, des dégradés de couleurs d'arrière-plan et des bordures réactives aux états, sans avoir recours à des images matricielles.

Configuration de la mise en page principale

Le fichier de mise en page initial contient un bouton permettant de naviguer vers l'activité de démonstration des styles.

<?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">

    <Button
        android:id="@+id/btnNavigate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Afficher les styles personnalisés"
        android:onClick="navigateToCustomViews"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_margin="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Logique de navigation

L'activité principale gère simplement l'événement de clic pour lancer l'activité secondaire.

package com.example.customuidemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class HomeActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
    }

    public void navigateToCustomViews(View view) {
        startActivity(new Intent(this, CustomViewActivity.class));
    }
}

Mise en page de démonstration des styles

Cette mise en page intègre un champ de saisie et un bouton. Le champ de saisie utilise un arrière-plan personnalisé avec une bordure et des coins arrondis. Le bouton utilise un sélecteur d'état pour modifier son apparence lors de l'interaction.

<?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="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Identifiant :"
        android:textSize="18sp"
        android:layout_marginBottom="8dp"/>

    <EditText
        android:id="@+id/inputUsername"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/edit_text_background"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:layout_marginBottom="24dp"/>

    <Button
        android:id="@+id/btnGradient"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/button_state_background"
        android:text="Bouton avec état et dégradé"
        android:textColor="@android:color/white"/>
</LinearLayout>

Activité secondaire

package com.example.customuidemo;

import android.app.Activity;
import android.os.Bundle;

public class CustomViewActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_view);
    }
}

Définition de l'arrière-plan du champ de saisie

Le fichier edit_text_background.xml définit une forme rectangulaire avec un remplissage blanc, une bordure verte, des coins arrondis et un espacement interne.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <solid android:color="#FFFFFF" />
    
    <stroke 
        android:width="2dp" 
        android:color="#4CAF50" />
        
    <corners android:radius="12dp" />
    
    <padding 
        android:left="8dp" 
        android:top="8dp" 
        android:right="8dp" 
        android:bottom="8dp" />
</shape>

Définition de l'arrière-plan réactif du bouton

Le fichier button_state_background.xml utilise un <selector> pour basculer entre deux états. À l'état pressé, la bordure change de couleur et un dégradé horizontal est appliqué. À l'état par défaut, un remplissage uni est utilisé.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- État pressé -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke 
                android:width="2dp" 
                android:color="#E91E63" />
            <corners android:radius="8dp" />
            <gradient 
                android:startColor="#4CAF50" 
                android:endColor="#E91E63" 
                android:angle="0" />
        </shape>
    </item>
    
    <!-- État par défaut -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2196F3" />
            <stroke 
                android:width="2dp" 
                android:color="#4CAF50" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    
</selector>

Déclaration des couleurs

Les couleurs utilisées dans les ressuorces peuvent être centralisées dans le fichier colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_blue">#2196F3</color>
    <color name="dark_blue">#1976D2</color>
    <color name="accent_pink">#E91E63</color>
    <color name="success_green">#4CAF50</color>
</resources>