Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Android Studio enthält ein GUI, mit dem Sie ein Navigationsdiagramm erstellen und bearbeiten können.
Dies ist im Wesentlichen ein Editor für die zugrunde liegende XML-Ressourcendatei.
Übersicht
Nachdem Sie Ihrer App eine XML-Grafik hinzugefügt haben, öffnet Android Studio die Grafik in
den Navigationseditor Im Navigationseditor können Sie
oder die zugrunde liegende XML
direkt bearbeiten.
<ph type="x-smartling-placeholder"></ph>
Abbildung 1. Der Navigationseditor
<ph type="x-smartling-placeholder"></ph>
Bereich „Ziele“: Hier werden Ihr Navigationshost und alle Ziele aufgelistet.
Grafikeditor hinzu.
Grafikeditor: enthält eine visuelle Darstellung Ihrer Navigation
Diagramm. Sie können zwischen der Designansicht und der Ansicht
zugrunde liegende XML-Darstellung in der Ansicht Text.
Attribute: Zeigt Attribute für das ausgewählte Element in der
Navigationsdiagramm.
Klicke auf den Tab Text, um den entsprechenden XML-Code aufzurufen. Dieser sollte ähnlich aussehen.
in das folgende Snippet ein:
Das <navigation>-Element ist das Stammelement eines Navigationsdiagramms. Beim Hinzufügen
und die Verbindung von Aktionen mit der Grafik
verbinden, können Sie die entsprechenden
<destination>- und <action>-Elemente hier als untergeordnete Elemente. Wenn Sie
verschachtelten Grafiken als untergeordnete <navigation>-Elemente.
Reiseziele hinzufügen
Sie können ein Ziel aus einem vorhandenen Fragment oder einer vorhandenen Aktivität erstellen. Sie können auch
können Sie mit dem Navigationseditor ein neues Ziel erstellen oder einen Platzhalter erstellen,
und später durch ein Fragment oder eine Aktivität ersetzen.
In diesem Beispiel wird gezeigt, wie Sie ein neues Ziel erstellen. So fügen Sie ein neues
mit dem Navigations-Editor erstellen, gehen Sie so vor:
Klicken Sie im Navigationseditor auf das Symbol Neues Ziel und dann auf Neues Ziel erstellen.
Erstellen Sie im angezeigten Dialogfeld Neue Android-Komponente Ihr Fragment.
Weitere Informationen zu Fragmenten finden Sie in der Fragmentübersicht.
Sie sehen nun, dass Android Studio diese
Ziel hinzu.
Abbildung 2 zeigt ein Beispiel für ein Ziel und ein Platzhalterziel.
<ph type="x-smartling-placeholder"></ph>
Abbildung 2. Ein Ziel und ein Platzhalter
Weitere Möglichkeiten zum Hinzufügen von Zielen zur Navigationsgrafik finden Sie unter Zusätzliche
Ziele.
Ziel aus einem vorhandenen Fragment oder einer vorhandenen Aktivität erstellen
Wenn Sie im Navigationseditor bereits einen Zieltyp haben, den Sie
die Sie Ihrer Navigationsgrafik hinzufügen möchten, klicken Sie auf Neues Ziel.
Klicken Sie dann im Drop-down-Menü auf das entsprechende Ziel. Sie können
sehen Sie jetzt in der Designansicht eine Vorschau des Ziels
in der Ansicht Text des Navigationsdiagramms auf die entsprechende XML-Datei verweisen.
Neues Fragmentziel erstellen
So fügen Sie mit dem Navigationseditor einen neuen Zieltyp hinzu:
Klicken Sie im Navigationseditor auf das Symbol Neues Ziel.
Klicken Sie dann auf Neues Ziel erstellen.
Erstellen Sie im angezeigten Dialogfeld Neue Android-Komponente Ihr Fragment.
Sie sehen nun, dass Android Studio diese
Ziel hinzu.
Abbildung 3 zeigt ein Beispiel für ein Ziel und ein Platzhalterziel.
<ph type="x-smartling-placeholder"></ph>
Abbildung 3. Ein Ziel und ein Platzhalter
Anatomie eines Ziels
Klicken Sie auf ein Ziel, um es auszuwählen. Beachten Sie die folgenden Attribute in der
Bereich Attribute:
Das Feld Type gibt an, ob das Ziel als
Fragment, Aktivität oder einer anderen
benutzerdefinierten Klasse im Quellcode enthalten.
Das Feld Label enthält den vom Nutzer lesbaren Namen des Ziels. Dieses
kann in der Benutzeroberfläche angezeigt werden, z. B. wenn Sie den NavGraph verbinden.
mithilfe von setupWithNavController() zu Toolbar. Verwenden Sie daher
Ressourcenstrings für diesen Wert.
Das Feld ID enthält die Ziel-ID, die für den Verweis auf die
Ziel im Code ein.
Das Drop-down-Menü Kurs enthält den Namen der Klasse, die verknüpft ist mit
das Ziel. Klicken Sie auf dieses Drop-down-Menü, um den verknüpften Kurs in
einen anderen Zieltyp haben.
Klicken Sie auf den Tab Text, um die XML-Ansicht der Navigationsgrafik aufzurufen. Die XML-Datei
enthält dieselben Attribute id, name, label und layout für die
Ziel, wie im folgenden Snippet:
Sie können auch den Layout-Editor verwenden, um einem NavHostFragment-Element
der Aktivität ausführen. Gehen Sie dazu so vor:
Doppelklicken Sie in Ihrer Liste der Projektdateien auf die Layout-XML-Datei Ihrer Aktivität.
-Datei, um sie im Layout-Editor zu öffnen.
Wählen Sie im Bereich Palette die Kategorie Container aus.
Suchen Sie alternativ nach "NavHostFragment".
Ziehen Sie die Ansicht „NavHostFragment“ auf Ihre Aktivität.
Das Dialogfeld Navigationsgrafiken wird angezeigt. Wählen Sie hier die
entsprechenden Navigationsdiagramm, das mit dieser NavHostFragment verknüpft werden soll, und
Klicken Sie dann auf OK.
Ziele verbinden
Eine Aktion ist eine logische Verbindung zwischen Zielen. Aktionen sind
werden im Navigationsdiagramm
als Pfeile dargestellt. Aktionen verbinden in der Regel
Ziel zu einem anderen Ziel. Sie können aber auch globale Aktionen erstellen,
können Sie von überall in Ihrer App zu einem bestimmten Ziel gelangen.
Mit Aktionen stellen Sie die verschiedenen Pfade dar, die Nutzer nehmen können.
über Ihre App. Für die Navigation zu den Zielen müssen Sie
den Code für die Navigation zu schreiben.
Mit dem Navigationseditor können Sie zwei Ziele verbinden, indem Sie die
Folgendes:
Halten Sie auf dem Tab Design den Mauszeiger über die rechte Seite des
Ziel, von dem aus die Nutzer
navigieren sollen. Über dem Bild erscheint ein Kreis.
wie in Abbildung 4 dargestellt.
<ph type="x-smartling-placeholder"></ph>
Abbildung 4. Ein Ziel mit einer Aktionsverbindung
Kreis
Bewegen Sie den Cursor über das Ziel, zu dem Nutzer navigieren sollen, und
Veröffentlichung. Die resultierende Linie zwischen den beiden Zielen repräsentiert eine
wie in Abbildung 5 dargestellt.
<ph type="x-smartling-placeholder"></ph>
Abbildung 5. Ziele mit einer Aktion verbinden
Klicken Sie auf den Pfeil, um die Aktion zu markieren. Die folgenden Attribute erscheinen in
im Bereich Attribute:
Das Feld Typ enthält „Aktion“.
Das Feld ID enthält die ID für die Aktion.
Das Feld Destination (Ziel) enthält die ID für das Zielfragment.
oder Aktivitäten.
Klicken Sie auf den Tab Text, um zur XML-Ansicht zu wechseln. Ein Aktionselement ist jetzt
die dem Quellziel hinzugefügt wurden. Die Aktion hat eine ID und ein Ziel
das die ID des nächsten Ziels enthält, wie in den
folgendes Beispiel:
Im Navigationsdiagramm werden Aktionen durch <action>-Elemente dargestellt. Bei
verfügt eine Aktion über ihre eigene ID und die ID des Ziels, an das ein
die Nutzenden
durchgeführt werden sollen.
Platzhalterziele
Sie können Platzhalter verwenden, um nicht implementierte Ziele darzustellen. A
dient als visuelle Darstellung eines Ziels. Im
Navigationseditor verwenden, können Sie Platzhalter
Ziel.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Navigation Editor\n\nAndroid Studio contains a GUI that lets you create and edit a navigation graph.\nThis is essentially an editor for the underlying XML resource file.\n| **Caution:** You can't use the Navigation Editor for your app if you are using Compose or if you have built your navigation graph programmatically using the Kotlin DSL.\n\nOverview\n--------\n\nAfter you've added an XML graph to your app, Android Studio opens the graph in\nthe *Navigation Editor*. In the Navigation Editor, you can visually edit\nnavigation graphs or directly edit the underlying XML.\n**Figure 1.**The Navigation Editor\n\n1. **Destinations panel** : Lists your navigation host and all destinations in the **Graph Editor**.\n2. **Graph Editor** : Contains a visual representation of your navigation graph. You can switch between **Design** view and the underlying XML representation in the **Text** view.\n3. **Attributes**: Shows attributes for the selected item in the navigation graph.\n\nClick the **Text** tab to see the corresponding XML, which should look similar\nto the following snippet: \n\n \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n \u003cnavigation xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:id=\"@+id/nav_graph\"\u003e\n\n \u003c/navigation\u003e\n\nThe `\u003cnavigation\u003e` element is the root element of a navigation graph. As you add\ndestinations and connecting actions to your graph, you can see the corresponding\n`\u003cdestination\u003e` and `\u003caction\u003e` elements here as child elements. If you have\n[nested graphs](/guide/navigation/navigation-nested-graphs), they appear as child `\u003cnavigation\u003e` elements.\n\nAdd destinations\n----------------\n\nYou can create a destination from an existing fragment or activity. You can also\nuse the Navigation Editor to create a new destination or create a placeholder to\nlater replace with a fragment or activity.\n\nThis example demonstrates how to create a new destination. To add a new\ndestination using the Navigation Editor, do the following:\n\n1. In the Navigation Editor, click the **New Destination** icon , and then click **Create new destination**.\n2. In the **New Android Component** dialog that appears, create your fragment. For more information on fragments, see the [fragments overview](/guide/components/fragments).\n\nBack in the Navigation Editor, notice that Android Studio has added this\ndestination to the graph.\n\nFigure 2 shows an example of a destination and a [placeholder destination](/guide/navigation/navigation-create-destinations#placeholders).\n**Figure 2.**A destination and a placeholder\n\nFor other ways to add destinations to your navigation graph, see [Additional\ndestinations](/guide/navigation/navigation-create-destinations).\n\n### Create a destination from an existing fragment or activity\n\nIn the Navigation Editor, if you have an existing destination type that you'd\nlike to add to your navigation graph, click **New Destination** .\n\nNext, click the corresponding destination in the drop-down that appears. You can\nnow see a preview of the destination in the **Design** view along with the\ncorresponding XML in the **Text** view of your navigation graph.\n\n### Create a new fragment destination\n\nTo add a new destination type using the Navigation Editor, do the following:\n\n1. In the Navigation Editor, click the **New Destination** icon .\n\n Next, click **Create new destination**.\n2. In the **New Android Component** dialog that appears, create your fragment.\n\nBack in the Navigation Editor, notice that Android Studio has added this\ndestination to the graph.\n\nFigure 3 shows an example of a destination and a [placeholder destination](/guide/navigation/navigation-nested-graphs).\n**Figure 3.**A destination and a placeholder\n\n### Anatomy of a destination\n\nClick a destination to select it, and note the following attributes in the\n**Attributes** panel:\n\n- The **Type** field indicates whether the destination is implemented as a fragment, activity, or other custom class in your source code.\n- The **Label** field contains the user-readable name of the destination. This might be surfaced to the UI---for example, if you connect the [`NavGraph`](/reference/androidx/navigation/NavGraph) to a `Toolbar` using [`setupWithNavController()`](/reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)). For this reason, use resource strings for this value.\n- The **ID** field contains the destination ID, which is used to refer to the destination in code.\n- The **Class** drop-down shows the name of the class that is associated with the destination. Click this drop-down to change the associated class to another destination type.\n\nClick the **Text** tab to show the XML view of your navigation graph. The XML\ncontains the same `id`, `name`, `label`, and `layout` attributes for the\ndestination, as in the following snippet: \n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cnavigation xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n app:startDestination=\"@id/blankFragment\"\u003e\n \u003cfragment\n android:id=\"@+id/blankFragment\"\n android:name=\"com.example.cashdog.cashdog.BlankFragment\"\n android:label=\"@string/label_blank\"\n tools:layout=\"@layout/fragment_blank\" /\u003e\n\u003c/navigation\u003e\n```\n\nNavHostFragment\n---------------\n\nYou can also use the [Layout Editor](/studio/write/layout-editor) to add a `NavHostFragment` to an\nactivity by doing the following:\n\n1. In your list of project files, double-click your activity's layout XML file to open it in the Layout Editor.\n2. Within the **Palette** pane, choose the **Containers** category; alternatively, search for \"NavHostFragment\".\n3. Drag the `NavHostFragment` view onto your activity.\n4. In the **Navigation Graphs** dialog that appears, choose the corresponding navigation graph to associate with this `NavHostFragment`, and then click **OK**.\n\nConnect destinations\n--------------------\n\nAn *action* is a logical connection between destinations. Actions are\nrepresented in the navigation graph as arrows. Actions usually connect one\ndestination to another, though you can also create [global actions](/guide/navigation/navigation-global-action) that take\nyou to a specific destination from anywhere in your app.\n\nWith actions, you're representing the different paths that users can take\nthrough your app. Note that to actually navigate to destinations, you still need\nto write the code to perform the navigation.\n\nYou can use the Navigation Editor to connect two destinations by doing the\nfollowing:\n\n1. In the **Design** tab, hold the pointer over the right side of the\n destination that you want users to navigate from. A circle appears over the\n right side of the destination, as shown in figure 4.\n\n **Figure 4.**A destination with an action connection circle\n2. Drag your cursor over the destination you want users to navigate to, and\n release. The resulting line between the two destinations represents an\n action, as shown in figure 5.\n\n **Figure 5.**Connecting destinations with an action\n3. Click the arrow to highlight the action. The following attributes appear in\n the **Attributes** panel:\n\n - The **Type** field contains \"Action\".\n - The **ID** field contains the ID for the action.\n - The **Destination** field contains the ID for the destination fragment or activity.\n4. Click the **Text** tab to toggle to the XML view. An action element is now\n added to the source destination. The action has an ID and a destination\n attribute that contains the ID of the next destination, as shown in the\n following example:\n\n \u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n \u003cnavigation xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n app:startDestination=\"@id/blankFragment\"\u003e\n \u003cfragment\n android:id=\"@+id/blankFragment\"\n android:name=\"com.example.cashdog.cashdog.BlankFragment\"\n android:label=\"@string/label_blank\"\n tools:layout=\"@layout/fragment_blank\" \u003e\n \u003caction\n android:id=\"@+id/action_blankFragment_to_blankFragment2\"\n app:destination=\"@id/blankFragment2\" /\u003e\n \u003c/fragment\u003e\n \u003cfragment\n android:id=\"@+id/blankFragment2\"\n android:name=\"com.example.cashdog.cashdog.BlankFragment2\"\n android:label=\"@string/label_blank_2\"\n tools:layout=\"@layout/fragment_blank_fragment2\" /\u003e\n \u003c/navigation\u003e\n\nIn your navigation graph, actions are represented by `\u003caction\u003e` elements. At a\nminimum, an action contains its own ID and the ID of the destination to which a\nuser should be taken.\n\nPlaceholder destinations\n------------------------\n\nYou can use *placeholders* to represent unimplemented destinations. A\nplaceholder serves as a visual representation of a destination. Within the\nNavigation Editor, you can use placeholders just as you would any other\ndestination.\n| **Note:** You must change the *Class* attribute of your placeholders to existing destinations before running your app. Placeholders don't cause compilation errors, and if you attempt to navigate to a placeholder destination, the app throws a runtime exception."]]