39 votes

Comment créer un Dialogue/Popup complètement personnalisé dans Android (changer la couleur de la superposition et la disposition de la fenêtre de dialogue)

J'aimerais relooker complètement le composant de dialogue par défaut dans Android. Plus précisément, je voudrais faire ceci :

  • Changez l'arrière-plan de la superposition semi-transparente du noir par défaut à un blanc semi-transparent.

  • Modifiez la fenêtre de dialogue en supprimant la bordure par défaut du cadre de la fenêtre et en la remplaçant par une mise en page définie en XML (il s'agira simplement de un graphique sans bordure avec des boutons boutons flottants, sans cadre réel).

J'ai vu des tutoriels sur la création d'une mise en page personnalisée pour la boîte de dialogue (par exemple, le site Web de la Commission européenne). http://www.helloandroid.com/tutorials/how-display-custom-dialog-your-Android-application ), mais je n'ai rien vu concernant la modification de la couleur de la superposition et/ou la personnalisation complète de la fenêtre de dialogue qui s'affiche et sa transformation en une superposition sans "fenêtre".

83voto

justinl Points 3208

J'ai résolu ce problème et créé mon propre popup personnalisé avec un arrière-plan semi-transparent de couleur personnalisée en suivant les étapes suivantes :

1 - Créez un nouveau fichier xml dans votre dossier res/values/ et nommez-le styles.xml

2 - C'est ici que vous allez définir les propriétés de votre dialogue. Voici à quoi ressemble la mienne. Si vous voulez remplacer la superposition noire semi-transparente par défaut qui s'affiche sur l'écran, vous devez définir les paramètres suivants windowIsFloating à false, et modifiez l'arrière-plan de votre mise en page pour qu'il soit de la couleur que vous voulez. Voici le fichier ci-dessous que j'ai utilisé :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomDialogTheme" parent="@android:style/Theme.Dialog">
<item name="android:windowBackground">@color/transparent_white</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>

3 - De retour dans votre code java, lorsque vous créez l'objet dialogue, utilisez le constructeur qui passe à la fois le contexte ET le thème. Par exemple. myDialog = new Dialog(this, R.style.CustomDialogTheme); (CustomDialogTheme est l'attribut de nom que j'ai spécifié dans le styles.xml de l'étape 2)

4 - Il suffit de définir la vue du contenu des objets de votre boîte de dialogue en fonction de la mise en page à laquelle vous souhaitez que votre boîte de dialogue ressemble. Par exemple myDialog.setContentView(R.layout.my_custom_overlay); Si vous souhaitez que votre boîte de dialogue apparaisse au centre de l'écran, définissez la valeur de l'élément Root de la boîte de dialogue. android:layout_gravity à center

20voto

chris Points 2846

Cela a très bien fonctionné pour moi, mais il manque la façon de fermer la boîte de dialogue. Si vous avez un bouton dans votre mise en page personnalisée pour la fermer, voici comment ajouter l'écouteur et fermer la fenêtre de dialogue.

final Dialog d = new Dialog(this,R.style.CustomDialogTheme);
d.setContentView(R.layout.custom_dialog);
d.show();

Button close_btn = (Button) d.findViewById(R.id.close_btn);
close_btn.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        d.dismiss();
    }
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X