Bottom Navigation Bar pushes down when changing between fragments

Question

In my activity i have a bottom navigation bar and the frame layout to show the fragments everything works fine but the problem is when i start moving from 1 - 4 in sequence the bottom navigation bar stays in its position but when i jump suddenly from 4 to 2 then the bottom navigation bar goes out of screen and when again clicked on the same item then it comes to normal position.

This video will clearly help you get what my problem is Click to watch.

as i guess this is a major problem when considering the UI so kindly help me how can i achieve this. For making things easier i'm posting my codes which contain these elements.

activity_appMain.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".AppFragments.AppMain">

    <FrameLayout
        android:id="@+id/fragments_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/navigation_bar"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation" />

</RelativeLayout>

AppMain.java

package com.coderedinnovations.allioservices.AppFragments;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MenuItem;
import android.view.WindowManager;

import com.coderedinnovations.allioservices.AppFragments.FeedbackFragment;
import com.coderedinnovations.allioservices.AppFragments.HomeFragment;
import com.coderedinnovations.allioservices.AppFragments.MyOrdersFragment;
import com.coderedinnovations.allioservices.AppFragments.MyProfileFragment;
import com.coderedinnovations.allioservices.R;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.firebase.iid.FirebaseInstanceId;

public class AppMain extends AppCompatActivity {

    public void adjustFontScale(Configuration configuration){

        configuration.fontScale = (float) 0.9;
        DisplayMetrics metrics = getResources().getDisplayMetrics();
        WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
        wm.getDefaultDisplay().getMetrics(metrics);
        metrics.scaledDensity = configuration.fontScale * metrics.density;
        getBaseContext().getResources().updateConfiguration(configuration, metrics);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_app_main);
        adjustFontScale(getResources().getConfiguration());
        this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

        BottomNavigationView bottomNavigationView = findViewById(R.id.navigation_bar);
        bottomNavigationView.setOnNavigationItemSelectedListener(navigationItemSelectedListener);

        getSupportFragmentManager().beginTransaction().replace(R.id.fragments_container, new HomeFragment()).commit();
    }

    private BottomNavigationView.OnNavigationItemSelectedListener navigationItemSelectedListener =
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                    Fragment selectedFragment = null;

                    switch (menuItem.getItemId()){
                        case R.id.nav_home:
                            selectedFragment = new HomeFragment();
                            break;
                        case R.id.nav_orders:
                            selectedFragment = new MyOrdersFragment();
                            break;
                        case R.id.nav_feedback:
                            selectedFragment = new FeedbackFragment();
                            break;
                        case R.id.nav_profile:
                            selectedFragment = new MyProfileFragment();
                            break;
                    }

                    getSupportFragmentManager().beginTransaction().replace(R.id.fragments_container,selectedFragment).commit();
                    return true;
                }
            };
}

I looked for a similar question like this but none of them have been answered

Edit: Issue only appears when i press from back to front but when i'm going from 1-4 the issue doesn't arise but when i click suddenly from 4 to any other tab the bar gets pushed down.

Answer 1

https://stackoverflow.com/a/59844009/13124119 - this answer worked for me also!

In the four fragments one of the fragment I mean the last fragment have the Co-ordinator layout as the parent layout so that what made the bottom bar to push down.

so I solved the issue by taking Constraint layout as the parent layout and added the child into that.

and you have to add the following attributes to Co-ordinator layout.

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

Answer 2

I was facing the same problem. This was mainly because of using coordinatorlayout in the inner screens. Any screen having coordinatorlayout makes the bottom navigation (placed on top) move from its location.

Answer 3

I really thank everyone's effort for helping me in solving the issue. but somehow i sorted out the problem by my own. In the four fragments one of the fragment I mean the last fragment have the Co-ordinator layout as the parent layout so that what made the bottom bar to push down.

so i solved the issue by taking Constraint layout as the parent layout and added the child into that. thanks for everyone again.

Answer 4

I'v already watched your video. I copied your code and run it in my workspace, but it works fine. So I actually don't know where the problem lies. Have you consider using ConstraintLayout? I tried to change your xml layout into ConstraintLayout and it also works fine.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragments_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@id/navigation_bar"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

The constraint of BottomNavigationView to the bottom of parent will make it stay at the bottom. And don't forget to constaint your FrameLayout with BottomNavigationView so that they are not overlayed with each other.

Answer 5

I actually did a layout quite different from yours in a similar enough scenario. Let me modify it and see if this works. In my case instead of a FrameLayout I use a relative layout with a scrollview inside, to allow content of any height. This sets the bottom bar to float at the bottom always.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<FrameLayout
    android:id="@+id/fragments_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/bottom_navigation" />

</LinearLayout>

In the off chance the frame layout doesn't behave correctly, then wrap it with a relative layout, though I do not think you shall need to.

Answer 6

Try this:

1.Add bottom margin 55 dp to framelayout. 2. remove the layout_above from framelayout. 3. add parent top true, center in parent true.