Fragula 2
Fragula is a swipe-to-dismiss extension for navigation component library for Android.
It is an adaptation of an earlier version created by @shikleev and now maintained in this repository.
Table of Contents
Gradle Dependency
Add this to your module’s build.gradle file:
dependencies {
...
implementation 'com.fragula2:fragula-core:2.2'
}
The fragula-core module contains everything you need to get started with the library. It contains all core and normal-use functionality.
The Basics
First, you need to replace NavHostFragment with FragulaNavHostFragment in your layout:
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.fragula2.FragulaNavHostFragment"
android:id="@+id/nav_host"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true" />
Second, you need to replace your
<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/detailFragment"> <swipeable android:id="@+id/detailFragment" android:name="com.example.fragula.DetailFragment" android:label="DetailFragment" tools:layout="@layout/fragment_detail" /> ... navigation>
Finally, you need to set opaque background and layout direction flag to your fragment’s root layout to avoid any issues with swipe animation.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:layoutDirection="local">
...
androidx.constraintlayout.widget.ConstraintLayout>
Now if you open the app you'll see that you can swipe fragments like in Telegram, Slack and many other messaging apps.
More Options
Destination Arguments
In general, you should work with Fragula as if you would work with normal fragments. You should strongly prefer passing only the minimal amount of data between destinations, as the total space for all saved states is limited on Android.
First, add an argument to the destination:
<swipeable android:id="@+id/detailFragment" android:name="com.example.fragula.DetailFragment"> <argument android:name="itemId" app:argType="string" /> swipeable>
Second, create a Bundle object and pass it to the destination using navigate() as shown below:
val bundle = bundleOf("itemId" to "123")
findNavController().navigate(R.id.detailFragment, bundle)
Finally, in your receiving destination’s code, use the getArguments() method to retrieve the Bundle and use its contents:
val textView = view.findViewById<TextView>(R.id.textViewItemId)
textView.text = arguments?.getString("itemId")
It's strongly recommended to use Safe Args plugin for navigating and passing data, because it ensures type-safety.
Multiple BackStacks
Currently multiple backstacks is not supported, which means you can’t safely use extensions such as setupWithNavController(...) without losing your current backstack.
This issue affects both BottomNavigationView and NavigationView widgets.
Swipe Direction
If you want to change the direction of swipe gesture, you can do that by setting app:swipeDirection="..." manually in your navigation container. This example below sets up vertical swipe direction.
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.fragula2.FragulaNavHostFragment"
android:id="@+id/nav_host"
app:swipeDirection="top_to_bottom"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true" />
You can use either left_to_right (default) or right_to_left for horizontal direction. For vertical direction you can use only top_to_bottom, the bottom_to_top is not supported due to internal ViewPager2 restrictions.
Note: If you having an issues with nested scrollable views, this appears to be a scroll issue in ViewPager2. Please follow Google’s example to solve this.
Swipe Transitions
You may want to know when the scrolling offset changes to make smooth transitions inside your fragment view. To start listening scroll events you need to retrieve SwipeController and set OnSwipeListener as shown below:
Note: Currently shared element transitions between destinations are not supported in any form.
class DetailFragment : Fragment(R.layout.fragment_detail) {
private lateinit var swipeController: SwipeController
private lateinit var swipeListener: OnSwipeListener
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
...
swipeController = findSwipeController()
swipeListener = OnSwipeListener { position, positionOffset, positionOffsetPixels ->
// TODO animate views using `positionOffset` or `positionOffsetPixels`.
// the `position` points to the position of the fragment in backstack
}
swipeController.addOnSwipeListener(swipeListener)
}
override fun onDestroyView() {
super.onDestroyView()
swipeController.removeOnSwipeListener(swipeListener)
}
}
Remember: you must remove the listener when the fragment view is destroyed.
Theming
In most of the cases there is no need to change any values, but if you wish to override these, there are attributes provided:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">...item>
<item name="colorPrimaryDark">...item>
<item name="colorAccent">...item>
<item name="fgl_dim_color">#000000item>
<item name="fgl_dim_amount">0.10item>
<item name="fgl_parallax_factor">1.3item>
<item name="fgl_anim_duration">300item>
style>
4 Jun 15, 2022
49 Nov 28, 2021
1 Dec 28, 2021
0 Feb 13, 2022
15 Nov 24, 2022
0 Nov 5, 2021
290 Dec 9, 2022
1.3k Jan 2, 2023
35 Feb 15, 2022
21 Dec 10, 2022
6 Feb 3, 2022
1 Jul 11, 2022
5 Nov 24, 2022
1.7k Dec 31, 2022
88 Dec 11, 2022
216 Dec 16, 2022
2 Dec 22, 2022
831 Dec 26, 2022