So fügen Sie ein dunkles Thema in Ihre Android-App ein

Für Entwickler ist das Erstellen einer Android-App ein einfacher Vorgang. Das Entwerfen einer ansprechenden Benutzeroberfläche ist eigentlich schwierig. Aus diesem Grund haben wir den Leitfaden „So entwerfen Sie eine Android-App-Benutzeroberfläche, die nicht nervt“ für Entwickler geschrieben, die Inspiration für die Erstellung einfacher, aber ansprechender Benutzeroberflächen benötigen. In diesem Handbuch haben wir kurz erwähnt, dass Sie Ihren Apps ein Dunkel- / Nachtmodus-Thema hinzufügen. In diesem Handbuch werden wir Sie durch das Thema führen.

Das Hinzufügen eines Themas im Dunkel- / Nachtmodus zu Ihrer App kann eine großartige Option für Ihre Benutzer sein – es spart Akkulaufzeit und schont die Augen nachts erheblich. Ein weißer Hintergrund auf schwarzem Text oder eine beliebige Kombination von „hellen“ Farben in Ihrer Benutzeroberfläche ist für die Augen besonders nachts sehr stressig. Daher ist ein dunkler Hintergrund mit hellerem Text viel weniger stressig und schädlich für die Augen, weshalb viele beliebte Apps ein dunkles Thema enthalten – YouTube und Reddit in letzter Zeit, obwohl Facebook ihre noch nicht veröffentlicht hat, nachdem sie eines wieder versprochen haben Kann.

Wenn Sie Ihrer Android-App auf einfache Weise einen umschaltbaren dunklen Modus hinzufügen möchten, befolgen Sie diese Appuals-Anleitung und kommentieren Sie, wenn Sie auf Probleme stoßen!

Erstellen der XML-Attribute

Zuerst müssen Sie eine XML-Attributdatei erstellen, die das Thema behandelt. Dies ist viel besser, als zwei Sätze von Ressourcen für zwei verschiedene Themen in Ihr APK aufzunehmen und damit Ihre APK-Größe aufzublähen, da Android die Farben von Attributen über dieses XML nativ ändern kann.

Erstellen Sie daher im Ordner “Ressourcen” Ihrer App eine Datei mit dem Namen attrs.xml und fügen Sie diese Zeilen hinzu (Dies sind stilbare Attribute):

<declare-styleable name="CTAppTheme">
      <attr name=”primaryTextColor” format=”color”/> 
      <attr name=”secondaryTextColor” format=”color”/> 
      <attr name=”dividerColor” format=”color”/>
      <attr name=”backgroundCardColor” format=”color”/> 
      <attr name=”iconPlaceholder” format=”integer”/>
</declare-styleable>

Vor Lollipop konnten wir keine Attribute für Drawables angeben, daher mussten wir die Ressourcen-IDs für Drawables angeben. Dies ist jedoch nicht mehr der Fall.

Hinzufügen der Stile

Damit dies funktioniert, müssen wir zwei separate Stile erstellen, die dieselbe Basis haben. Das erste wird offensichtlich Ihr primäres “helles” Thema sein, und das zweite wird Ihr “dunkles” Thema sein.

<!-- Light base activity theme -->
<style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#F4F4F6</item>
    <item name="secondaryTextColor">#96F4F4F6</item>
    <item name="backgroundCardColor">#FFFF</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_light_plholder</item>
</style>

<!-- Dark base activity theme -->
<style name="ActivityTheme.Primary.Base.Dark"    parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#33343B/item>
    <item name="secondaryTextColor">#8033343B</item>
    <item name="backgroundCardColor">#28292e</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_dark_pholder</item>
</style>

Hier sind die tatsächlichen Stile für eine bestimmte Aktivität:

<!-- Specific Feed activity theme -->
<style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light">
    <item name="android:windowBackground">#F4F4F6</item>
</style>

<style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark">
    <item name="android:windowBackground">#33343B</item>
</style>

Sie müssen eines dieser Themen im Manifest für die Aktivität der App angeben, in diesem Fall FeedActivity.

Ansichten stilisieren

Hier ist ein Beispiel für die Stilisierung Ihrer Ansichten. In diesem Beispiel handelt es sich um einen Umleitungsfehler “Seite nicht gefunden”.

<ImageView
           android:id="@+id/placeHolderAssetImageView"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:src="https://appuals.com/how-to-include-a-dark-theme-in-your-android-app/?attr/iconPlaceholder"
           android:layout_marginBottom="8dp" />

       <TextView
           android:id="@+id/placeHolderTitleTextView"
           android:text="Page not found."
           android:textSize="16dp"
           android:textColor="?attr/primaryTextColor"
           android:layout_margin="16dp" />

Aktivieren der dynamischen Themenumschaltung

Die beste und effizienteste Möglichkeit, die dynamische Themenumschaltung zu aktivieren, besteht darin, den SharedPreference-Wert zu laden, mit dem die Einstellung mithilfe des Singleton-Musters in der Anwendungsinstanz gespeichert wird. Dies bedeutet, dass wir dies nicht zu Beginn jeder Aktivität tun müssen.

public class App extends Application {
 public static final String TAG = "App";

private boolean isNightModeEnabled = false;

@Override
 public void onCreate() {
 super.onCreate();

// We load the Night Mode state here
 SharedPreferences mPrefs =  PreferenceManager.getDefaultSharedPreferences(this);
 this.isNightModeEnabled = mPrefs.getBoolean(“NIGHT_MODE”, false);
 }

public boolean isNightModeEnabled() {
 return isNightModeEnabled;
 }

public void setIsNightModeEnabled(boolean isNightModeEnabled) {
 this.isNightModeEnabled = isNightModeEnabled;
 }
}

Da diese Instanz vor allem anderen gestartet wird, können Sie sie aufrufen isNightModeEnabled () Boolesch, wann immer Sie möchten, in jeder Aktivität, die zur App gehört, sobald sie geöffnet wurde.

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (MyApplication.getInstance().isNightModeEnabled()) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

Wenn Sie jedoch ein anderes Thema als das in der Manifestdatei angegebene anwenden möchten, ist dies der Fall muss vorher gemacht werden Aufruf der übergeordneten onCreate () -Methode.

Festlegen des Status mithilfe von AppCompat

AppCompat ist für eine Vielzahl von Dingen sehr nützlich. In diesem Fall verwenden wir es, um den Modusstatus festzulegen. Dies bedeutet, dass Sie die App-Instanz nicht mehr zum Erstellen eines zwischengespeicherten Status verwenden müssen, wodurch das Aufblähen des App-Cache verringert wird (wenn auch mit einem sehr kleinen Vorsprung).

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

Hier können Sie entweder verwenden:

  • AppCompatDelegate.MODE_NIGHT_YES
    AppCompatDelegate.MODE_NIGHT_NO
    AppCompatDelegate.MODE_NIGHT_AUTO

Den Staat abrufen

AppCompatDelegate.getDefaultNightMode();

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (AppCompatDelegate.getDefaultNightMode()
    ==AppCompatDelegate.MODE_NIGHT_YES) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

Das sollte es sein – Sie können weiterhin Werte nach Ihren Wünschen anpassen und anpassen, aber dieser Leitfaden ist eine großartige Einführung, um Ihnen den Einstieg in a zu erleichtern einheimisch dunkles Thema in Ihrer Android-App.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *