question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BottomAppBar inside BottomNavigationView adds rectangle

See original GitHub issue

When BottomNavigationView is added inside BottomAppBar, offset rectangle appears. The below screenshot shows the behavior.

https://ibb.co/gDsm029

I tried to change insets and added the following code, but it does not work. ViewUtils.doOnApplyWindowInsets(bottomAppBar) { view, insets, initialPadding -> insets!! }

XML layout: `<?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:layout_width=“match_parent” android:layout_height=“match_parent” android:background=“@android:color/darker_gray”> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true"/>

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="center">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/transparent"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/menu_nav" />

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/abCodeFloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>`

Android API version: 28

Material Library version: 1.2.0-alpha01 (before I used 1.1.0-apha02 and it was ok, but because of the bug connected with TextInputLayout cutout border when the hint is disabled, I moved to the last library version.)

Device: Samsung SM-A605FN (A6+)

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:6
  • Comments:5

github_iconTop GitHub Comments

3reactions
Orange1353commented, May 26, 2021

You can work around the bug, if you add a background for BottomNavigationView:

background_transparent.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#00000000" /> </shape>

0reactions
alisoleimani-androidcommented, Apr 27, 2022

You can work around the bug, if you add a background for BottomNavigationView:

background_transparent.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#00000000" /> </shape>

This solution worked for me, thank you my friend!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using BottomAppBar or BottomNavigationView to create ...
These are the present steps that I have followed to create the view: Created layout file with the coordinator layout as the root...
Read more >
How I drew custom shapes in bottom bar - ProAndroidDev
By default BottomNavigationView is in the form of a rectangle, so we're going to use Path to redraw it with curves as shows...
Read more >
BottomNavigationView - Android Developers
Represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.
Read more >
BottomNavigationBar class - material library - Dart API
A material widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and...
Read more >
How to Customize Background Shape Bottom Navigation ...
CustomShape # BottomNavigationView #AndroidStudio #Modern Hi everyone, I am @Abdul Aziz Ahwan . In this video, we are going to Learn How do...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found