[Android] Ajustement des couleurs en mode Nuit

Version imprimable

10/11/2020, 11h32
Vahia

2 pièce(s) jointe(s)

[Android] Ajustement des couleurs en mode Nuit

Bonjour à tous !
Je viens vers vous pour une question que je pense facile à traiter pour les habitués du développement pour Android. J'espère que vous pourrez m'aider si tant est que le forum soit encore actif (ça n'a pas l'air de déborder de vie, mdr)

Je suis en train d'ajuster les couleurs sur mon application avant de continuer son développement.
Voilà à quoi ressemble l'en-tête en mode normal :

Pièce jointe 583541

J'ai réussi à ajuster quasiment toutes les couleurs pour le cas où le smartphone est basculé en mode Nuit sauf la Toolbar et l'arrière-plan de mon imageButton :

Pièce jointe 583542

Ce que je cherche à faire c'est que la Toolbar garde la même couleur (bleu) peu importe le mode et que mon imageButton prenne une couleur d'arrière-plan identique à la couleur de fond de l'appli.
Petite précision, l'imageButton a été rempli avec Image Asset. Si je ne spécifie aucun background, Android Studio me mets automatiquement la valeur "@android:drawable/btn_default_material".

Je pense qu'il n'y a pas besoin de coder tout ça en Java. A mon avis il faut que je paramètre tout ça en xml dans values/themes et night/themes (ou peut-être ailleurs...) mais je ne sais pas quelles instructions utiliser.

Si vous avez une idée ça me dépannerait bien. ça fait plusieurs heures que je bidouille à droit et à gauche mais je tourne en rond.
Merci d'avance ! ;)

Voici quelques détails en plus pour vous aider à voir ce que j'ai fait et où ça pourrait clocher.

themes.xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Plannine" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/color7</item>
        <item name="colorPrimaryVariant">@color/color8</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/color7</item>
        <item name="colorSecondaryVariant">@color/color8</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:textColor">@color/black</item>
 
 
    </style>
 
    <style name="Theme.Plannine.Fullscreen" parent="Theme.Plannine">
        <item name="android:actionBarStyle">@style/Widget.Theme.Plannine.ActionBar.Fullscreen</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@null</item>
    </style>
 
    <style name="ThemeOverlay.Plannine.FullscreenContainer" parent="">
        <item name="fullscreenBackgroundColor">@color/light_blue_600</item>
        <item name="fullscreenTextColor">@color/light_blue_A200</item>
    </style>
 
    <style name="Theme.Plannine.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
    <style name="Theme.Plannine.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
    <style name="Theme.Plannine.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

themes.xml (night) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Plannine" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/color7</item>
        <item name="colorPrimaryVariant">@color/color8</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/color7</item>
        <item name="colorSecondaryVariant">@color/color8</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:textColor">@color/white</item>
        <item name="android:actionBarStyle">@style/ActionBarNight</item>
    </style>
 
    <style name="ThemeOverlay.Plannine.FullscreenContainer" parent="">
        <item name="fullscreenBackgroundColor">@color/light_blue_900</item>
        <item name="fullscreenTextColor">@color/light_blue_A400</item>
    </style>
</resources>

et enfin le AndroidManifest :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.test.plannine">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_plannine"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_plannine_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Plannine">
        <activity android:name=".ViewRecapActivity" />
        <activity android:name=".EditActivity" />
        <activity android:name=".ViewActivity" />
        <activity android:name=".AddActivity" />
        <activity android:name=".InfosActivity" />
        <activity android:name=".ProfActivity" />
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/Theme.Plannine.NoActionBar" />
        <activity
            android:name=".FullscreenActivity"
            android:configChanges="orientation|keyboardHidden|screenSize"
            android:label="@string/app_name"
            android:theme="@style/Theme.Plannine.Fullscreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Petite précision supplémentaire, le MainActivity se comporte bien au niveau de la Toolbar. Elle reste bleue que ce soit en mode Nuit ou non. Ce sont toutes les autres qui ont la Toolbar qui vire au noir en mode nuit (sauf FullscreenActivity qui n'a pas de Toolbar).

13/11/2020, 12h17
Vahia
J'ai trouvé une solution pour l'imageButton. Je la poste ici au cas où ça pourrait aider quelqu'un qui, comme moi, a passé plusieurs jours à chercher en long en large et en travers...

On m'a conseillé d'utiliser l'attribut "backgroungTint" dans themes. C'est un très bon conseil mais ce n'est valable que si on veut le même comportement sur tous les boutons. Or ce n'était pas mon cas, je ne voulais impacter qu'un seul bouton.
Ce que j'ai fait :

J'ai d'abord créé les 3 couleurs dont j'avais besoin dans colors.xml :
Code:

1 2 3 <color name="transparent">#00000000</color> <color name="noir">#FF000000</color> <color name="blanc">#FFFFFFFF</color>
Ensuite j'ai créé 2 attributs dans attrs.xml :
Code:

1 2 <attr name="monBoutonBackgroundColor" format="color"/> <attr name="monBoutonTint" format="color"/>
Puis dans themes.xml j'ai ajouté 2 items :
Code:

1 2 <item name="monBoutonBackgroundColor">@color/blanc</item> <item name="monBoutonTint">@color/noir</item>
idem dans night/themes.xml :
Code:

1 2 <item name="monBoutonBackgroundColor">@color/transparent</item> <item name="monBoutonTint">@color/blanc</item>
Et pour finir, dans le fichier xml qui contient mon bouton j'ai ajouté ces attributs à mon imageButton :
Code:

1 2 android:background="?attr/monBoutonBackgroundColor" android:tint="?attr/monBoutonTint"
Et voilà, ça fonctionne !
Je remercie Yv Kalume (facebook) et Gabriel TEK's (medium.com) qui m'ont mis sur la voie.

Il ne reste plus que mon souci de Toolbar...
13/11/2020, 14h52
Vahia

Personne n'a d'idée pour m'aider ?
Je suis quand même surpris de constater que toutes mes activités suivent bien le Theme défini dans le manifest sauf pour la Toolbar (ou WindowActionBar). Je ne comprends pas pourquoi...