Tutorials  /  JavaScript

Entwickeln Sie Ihre eigene Android-Action-Bar: Ein Schritt-für-Schritt-Tutorial

Ccentron Redaktion · Juli 2024 ·3 Min. Lesezeit ·JavaScript, Tutorial

Erlebe die Freiheit der Gestaltung mit unserem Tutorial zur Android Custom Action Bar!

Lerne, wie Sie Ihre eigene Action Bar mit individuellem Layout erstellen und Ihrer App einen persönlichen Touch verleihen können. Schritt für Schritt erklärt - perfekt für Entwickler aller Erfahrungsstufen.

Android Custom Action Bar konfigurieren

Um eine ActionBar anzupassen, müssen wir zunächst das Theme in der Datei res/values/styles.xml konfigurieren und das Theme für die jeweilige Aktivitätsklasse in der AndroidManifest.xml festlegen. Hier ist das XML-Layout dafür:

Code
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Ihr Theme anpassen -->
</style>

<style name="CustomTheme" parent="Theme.AppCompat.Light">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
</resources>

Wenn wir das AppTheme-Stil für unsere Aktivität verwenden, wird eine Nullzeiger-Ausnahme ausgelöst, da es explizit das NoActionBar-Theme angibt. Daher verwenden wir den CustomTheme-Stil in diesem Projekt. Die contentInsetStart- und contentInsetEnd-Werte sind die Padding-Werte. Beachten Sie, dass wir AppCompatActivity verwenden, da es maximale Kompatibilität mit Android-Versionen vor 3.0 bietet.

VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Benutzerdefiniertes Action Bar Layout

Nachfolgend finden Sie das Ansichts-Layout, das der ActionBar von unserer MainActivity zugewiesen wird:

Code
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TableRow>
<!-- Hier kommen Ihre ImageButtons und TextView -->
</TableRow>
</TableLayout>

Das Ansichts-Layout besteht aus zwei ImageButtons, die vorwärts und rückwärts darstellen, und einem TextView in der Mitte.

Projektstruktur für die benutzerdefinierte Action Bar

Das activity_main.xml ist ein leeres RelativeLayout, da unser Schwerpunkt hier auf der ActionBar liegt. Der MainActivity.java sieht wie folgt aus:

Code
// Ihr Java-Code hier

In diesem Code verwenden wir Support-Bibliotheken. Daher haben wir getSupportActionBar() anstelle von getActionBar() verwendet. Um ein benutzerdefiniertes Layout zur ActionBar hinzuzufügen, haben wir die folgenden beiden Methoden auf getSupportActionBar() aufgerufen:

  • getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
  • getSupportActionBar().setDisplayShowCustomEnabled(true);

Mit setCustomView() wird die ActionBar mit einer benutzerdefinierten Ansicht aufgeblasen. Um die onClickListeners für die ActionBar-Buttons festzulegen, müssen wir zuerst die CustomView mit getCustomView() abrufen. In diesem Tutorial haben wir das Rückwärtsschaltfläche programmiert, um die Aktivität zu schließen, und die Vorwärtsschaltfläche, um einen Toast anzuzeigen.

Fügen Sie die folgende Zeile in die AndroidManifest.xml innerhalb des application-Tags hinzu:

Code
android:theme="@style/CustomTheme"

Das war's für heute! Wir hoffen, dieses Tutorial hat Ihnen geholfen, eine benutzerdefinierte Action Bar für Ihre Android-App zu erstellen. Bei Fragen hinterlassen Sie bitte einen Kommentar. Bis zum nächsten Mal!

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren