How to apply animation to the hamburger icon when opening the drawer

45 Views Asked by At

I've reviewing the nano degree videos i took a year ago to solidify my memories and my understanding but one thing bother me is that in the navigation course they apply the MVVM design pattern and use Navigation to switch screens of fragments and they use a Navigation Drawer with the hamburger icon but when i tap on it, it only opens the drawer no more if i retap it, it doesn't close it back... When i was using flutter there were this feature that makes the hamburger icon switches to back button with animation and vise versa and it was automated how can i apply this cool animation on a project like this and i would prefer if i don't create the action bar myself.

Here is the Main Activity xml file: activity_main.xml

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <fragment
            android:id="@+id/myNavHostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/navigation" />
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/navdrawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

Here is the Main Activity kt file: MainActivity.kt

class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
private lateinit var appBarConfiguration : AppBarConfiguration
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
    drawerLayout = binding.drawerLayout
    val navController = this.findNavController(R.id.myNavHostFragment)
    NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
    appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
    // prevent nav gesture if not on start destination
    navController.addOnDestinationChangedListener { nc: NavController, nd: NavDestination, bundle: Bundle? ->
        if (nd.id == nc.graph.startDestination) {
            drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
        } else {
            drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
        }
    }
    NavigationUI.setupWithNavController(binding.navView, navController)
}

override fun onSupportNavigateUp(): Boolean {
    val navController = this.findNavController(R.id.myNavHostFragment)
    return NavigationUI.navigateUp(navController, appBarConfiguration)
    }
}

And here is the full open source repository:https://github.com/udacity/andfun-kotlin-android-trivia/tree/master

After some research i find people making the action bar as a custom view and i don't think that's the efficient way.

0

There are 0 best solutions below