👩🏻‍💻 Navigation Component Projects

2-Navigation Component 2 Project ☀️

This project contains 1 activity, 6 fragments, bottom naigation and navigation drawer 👽

⭐️ Watch YouTube Tutorial!

Preview 👀

🌸 Bottom Navigation	🌸 Navigation Drawer
🌸 Options Menu	🌸 Login Screen

• 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"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/nav_graph"
   app:startDestination="@id/homeFragment">

   <fragment
       android:id="@+id/homeFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.HomeFragment"
       android:label="Home"
       tools:layout="@layout/fragment_home">
       <action
           android:id="@+id/action_homeFragment_to_loginFragment"
           app:destination="@id/loginFragment"
           app:enterAnim="@anim/slide_in_right"
           app:exitAnim="@anim/slide_out_left"
           app:popEnterAnim="@anim/slide_in_left"
           app:popExitAnim="@anim/slide_out_right" />
   </fragment>
   <fragment
       android:id="@+id/loginFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.LoginFragment"
       android:label="Login"
       tools:layout="@layout/fragment_login">
       <action
           android:id="@+id/action_loginFragment_to_welcomeFragment"
           app:destination="@id/welcomeFragment"
           app:enterAnim="@anim/slide_in_right"
           app:exitAnim="@anim/slide_out_left"
           app:popEnterAnim="@anim/slide_in_left"
           app:popExitAnim="@anim/slide_out_right">
           <argument android:name="username" />
           <argument android:name="password" />
       </action>
       <argument
           android:name="username"
           android:defaultValue="@null"
           app:argType="string"
           app:nullable="true" />
       <deepLink
           android:id="@+id/deepLink"
           app:uri="example.com/login/{username}" />
   </fragment>
   <fragment
       android:id="@+id/welcomeFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.WelcomeFragment"
       android:label="{username}"
       tools:layout="@layout/fragment_welcome">
       <argument
           android:name="username"
           app:argType="string" />
       <argument
           android:name="password"
           app:argType="string" />
       <action
           android:id="@+id/action_welcomeFragment_to_homeFragment"
           app:destination="@id/homeFragment"
           app:enterAnim="@anim/slide_in_right"
           app:exitAnim="@anim/slide_out_left"
           app:popEnterAnim="@anim/slide_in_left"
           app:popExitAnim="@anim/slide_out_right"
           app:popUpTo="@id/homeFragment"
           app:popUpToInclusive="true" />
   </fragment>
   <fragment
       android:id="@+id/settingsFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.SettingsFragment"
       android:label="Settings"
       tools:layout="@layout/fragment_settings" />
   <fragment
       android:id="@+id/termsFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.TermsFragment"
       android:label="Terms &amp; Conditions"
       tools:layout="@layout/fragment_terms" />
   <action
       android:id="@+id/action_global_termsFragment"
       app:destination="@id/termsFragment"
       app:enterAnim="@anim/slide_in_top"
       app:exitAnim="@anim/slide_out_bottom"
       app:popEnterAnim="@anim/slide_in_bottom"
       app:popExitAnim="@anim/slide_out_top" />
   <fragment
       android:id="@+id/searchFragment"
       android:name="com.yagmurerdogan.navigationcomponent2.SearchFragment"
       android:label="Search"
       tools:layout="@layout/fragment_search" />
</navigation>

• drawer_bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="@string/home_screen" />

    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />

</menu>

• options_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/termsAndConditions"
        android:title="Terms &amp; Conditions"
        app:showAsAction="never" />

    <item
        android:id="@+id/settingsFragment"
        android:menuCategory="secondary"
        android:title="@string/settings"
        app:showAsAction="never" />
</menu>

1-Navigation Component Project 🪐

This project contains 2 fragments and 1 activity 👽

⭐️ Watch YouTube Tutorial!

Preview Video

Steps

• Firstly, we should create Navigation Resource File. We can create this directory with using Resource Manager on Android Studio. My navigation resource file name is my_nav.xml.

• After creating my_nav.xml file, add 2 fragment by selecting "New Destination" icon on my_nav.xml file. With this button we can create new destination easily.

• my_nav.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/my_nav"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.hepsiburada.navigationcomponent.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/navigateToSecondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_pop_enter_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.hepsiburada.navigationcomponent.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <action
            android:id="@+id/navigateToFirstFragment"
            app:destination="@id/firstFragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_pop_enter_anim"
            app:popExitAnim="@anim/nav_default_pop_exit_anim" />
    </fragment>
</navigation>

👇🏼 As you can see below, First fragment has home icon. This means that we will see the First fragment on screen when app is opened. If we want to make Second fragment as home page, we can do it easily with right click on it and select "Set as Start Destination" button.

• fragment_first.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"
   android:background="@color/gray"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   tools:context=".FirstFragment">

   <TextView
       android:id="@+id/tv_number"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="1"
       android:textColor="@color/white"
       android:textSize="100sp"
       android:textStyle="bold"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.5"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

• fragment_second.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"
    android:background="@color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:context=".SecondFragment">

    <TextView
        android:id="@+id/tv_number2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:textColor="@color/white"
        android:textSize="100sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

• FirstFragment.kt

class FirstFragment : Fragment() {

   override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.fragment_first, container, false)

       view.setOnClickListener {
           Navigation.findNavController(view).navigate(R.id.navigateToSecondFragment)
       }

       return view
   }
}

• SecondFragment.kt

class FirstFragment : Fragment() {

   override fun onCreateView(
       inflater: LayoutInflater, container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View? {
       // Inflate the layout for this fragment
       val view = inflater.inflate(R.layout.fragment_second, container, false)

       view.setOnClickListener {
           Navigation.findNavController(view).navigate(R.id.navigateToFirstFragment)
       }

       return view
   }
}