web-dev-qa-db-fra.com

Comment puis-je créer un écran de démarrage Android) avec le texte et la couleur d'arrière-plan qui changent si mon téléphone est en mode clair ou sombre?

J'y travaille depuis un certain temps et je n'ai malheureusement pas pu obtenir l'effet souhaité sans utiliser d'image. J'ai fait des recherches sur Stack Overflow et presque partout et je n'ai toujours trouvé aucune solution qui fasse exactement cela.

Voici ce que j'essaye encore de faire:

  • Le téléphone est en mode clair> L'écran de démarrage a un fond blanc avec le mot ABC en noir au centre

  • Le téléphone est en mode sombre> L'écran de démarrage a un fond noir avec le mot ABC en blanc au centre

Voici ce que j'ai jusqu'à présent:

SplashActivity.cs

namespace Japanese.Droid
{
    [Activity(Label = "Anki+", Theme = "@style/LaunchTheme", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {

styles.xaml

<style name="LaunchTheme" parent="Theme.AppCompat">
    <item name="Android:windowBackground">@drawable/splash_screen</item>
    <item name="Android:navigationBarColor">#ffffff</item>
</style>

splash_screen.xaml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@Android:color/white"/>
    <item>
        <bitmap Android:src="@drawable/splash_logo"
                Android:tileMode="disabled"
                Android:gravity="center"
                Android:layout_gravity="center"/>
    </item>
</layer-list>

splash_screen_night.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@Android:color/black"/>
    <item>
        <bitmap Android:src="@drawable/splash_logo"
                Android:tileMode="disabled"
                Android:gravity="center"
                Android:layout_gravity="center"/>
    </item>
</layer-list>

activité_éclaboussure

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Views;

namespace Test.Droid
{
    [Activity(Label = "Test+", Theme = "@style/LaunchTheme", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {

        public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
        {
            base.OnCreate(savedInstanceState, persistentState);

            //==================================== Code to hide the bottom 3 buttons on Android.
            int uiOptions = (int)Window.DecorView.SystemUiVisibility;
            uiOptions |= (int)SystemUiFlags.LowProfile;
            uiOptions |= (int)SystemUiFlags.Fullscreen;
            uiOptions |= (int)SystemUiFlags.HideNavigation;
            uiOptions |= (int)SystemUiFlags.ImmersiveSticky;
            Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;
            //===================================

            base.SetTheme(Resource.Style.MainTheme);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        }

        // Launches the startup task
        protected override void OnResume()
        {
            base.OnResume();

            //==================================== Code to hide the bottom 3 buttons on Android.
            int uiOptions = (int)Window.DecorView.SystemUiVisibility;
            uiOptions |= (int)SystemUiFlags.LowProfile;
            uiOptions |= (int)SystemUiFlags.Fullscreen;
            uiOptions |= (int)SystemUiFlags.HideNavigation;
            uiOptions |= (int)SystemUiFlags.ImmersiveSticky;
            Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;
            //===================================

            System.Threading.Tasks.Task startupWork = new System.Threading.Tasks.Task(() => { SimulateStartup(); });
            startupWork.Start();
        }


        // Simulates background work that happens behind the splash screen
        async void SimulateStartup()
        {
            await System.Threading.Tasks.Task.Delay(1000); // Simulate a bit of startup work.
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }

        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }

        public override void OnBackPressed() { }
    }
}

Cela utilise une image mais je voudrais le faire avec du texte.

Quelqu'un connaît-il un moyen de le faire? J'ai recherché cela autant que possible, demandé l'aide de deux Android devs mais personne ne peut trouver une solution simple pour le faire sans utiliser d'image.

Est-il possible de le faire avec du texte uniquement et pas une image pour mon application Xamarin Android application?

androidandroid-studioxamarinxamarin.android
5
Alan2

C'est la solution simple et optimale pour implémenter un thème Jour/Nuit pour votre application. Veuillez suivre les étapes.

Première étape: passer au thème DayNight

Accédez à votre fichier styles.xml et changez votre thème parent en DayNight

<style name="LaunchTheme" parent="Theme.AppCompat.DayNight">
    <!-- Theme attributes -->

</style>

Cela permettra à votre application de détecter les changements de configuration de jour et de nuit. Remarque: tout comme les autres thèmes, celui-ci a également ses variantes telles que Theme.AppCompat.DayNight.NoActionBar

Deuxième étape: ajouter des attributs à votre thème DayNight

<style name="LaunchTheme" parent="Theme.AppCompat.DayNight.NoActionBar">

    <!-- Other attributes might be present here by default such as 'colorPrimary' -->

    <!-- These colors are going to be defined on next step -->
    <item name="Android:textColor">@color/textColor</item>
    <item name="Android:windowBackground">@color/windowBackgroundColor</item>
</style>

Pour cet exemple, nous utilisons les attributs textColor et windowBackground. textColor est l'attribut de couleur par défaut à l'échelle de l'application pour les vues de texte et windowBackground est l'attribut par défaut pour les arrière-plans de la fenêtre d'activité.

Vous pouvez choisir une approche différente plus tard en fonction de vos besoins et de votre compréhension des thèmes et styles.

Troisième étape: définir les couleurs

Accédez à votre colors.xml et ajoutez ces couleurs.

<resources>
<color name="textColor">#000000</color>
<color name="windowBackgroundColor">#FFFFFF</color>
</resources>

Étape quatre: créer un fichier de couleurs de qualification de nuit

Comment c'est fait dans Android Studio: Cliquez avec le bouton droit sur le dossier de valeurs -> Nouveau -> Valeurs le fichier de ressources, nommez votre fichier "couleurs" et ajoutez-y le qualificatif NightMode.

Si ce n'est pas le cas, cela créera un dossier "values-night" et colors.xml dedans.

Si cette approche n'est pas possible dans le IDE que vous utilisez pour le développement Xamarin, veuillez créer les fichiers manuellement: sous le dossier 'res', créez un dossier 'values-night'. Et puis créez ' colors.xml 'dans le dossier' values-night '.

Étape cinq: définissez les mêmes couleurs dans votre fichier de couleurs qualifiées NightMode

Accédez au fichier colors.xml nouvellement créé dans le dossier "values-night" et ajoutez ces couleurs.

<resources>
<color name="textColor">#FFFFFF</color>
<color name="windowBackgroundColor">#000000</color>
</resources>

Notez que les noms des ressources de couleur sont identiques mais ont des valeurs différentes.

Sixième étape: utiliser le thème

Définissez le style que vous avez défini à la première étape comme thème à l'échelle de l'application ou comme thème d'activité Splash. (Vous avez déjà fait cela)

C'est fait, votre application va désormais réagir aux configurations jour-nuit.

Test

Exécutez le projet sur un appareil avec Android version> = Q et activez/désactivez le mode nuit des appareils.

Ou ajoutez ce code à la fonction onCreate de votre classe Application

AppCompatDelegate.setDefaultNightMode(
        AppCompatDelegate.MODE_NIGHT_YES); // This code will force night mode configuration for your app. Add it to see how your app looks in night mode.

AppCompatDelegate.setDefaultNightMode(
        AppCompatDelegate.MODE_NIGHT_NO); // This code will force day mode configuration for your app. Add it to see how your app looks in day mode.

Important: assurez-vous de ne pas remplacer le résultat visuel souhaité, par exemple, en définissant une valeur de couleur codée en dur directement sur votre TextView.

0
Nezih Yılmaz

Voici quelques citations de la Android Documentation concernant Fournir des ressources alternatives).

Extra Info .

Mode nuit

night
notnight
  • nuit: la nuit
  • notnight: jour

Ajouté au niveau de l'API 8.

Cela peut changer au cours de la vie de votre application si le mode nuit est laissé en mode automatique (par défaut), auquel cas le mode change en fonction de l'heure de la journée. Vous pouvez activer ou désactiver ce mode à l'aide de UiModeManager. Consultez Gestion des modifications d'exécution pour plus d'informations sur la manière dont cela affecte votre application pendant l'exécution.

(Je ne sais pas si vous avez déjà fait ces étapes puisque vous avez un style pour chaque écran de démarrage, mais comme vous ne pouvez pas changer la couleur du texte, j'inclurai quand même ces étapes)

1º - Créez 2 fichiers XML dessinables

Créez 2 fichiers dessinables appelés splash_screen.xml Et splash_screen_night.xml:

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:opacity="opaque">
    <item>
        <TextView
          Android:layout_width="match_parent"
          Android:layout_height="match_parent"
          Android:gravity="center"
          Android:textColor="#00000"
          Android:text="Text in Center" />
    </item>
</layer-list>

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:opacity="opaque">
    <item>
        <TextView
          Android:layout_width="match_parent"
          Android:layout_height="match_parent"
          Android:gravity="center"
          Android:textColor="#FFFFFF"
          Android:text="Text in Center" />
    </item>
</layer-list>

2º - Créer un thème de nuit

Créez un dossier appelé values-night pour implémenter l'écran de démarrage du thème sombre et l'ajouter à un dossier existant appelé values pour implémenter l'écran de démarrage du thème clair.

Remarque: c'est ici que la "magie" se produit, Android utilisera des valeurs ou des valeurs-night selon le Device NightMode, pasnight fera la même chose que night, mais pour DayMode

Dans le dossier values-night, créez un styles.xml et ajoutez le style pour inclure l'écran de démarrage du thème sombre:

<resources>
    <style name="LaunchTheme" parent="Theme.AppCompat">
        <item name="Android:windowBackground">@drawable/splash_screen_night</item>
    </style>
</resources>

Et bien sûr, dans le values>style.xaml, l'écran de démarrage de Ligth Theme

<style name="LaunchTheme" parent="MainTheme">
    <item name="Android:windowBackground">@drawable/splash_screen</item>
</style>

3º Mettez à jour MainActivity.cs pour utiliser le nouveau LauchTheme

Mettez à jour MainActivity pour vous assurer qu'il utilise le LaunchTheme nouvellement créé comme écran de démarrage. Attribut d'activité pour utiliser les valeurs suivantes:

Theme = "@style/LaunchTheme"
LaunchMode = LaunchMode.SingleTop

PAR EXEMPLE.:

[Activity(Label = "DarkModeSplashScreen", Icon = "@mipmap/icon", Theme = "@style/LaunchTheme", LaunchMode = LaunchMode.SingleTop, MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

Et puis dans la méthode OnCreate avant base.OnCreate:

protected override void OnCreate(Bundle savedInstanceState)
{
    //...

    base.SetTheme(Resource.Style.MainTheme);
    base.OnCreate(savedInstanceState);

    //...
}
0
Ricardo Dias Morais

Vous pouvez utiliser this code pour déterminer le thème de l'appareil et en fonction de cela, vous pouvez définir le texte et la couleur.

0
Sahil Doshi