What is the best way to conceal the Material Bottom App Bar when the child fragment within the Coordinator Layout is being scrolled?

I am puzzled by why the app:hideOnScroll="true" attribute is not functioning as expected in my scenario, where I intend for my BottomAppBar to disappear when scrolling. My goal is to achieve a behavior similar to what is shown in this video: Hide bottom app bar on scroll

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:elevation="0dp">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorBackgroundPrimary"
            android:theme="@style/customtoolbar"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:titleTextColor="@color/colorTextPrimary" />

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

    <include layout="@layout/content_main" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorBtn"
        app:hideOnScroll="true"
        app:layout_scrollFlags="scroll|enterAlways"
        app:navigationIcon="@drawable/baseline_menu_24"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimaryDark"
        android:src="@drawable/baseline_add_24"
        app:layout_anchor="@id/bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

content_main.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/colorBackgroundPrimary"
    android:backgroundTint="@color/colorBackgroundPrimary"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer №1

The main element in content_main.xml should either be a NestedScrollView or a RecyclerView if you wish to activate the hideOnScroll feature.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve XML data using jQuery AJAX

I am facing an issue with returning an xml file from the server to the client and parsing it using jQuery's ajax function. The code snippet is as follows: Client: $("#submit").click(function(){ $.ajax({ type: "POST", ...

Using jQuery to handle multiple AJAX XML requests

Currently, I am working on developing a JavaScript XML parser using jQuery. The idea is that the parser will receive an XML file containing information along with multiple links to other XML files. As the parser runs, it will identify tags within the file ...

Mobile compatibility in ECMAScript 5.1 is essential for creating seamless user

Is there a reliable source for information on ECMAScript 5.1 compatibility with mobile browser devices? ...

Exploring the HTMLUnknownElement using jQuery.find() and an XML file

Trying to load an XML document (specifically, an RSS feed) through an Ajax request to parse and incorporate information into my webpage. Surprisingly, the code functions properly in Firefox, Opera, Chrome, and Safari but encounters issues with IE7. Upon i ...

Exploring Multi-Level JQuery XML Parsing for Similar Elements

My first question here as a newbie in the world of web development. I have a simple query and don't want to bombard you with all my code, so I'll provide a simpler example: I have an XML file named "example.xml" with the following structure: &l ...

Troubleshooting Issue: XMLHttpRequest Incompatibility with Internet Explorer

I'm having an issue with the script below. It works fine on Firefox and Chrome but doesn't seem to work on IE. I've tried various solutions, including lowering the security settings on my browser, but it still won't work. function se ...

There was an issue with the origin null not being permitted by Access-Control-Allow-Origin

Possible Duplicate: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin I am currently working on a weather application that runs smoothly in browsers. However, when I try to deploy it on my Android phone, it encounters iss ...

Utilizing JQuery to Modify XML File Content

Looking to retrieve data from an XML file using jQuery and display it in a textbox? If you want changes made in the textbox to reflect back in the original XML file, there are ways to achieve this. Here is some code that can help: <html><head&g ...

What are the drawbacks of automating the process of generating charts to track time spent on webpages?

!RESOLVED! I am looking to automatically generate charts based on users and their time spent on different pages of a website. I have a file named "log.xml" where I store user information (customers), visited pages, dates, and the time they spent; once I ...

javascript/jquery: ensure Android device displays content in full-screen mode

Currently working on developing a web app specifically for an android device that needs to be displayed in fullscreen mode. I came across the code snippet above on stack overflow, which successfully activates fullscreen mode upon click event. However, I a ...

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

This is a basic example of dropping markers one by one on Google Maps V3. I have implemented the drop animation when adding markers to the map. However, I am interested in customizing the drop with a fade animation. Is it possible using JavaScript or any ...

Exploring the intricacies of XML embedded within JSON

Utilizing YQL for jQuery, I am able to successfully execute cross-domain REST requests. The JSON response contains the desired XML data as key-value pairs. The specific request being made is: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%2 ...

Exploring XML: locating a particular child element

I am working with a specific XML file that contains data in nested tags. My goal is to extract information from certain tags using jQuery only. <?xml version="1.0" encoding="UTF-8"?> <prj:Flow xmlns:prj="url1" xmlns:com="url2" xmlns:ns2="url3 ...

Determine if an Android application has been installed using JavaScript or jQuery

I'm working on an Android app that is also accessible via a web browser. I want to add a banner prompting users to install the Android application if they haven't already. How can I use JavaScript or jQuery to detect if the user has the app insta ...

Interested in integrating server side JavaScript with your Android application?

Running a simple web page on a Raspberry Pi to toggle the board's LED with the click of a button. The button triggers a JavaScript function that controls the LED. Now, I want to be able to call this script from a button in an Android application... B ...

Why won't XML load with jquery GET, but does load with a direct link and PHP?

When it comes to pulling in an xml feed, I've been experimenting with using php and simpleXML to load it. Interestingly, I can access the direct link without any issues. However, when attempting to utilize jquery and GET method, the request times out ...

Troubleshooting: Jquery ajax request not functioning on Android emulator

Attempting to call a webservice using jQuery ajax. Utilizing jsonp as a datatype to address cross domain issues. All browsers are functioning properly. Tested on different domains and receiving valid responses. However, encountering failures when trying t ...

Identifying an Android device using Javascript or jQuery

Is there a way to identify an Android device for styling a mobile website? I want to add specific CSS styles for users on the Android platform. Appreciate any help! ...

The jQuery call to a web service is returning XML data, but the success function is receiving a

I have utilized: [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] The outcome of my web service call is: <string xmlns="http://tempuri.org/"> [{_pkId:"",_code:"",_message:"The file has been uploaded successfully.",_sta ...

Are there any superior alternatives for Android webviews?

Is there a more efficient webview option available for Android? Google's documentation advises against relying on the built-in webview object. It's puzzling that using webkit in Android is so limited compared to other mobile devices with similar ...