Creating a Kotlin project with Navigation feature

In this post I will talk about creating a Kotlin project that uses navigation feature to navigate between fragments of the application.

For the creation of the project I will be using JetBrains IntelliJ IDEA. Here is the GitHub repository of the project: https://github.com/ilya-shevtsov/Kotlin-Navigation-Project

Creating a project

First thing you need to is to create a project. To do so, you need to go to the top left corner of Android Studio, click "File" - "New" - "New Project".

For the purposes of demonstration, we will be starting from an Empty Activity. So, select "Empty Activity" and click "Next". Name you application and click "Finish".

Setting up the Gradle files

We will start with the setup of the Gradle files. In this project we will be using View binding feature, so we have to add it to our project, as well as the necessary imports and dependencies for using the navigation feature. We will select the build.gradle.kts and edit it. The files are located here:

Add the following code to the Project build.gradle file in the dependencies block:

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.5.0"

It should look like this:

Now we will edit the Module build.gradle.kts file. Add the following implementations to the dependencies block:

implementation 'androidx.navigation:navigation-fragment-ktx:2.5.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.5.0'

It should look like this:

Add the following plugin to the plugins block:

id 'androidx.navigation.safeargs'

It should look like this:

Add the following code to the android block:

buildFeatures {
    viewBinding true
}

It should look like this:

Creating a navigation graph

Now we are ready to start creating the project itself. To start, go to the resources manager on the left side of Android Studio. Select the navigation tab and click the plus sign.

Name your navigation file and click "OK"

Now we will create two fragments. After that we will use the navigation between them. To do so click the little phone icon with a green plus.

Click "Create new destination" button and select "Blank Fragment" name it and click "Finish"

Do the same steps for the second fragment. The result should look like this:

If you hover over the "mainFragment" layout a bobble will appear on the side of it. Click it and drag it to the right side of the secondFragment. Then do the same thing back. It should look like this:

Now you have to create a Navigation Host Fragment. In our case its out Main Activity. To do so go to the XML file of the main activity and in the search bar type "frag…". A NavHostFragment will show up. Click and drag the NavHostFragment to the main activity layout:

A popup will appear, select our navigation graph (my_nev in out case) and click "OK"

After we edit some of the code in the Main Activity XML file we will be ready to start editing the code of the Fragments and their respective XML files.

Editing fragments and their XML files

Before we start we need to edit some of the code in the Main Activity XML file. Navigate to the code section of the Main Activity XML file and add the constraints. To do so, add the following code to the bottom of Fragment Container View code:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

It should look like this:

Now we are going to switch to the XML file of the Main Fragment. There we will add a button and some text to the fragment. To do so go to the xml file and select the code view:

Check if the layout type is constraintlayout or not. If its not replace FrameLayout with the following code:

androidx.constraintlayout.widget.ConstraintLayout

It should look like this:

Add the following code to make the button and the text of the fragment:

<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:text="This is the First Fragment"
    android:textSize="30sp"
    android:textAlignment="center"
    app:layout_constraintBottom_toTopOf="@id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

<Button
    android:id="@+id/button"
    android:layout_width="280dp"
    android:layout_height="55dp"
    android:text="To Next Fragment"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

And this code to the XML file of the second Fragment:

<TextView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:text="This is the Second Fragment"
    android:textSize="30sp"
    android:textAlignment="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

The last thing we have to do is to edit the code of the fragments. Now go to the MainFragment.kt and clear it of all code except of function "onCreateView". Should look like this:

Connect the Fragment to the XML file. To do so add the following code to the Fragment():

R.layout.fragment_main

Now we have to edit the code of the fragment to bind the XML file to the fragment. We will also add a "setOnClickLisener" on the button we created with the following code:

class MainFragment : Fragment(R.layout.fragment_main) {

    private lateinit var binding: FragmentMainBindingoverride fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        binding = FragmentMainBinding.inflate(inflater,container,false)

        binding.button.setOnClickListener {
            findNavController().navigate(R.id.secondFragment)
        }
        return binding.root

    }
}

The end result should look like this:

Do the same steps, except the button part, to the second fragment. Should look like this:

That’s it! Now you have a project that uses the Navigation feature to switch between the fragments. If you click the button, it will take you to the second fragment and if you click "Back Arrow", it will take you back.