Tutoriel d'exemple de barre d'action personnalisée Android

Dans ce didacticiel, nous allons créer une application composée d'une barre d'action personnalisée Android avec une mise en page personnalisée. Nous supposons que vous avez une compréhension de base du composant ActionBar décrit dans ce didacticiel.

Barre d'action personnalisée Android

Pour personnaliser une ActionBar, nous devons d'abord configurer le Theme dans le res/values/styles.xml et définir le thème de la classe d'activité respective dans le AndroidManifest.xml. Voici la mise en page xml pour cela : styles.xml

<resources>
    
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="CustomTheme" parent="Theme.AppCompat.Light">

        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

</resources>

De l'extrait ci-dessus si nous utilisons AppTheme style pour notre activité, il lèvera une exception de pointeur nul car il spécifie explicitement le thème NoActionBar. Nous utiliserons donc le CustomTheme style dans ce projet. contentInsetStart et contentInsetEnd sont les valeurs de remplissage. Notez que nous utiliserons AppCompatActivity car il offre une compatibilité maximale avec les versions Android pré-3.0.

Disposition de la barre d'action personnalisée

Voici la disposition de la vue qui sera définie sur l'ActionBar à partir de notre MainActivity. custom_action_bar_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <TableRow>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/back"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:id="@+id/action_bar_back"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/forward"
            android:id="@+id/action_bar_forward"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


    </TableRow>

</TableLayout>

La disposition de la vue se compose de deux ImageButtons qui représentent les boutons d'image avant et arrière et un TextView au centre.

Structure du projet de la barre d'action personnalisée Android

[1]

Code-barres d'action personnalisé Android

Le activity_main.xml est un RelativeLayout vide puisque nous mettons ici l'accent sur l'ActionBar. La MainActivity.java est donnée ci-dessous.

package com.journaldev.customactionbar;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_action_bar_layout);
        View view =getSupportActionBar().getCustomView();

        ImageButton imageButton= (ImageButton)view.findViewById(R.id.action_bar_back);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        ImageButton imageButton2= (ImageButton)view.findViewById(R.id.action_bar_forward);

        imageButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"Forward Button is clicked",Toast.LENGTH_LONG).show();
            }
        });
    }


}

Dans le code ci-dessus, nous utilisons des bibliothèques de support. Par conséquent, nous avons utilisé getSupportActionBar() au lieu de getActionBar(). Pour ajouter une disposition personnalisée à l'ActionBar, nous avons appelé les deux méthodes suivantes sur getSupportActionBar() :

• getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
• getSupportActionBar().setDisplayShowCustomEnabled(true);

setCustomView() est invoqué pour gonfler l'ActionBar avec un customView comme indiqué ci-dessus. Pour définir les onClickListeners pour les boutons ActionBar, nous devons d'abord obtenir le CustomView en utilisant getCustomView(). Dans ce didacticiel, nous avons programmé le bouton de retour pour fermer l'activité en utilisant finish(); et le bouton suivant pour afficher un Toast. Remarque : Ajoutez la ligne suivante dans le AndroidManifest.xml à l'intérieur de la balise d'application.

android:theme="@style/CustomTheme"

Voici notre application Android avec un thème et une mise en page personnalisés. Remarque : Il y a une marge fixe de chaque côté qui ne peut pas être modifiée. Pour cela, nous devrons remplacer l'ActionBar par une ToolBar. Nous en discuterons dans un prochain tutoriel. Ceci met fin au didacticiel de la barre d'action personnalisée Android. Vous pouvez télécharger le projet final Android CustomActionBar à partir du lien ci-dessous.

Télécharger le projet de barre d'action personnalisée Android

Référence : Android Doc