This project contains 1 activity, 6 fragments, bottom naigation and navigation drawer 👽
| 🌸 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 & 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 & Conditions"
app:showAsAction="never" />
<item
android:id="@+id/settingsFragment"
android:menuCategory="secondary"
android:title="@string/settings"
app:showAsAction="never" />
</menu>This project contains 2 fragments and 1 activity 👽
-
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
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent