Add Navigation Components to the Project

Navigation helps the users navigate inside the application between fragments and the activity. Navigation Component, on the other hand, is part of Android Jetpack and helps us (the developers) build navigation for component clicks, deep links and more.

Navigation Component consists of Navigation Graph, Nav Host and the Nav Controller. We will talk about them in detail throughout the article and implement it.

navigation_component_android

1. First, add the dependencies to the module level build.gradle file.

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

2. Create a Nav Host

The Nav Host is a container for all the fragments to be shown on. With the help of Nav Controller, the developer can navigate the user between fragments and nested nav graphs.

<fragment android:layout_width="match_parent"
    android:id="@+id/nav_host_fragment"
    app:defaultNavHost="true"
    app:navGraph="@navigation/main_navigation"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_height="match_parent"/>

In the above implementation, three attributes are important namely, android:name, app:navGraph and app:defaultNavHost.

android:name contains the name of the NavHostFragment. app:navGraph contains the path to the navigation graph. Set app:defaultNavHost to true which ensures appropriate behavior for back button clicks.

3. Create a Navigation Graph and add Fragments

Create a Navigation Graph with the name main_navigation.xml inside the navigation folder. Navigation Graph contains the destinations and actions. Destinations are the fragments the user interacts with and the action shows user navigation inside the app (as shown in the figure above).

navigation_component_create

<navigation 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:id="@+id/main_navigation"
    app:startDestination="@id/loginFragment">

    <fragment
        android:id="@+id/loginFragment"
        android:name="com.gsrikar.ecommerce.ui.login.LoginFragment"
        android:label="Login"
        tools:layout="@layout/login_fragment" />
</navigation>

To add LoginFragment to the Navigation Graph, set fragment class name to the android:name attribute and toolbar title as android:label.

Set any fragment id to the app:startDestination and this is the first and the last screen the user sees when opening the application or closing it.

Finally, you can remove the fragment transactions from the activity or other fragments like below.

if (savedInstanceState == null) {
    supportFragmentManager.beginTransaction()
        .replace(R.id.container, LoginFragment.newInstance())
        .commitNow()
}

Run the application and you should see the Login Fragment.

Popular posts from this blog

How to Read Metadata from AndriodManifest File

Metadata tags are key-value pairs and one of the decent ways to access the API keys from the libraries. They are added to the AndroidManifest.xml under the application tag and are available through the PackageManager . If you have worked with third-party libraries or even with App shortcuts, Downloadable Fonts, Firebase MLKit, you may have come across metadata tags. In the article, let’s add the metadata tags to the app module’s Manifest file and read the metadata key-values and the key-resource from a library module both in kotlin and java. Add meta-data: Add metadata to the app module's AndroidManifest.xml file under the application tag. You can add as many metadata elements as you want and you can also add metadata under the activity, service, broadcast receiver, content provider tags. <meta-data android:name= "com.gsrikar.library.LIBRARY_ACCESS_KEY" android:value= "masndfiu4er9funwikesd" /> <meta-data and
Read more

Create Assets Folder, Add Files and Read Data From It

Image
Sometimes, we need to read the data stored in the files during runtime and want to make sure the data is not tampered by the Android build system. In this article, we will take a look at how to create the assets folder using Android Studio and read the stored data from it. First, Right-click on the module name or the package name. This opens an option window where we need to select the Assets Folder option by hovering over New and then on the Folder option. Now, we will see a window where we change the folder location and the source set. Change the values if necessary otherwise keep the defaults and click Finish. It may trigger a Gradle Sync. Irrespective of the sync, the Assets folder is created and is visible in the module. Now, Right-click on the Assets folder and click on the File option by hovering over the New option. Enter the name of the file name and click Enter to create the file. The file with the name user_details.json is created under the assets folder. Add some JSON
Read more

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Image
In this article we will learn about, item decoration in Android and how we can use it to add even spacing between the child items. A RecyclerView without spacing will look like the image below but in most cases, we want to add spacing between the items. [You can see there are no margins between the views and only elevation] A more traditional option is adding margins in the list item xml file. If we take this route, we will soon end up with uneven spacing issues with vertical margins. [There are even left, right, top, bottom margins for all the rows except the last item in the first image and in the subsequent image, the top margin for the first item is half of the other items] The best way is to add the ItemDecoration to the RecyclerView as it affects the individual items and you can have more control over them. Kotlin: /** * Add vertical, horizontal spacing to the recycler view */ class DefaultItemDecorator(private val horizontalSpacing: Int,
Read more

How to Change Material Chip Text Size, Text Style and Font

Chips in Android is a Material Design Component used primarily for actions or choice or during filters or as an input. The attributes like textColor , textStyle and fontFamily are ignored when added to the Material Chips directly. We need to modify these values using textAppearance . <com.google.android.material.chip.Chip android:id="@+id/maleChip" style="@style/Widget.MaterialComponents.Chip.Choice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:layoutDirection="locale" android:text="@string/chip_text_male" android:textAppearance="@style/AppTheme.GenderChip" android:textColor="@color/colorWhiteText" app:chipBackgroundColor="@drawable/select_chip" app:chipEndPadding="@dimen/chip_horizontal_margin" app:chipStartPadding="@dimen/chip_horizontal_margin&quo
Read more

How to Set an Android App as a Default Dialer

Image
A default dialer is an application that handles the Phone calls on the device. Google made the provision for third-party applications to be a default phone handler from SDK 23 (6.0, Marshmallow version). In the article, we will learn about how to set our Android application as a default dialer. 1) Add the below intent filters under the activity tag in the AndroidManifest.xml. <intent-filter> <action android:name="android.intent.action.DIAL"/> <category android:name="android.intent.category.DEFAULT"/> </intent-filter> <intent-filter> <action android:name="android.intent.action.DIAL"/> <category android:name="android.intent.category.DEFAULT"/> <data android:scheme="tel"/> </intent-filter> 2) Check if our application is already a default dialer app using TelecomManager. val telecomManager = getSystemService(Context.TELECOM_SERVICE) as TelecomManager Log
Read more