0
0
Android Kotlinmobile~20 mins

Why navigation manages app flow in Android Kotlin - Build It to Prove It

Choose your learning style9 modes available
Build: Simple Navigation Flow
This screen demonstrates how navigation controls the flow between two screens in an Android app using Kotlin. It shows why navigation is important to move between different parts of the app smoothly.
Target UI
Screen 1: Home Screen
+---------------------+
|     Home Screen     |
|                     |
|  [Go to Details]    |
+---------------------+

Screen 2: Details Screen
+---------------------+
|   Details Screen    |
|                     |
|  [Back to Home]     |
+---------------------+
Create two screens: Home and Details
Home screen has a button labeled 'Go to Details' that navigates to Details screen
Details screen has a button labeled 'Back to Home' that navigates back to Home screen
Use Android Navigation Component to manage navigation
Show how navigation manages app flow by moving between screens
Starter Code
Android Kotlin
package com.example.navigationflow

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.fragment.NavHostFragment

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // TODO: Setup navigation host fragment
    }
}

// TODO: Create HomeFragment and DetailsFragment with buttons
Task 1
Task 2
Task 3
Task 4
Solution
Android Kotlin
package com.example.navigationflow

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.fragment.NavHostFragment
import androidx.navigation.ui.setupActionBarWithNavController
import com.example.navigationflow.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

// HomeFragment.kt
package com.example.navigationflow

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import com.example.navigationflow.databinding.FragmentHomeBinding

class HomeFragment : Fragment() {
    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.buttonGoToDetails.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_detailsFragment)
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

// DetailsFragment.kt
package com.example.navigationflow

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.navigation.fragment.findNavController
import com.example.navigationflow.databinding.FragmentDetailsBinding

class DetailsFragment : Fragment() {
    private var _binding: FragmentDetailsBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
        _binding = FragmentDetailsBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        binding.buttonBackToHome.setOnClickListener {
            findNavController().navigateUp()
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

// navigation/nav_graph.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationflow.HomeFragment"
        android:label="Home Screen">
        <action
            android:id="@+id/action_homeFragment_to_detailsFragment"
            app:destination="@id/detailsFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailsFragment"
        android:name="com.example.navigationflow.DetailsFragment"
        android:label="Details Screen" />
</navigation>

// layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

// layout/fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home Screen"
        android:textSize="24sp"
        android:layout_marginBottom="24dp" />

    <Button
        android:id="@+id/buttonGoToDetails"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go to Details" />
</LinearLayout>

// layout/fragment_details.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Details Screen"
        android:textSize="24sp"
        android:layout_marginBottom="24dp" />

    <Button
        android:id="@+id/buttonBackToHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Back to Home" />
</LinearLayout>

This app uses the Android Navigation Component to manage the flow between two screens: Home and Details.

The NavHostFragment in the main activity hosts the navigation graph, which defines the start screen and possible navigation paths.

In HomeFragment, a button triggers navigation to DetailsFragment using findNavController().navigate(). In DetailsFragment, the back button uses navigateUp() to return to Home.

This setup shows how navigation manages app flow by controlling which screen is shown and how users move between them, keeping the app organized and easy to follow.

Final Result
Completed Screen
Screen 1: Home Screen
+---------------------+
|     Home Screen     |
|                     |
|  [Go to Details]    |
+---------------------+

Screen 2: Details Screen
+---------------------+
|   Details Screen    |
|                     |
|  [Back to Home]     |
+---------------------+
Tap 'Go to Details' button on Home Screen navigates to Details Screen
Tap 'Back to Home' button on Details Screen navigates back to Home Screen
Stretch Goal
Add a third screen called About with a button on Home Screen to navigate to it and a back button to return.
💡 Hint
Create AboutFragment and add it to the navigation graph. Add a button in HomeFragment that navigates to AboutFragment using findNavController().navigate().