Erstellen von Notch-freundlichen Apps für Android… | Komentor

So stellen Sie sicher, dass Ihre App randlose Bildschirme mit Kerben unterstützt

Wie wir alle wissen, folgten nach der Veröffentlichung des iPhone X auch viele Android-Telefone, indem sie von Kante zu Kante gingen und oben Ausschnitte für die Kamera und andere Sensoren hatten.

Ab August 2018 gibt es 16 Geräte mit ausgeschnittenen Displays, weitere folgen später in diesem Jahr.

Das Ergebnis sind Geräte mit:

  • Kleinere Blenden
  • Größere Seitenverhältnisse
  • Ein intensiveres Erlebnis

Dadurch können Spiele, Videos, Foto-/Galerie-Apps und viele weitere Apps Spaß machen!

Aber bei gekerbten Telefonen gibt es ein Problem:

Die Kerbe nimmt am oberen Rand des Displays viel Höhe ein und verdunkelt daher die Bereiche auf beiden Seiten, wodurch diese Teile des Bildschirms unbrauchbar bleiben.

Glücklicherweise verfügt Android Pie über APIs, mit denen Entwickler verwalten können, wie sie ihre App den Fensterinhalt anzeigen lassen können, um die Bildschirmfläche auf beiden Seiten der Kerbe zu nutzen. Sie überprüfen sogar die Position der Kerbe, damit Sie Ihre Ansichten entsprechend rendern können.

Das Problem

Lassen Sie uns dieses Problem mit Hilfe eines Nexus 5X mit simulierter Notch und Android Pie 9.0 genauer untersuchen.

Für den Zweck dieses Artikels zeigt die App vorerst nur eine Vollbildaktivität und wird immersiv, wenn Sie auf den Text in der Mitte klicken, wie Sie in der Demo unten sehen können. und wechselt beim erneuten Anklicken hin und her.

Den Quellcode für diese Demo-App finden Sie hier:

bapspatil/NotchFriendlyAppDemo
_Eine Demo-App, die zeigt, wie Sie Ihre App dazu bringen können, randlose Bildschirme mit Kerben zu unterstützen. — bapspatil/NotchFriendlyAppDemo_github.com

Werfen wir einen Blick auf das Standardverhalten unserer App:


Simuliertes gekerbtes Nexus 5X (Hochformat)

Die Statusleiste wird aufgrund der Kerbe oben in der Mitte des Telefondisplays vergrößert. Daher werden die Bereiche auf beiden Teilen der Kerbe vom App-Fenster nicht verwendet und lassen die App weniger eindringlich wirken.

Wenn wir die App in den Vollbildmodus versetzen, werden außerdem beide Bereiche auf beiden Seiten der Kerbe schwarz und sind daher wieder unbenutzt. Das nennt man Letterboxing und es ist eine Verschwendung von Bildschirmfläche.

Dies ist das Standardverhalten und es ist sowohl für Entwickler als auch für Benutzer unerwünscht.

Die Lösung

Glücklicherweise gibt es dafür eine einfache Lösung, die von den APIs in Android Pie 9.0 bereitgestellt wird.

Schritt 1:

Erstelle eine neue values-v28 Ordner in Ihrem res Verzeichnis und kopieren Sie die default styles.xml Datei hinein.


Kopieren Sie die Datei „styles.xml“ von „values“ nach „values-v28“.

Schritt 2:

In dem values-28 Variante der styles.xml Datei, gehen Sie zum Thema Ihrer Aktivität oder erstellen Sie ein neues, wenn Sie das Standardthema verwendet haben, und legen Sie dieses Attribut fest:

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges
  </item>
</style>

…und voilà! Das ist alles, was Sie tun müssen, um ein immersiveres Erlebnis in Ihrer App zu erzielen und Letterboxing zu vermeiden, indem Sie das Fenster der App auf beiden Seiten der Kerbe rendern lassen.

Hier ist das Ergebnis:

Mehr zu den unterschiedlichen Display-Ausschnittverhalten…

Notiere dass der windowLayoutInDisplayCutoutMode kann 3 mögliche Werte haben:

  • default (oder LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT)
  • shortEdges (oder LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES)
  • never (oder LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER)

Das default value ist (offensichtlich) standardmäßig ausgewählt und wir haben die Demo dafür oben gesehen. Es macht:

  • Die Größe der Statusleiste wird auf die Höhe der Kerbe angepasst, und
  • verursacht Letterboxing sowohl im Hoch- als auch im Querformat.


Der Standardmodus

Das shortEdges value bewirkt, dass das Fenster Ihrer App auf beiden Seiten der Kerbe gezeichnet wird, wodurch die App im Vollbildmodus immersiver wird. Es lässt den Notch-Bereich weg, der nicht nutzbar ist. Keine Bildschirmfläche verschwendet! Dies funktioniert sowohl im Quer- als auch im Hochformat einwandfrei.


Der shortEdges-Modus

Das never value sorgt dafür, dass das App-Fenster sowohl im Quer- als auch im Hochformat immer unter die Kerbe gezeichnet wird, unter Letterboxing leidet und die Bereiche auf beiden Seiten der Kerbe komplett verdunkelt.


Der Nie-Modus

Wenn Sie Elemente im Ausschnittbereich zeichnen möchten, können Sie verwenden getDisplayCutout() zur Verfügung gestellt von WindowInsets Klasse. Auf diese Weise können Sie überprüfen, ob sich der Inhalt im Fenster Ihrer App mit der Kerbe auf Ihrem Display überschneidet, und wenn dies der Fall ist, können Sie Elemente nach Bedarf neu positionieren.

Wie teste ich das, wenn mein Gerät keine Notch hat?

Sie können Ihre Notch-freundliche App nur auf einem Gerät mit Android Pie 9.0 testen. Daher würde ich empfehlen, den Android-Emulator zu verwenden, wenn Sie kein Telefon aus der Pixel-Familie verwenden.

Ermöglichen Entwickleroptionen in Ihrem Telefon und klicken Sie auf Simulieren Sie ein Display mit einem Ausschnitt zwischen 4 Optionen wählen:

  • Keiner
  • **Bildschirmausschnitt in der Ecke** – Dies simuliert einen Ausschnitt in der oberen rechten Ecke des Bildschirms.
  • **Double Display Cutout ** — Dies simuliert 2 Ausschnitte; eine oben in der Mitte des Bildschirms und die andere unten in der Mitte des Bildschirms.
  • **Großer Bildschirmausschnitt ** – Dies simuliert einen Ausschnitt in der oberen Mitte des Bildschirms.

Ich ermutige Sie, die von Android Pie unterstützten Notch-freundlichen APIs zu nutzen und damit zu beginnen, Ihre Apps Notch-freundlicher zu gestalten. Das war’s für diesen Artikel und danke fürs Lesen!


Du findest mich und alle meine Socials auch hier:

Bapusaheb Patil
_Ein von Google zertifizierter Android-Entwickler, der gerne Apps, Watchfaces und Memes erstellt._bapspatil.com

Similar Posts

Leave a Reply

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