Search code examples
androidkotlinnavigationandroid-navigationandroid-architecture-navigation

NavigationComponents does not let me hide my appBar


I'm trying to use a collapsingToolbarLayout to show an image and a bunch of options inside a recyclerview, what I have done is the followin

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/appbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="bottom"
            app:expandedTitleMarginEnd="@dimen/activity_horizontal_margin"
            app:expandedTitleMarginStart="@dimen/activity_horizontal_margin"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="@string/app_name">

            <ImageView
                android:id="@+id/toolbar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:contentDescription="@null"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/ofertas_gradient" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat" />


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

This code, outputs this layout

enter image description here

Now, this is fine, and its working as espected in my fragment, the thing is that I also have the appbar configured my my NavigationController and is also poping above my toolbar

So, after swiping up, my toolbar collapses but I also have my appbar

enter image description here

So, what I did is this at my fragment to setup my toolbar

toolbar.apply {
            setNavigationOnClickListener { findNavController().navigateUp() }
        }

Now, I tried with actionBar.hide() to hide my actionbar and only let my toolbar to show up, but I cant get the actionBar, also I tried to setHomeDisplay as true with the toolbar but since I cant get the actionBar, I also cant add my navigationUp arrow to my toolbar

How can I also get the appBar from every fragment ?

Styles

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="actionBarTheme">@style/AppTheme.AppBarOverlay</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">@color/negro</item>
        <item name="fontFamily">@font/cera_pro_light</item>

    </style>

</resources>

Thanks


Solution

  • You're using Toolbar and ActionBar at the same time. Change your styles.xml by changing DarkActionBar -> NoActionBar. If you need ActionBar callbacks on your Activity or Fragment, you need to set your Toolbar as ActionBar.

    <resources>
    
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="android:windowLightStatusBar">true</item>
            <item name="actionBarTheme">@style/AppTheme.AppBarOverlay</item>
        </style>
    
        <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.NoActionBar">
            <item name="android:textColorPrimary">@color/negro</item>
            <item name="fontFamily">@font/cera_pro_light</item>
    
        </style>
    
    </resources>
    

    Optional (In your Activity's onCreate())

    setSupportActionBar(toolbar)