Search code examples
androidandroid-fragmentsandroid-actionbarandroid-animationandroid-navigation-editor

NavigationUI with actionbar icon clicks result in fragments fading in and out


I have an actionbar with icons that, when clicked, shows cooresponding fragments on the screen. This is independent of the navigation graph. I'm using the NavigationUI.onNavDestinationSelected method to navigate to respective fragments when the cooresponding icons are clicked in the actionbar. When I use the navigation graph to navigate between fragments through button click actions etc within fragments, there is no animation, but when I click on the actionbar icons, it causes the cooresponding fragments to slowly fade in and out. What do I have to do to disable this?

Main activity containing the NavHostFragment:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.navigation.NavController
import androidx.navigation.Navigation
import androidx.navigation.ui.NavigationUI
import com.google.android.material.snackbar.Snackbar

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)

        navController = Navigation.findNavController(this, R.id.navHostFragment)

        NavigationUI.setupActionBarWithNavController(this, navController)

        //supportActionBar?.setDisplayHomeAsUpEnabled(true)
        //setSupportActionBar(toolbar)
    }

    override fun onSupportNavigateUp(): Boolean {

        onBackPressed()
        return true

    }

    //TODO: add options in overflow menu to add new category and a new task
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.main_menu, menu)
        return super.onCreateOptionsMenu(menu)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        when (item.itemId)
        {
            R.id.app_settings -> {

                //just to test it out
                Snackbar.make(findViewById(R.id.main_activity_container), "app settings option clicked", Snackbar.LENGTH_LONG).show()
                true}

            R.id.main_pomo_settings -> {

                //just to test it out
                Snackbar.make(findViewById(R.id.main_activity_container), "pomo settings option clicked", Snackbar.LENGTH_LONG).show()
                true}
        }

        return NavigationUI.onNavDestinationSelected(item!!, navController)  || super.onOptionsItemSelected(item)
    }
}

Solution

  • I found the solution to my own question. You have to disable the animations by creating the following empty animation files in the anim folder:

    res/anim/nav_default_enter_anim.xml

    res/anim/nav_default_exit_anim.xml

    res/anim/nav_default_pop_enter_anim.xml

    res/anim/nav_default_pop_exit_anim.xml

    1. Right click the res folder (if no anim folder exists) and select New -> Android Resource File
    2. Select animation for the resource type
    3. Type nav_default_enter_anim for the file name and click OK.
    4. Repeat for the other files but this time right clicking on the anim folder.

    Put the following in each file:

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <!--Empty to disable animation-->
    </set>