Hiding ‘Bottom Navigation Bar’ whilst keyboard is present - Android

Question

I have a small demo chat UI application. This application has a bottom navigation bar. I need the bottom navigation bar to hide when the keyboard appears.

Here is an example of the chat UI

As you can see when you click in the EditText element, the keyboard appears but the bottom navigation bar stays visible. I have tried methods such as this measurement method, but the UI elements flicker like this.

Is there a proper way to hide the bottom navigation bar when the keyboard is visible?

EDIT: In the below activity you can see where I set the keyboard listener to adjust the position of UI elements when the keyboard is determined as being visible.

This is my activity code, uses setKeyboardListener method from the above link and set it in onCreateView:

package uk.cal.codename.projectnedry.TeamChatFragment;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.graphics.Rect;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.Layout;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.Window;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.roughike.bottombar.BottomBar;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;
import uk.cal.codename.projectnedry.R;
import uk.cal.codename.projectnedry.TeamChatFragment.ListAdapter.TeamChatListAdapter;
import uk.demo.cal.genericmodelviewpresenter.GenericMvp.GenericMvpFragment;

import static android.view.View.GONE;

/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * {@link TeamChatView.OnFragmentInteractionListener} interface
 * to handle interaction events.
 * Use the {@link TeamChatView#newInstance} factory method to
 * create an instance of this fragment.
 */
public class TeamChatView extends GenericMvpFragment implements TeamChatContract.RequiredViewOps {

    private OnFragmentInteractionListener mListener;
    @BindView(R.id.teamChatList)
    RecyclerView mTeamChatRecyclerView;
    @BindView(R.id.teamChatSendButton)
    ImageButton mTeamChatSendButton;
    @BindView(R.id.messageTextInput)
    EditText mMessageTextInput;
    TeamChatListAdapter mTeamChatListAdapter;
    TeamChatListAdapter.ClickListener mTeamChatListClickListener;
    private ArrayList<String> mTestMessageList;

    public interface OnKeyboardVisibilityListener {
        void onVisibilityChanged(boolean visible);
    }

    public final void setKeyboardListener(final OnKeyboardVisibilityListener listener) {
        final View activityRootView = ((ViewGroup) getActivity().findViewById(android.R.id.content)).getChildAt(0);

        activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            private boolean wasOpened;

            private final int DefaultKeyboardDP = 100;

            // From @nathanielwolf answer...  Lollipop includes button bar in the root. Add height of button bar (48dp) to maxDiff
            private final int EstimatedKeyboardDP = DefaultKeyboardDP + (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ? 48 : 0);

            private final Rect r = new Rect();

            @Override
            public void onGlobalLayout() {
                // Convert the dp to pixels.
                int estimatedKeyboardHeight = (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP, EstimatedKeyboardDP, activityRootView.getResources().getDisplayMetrics());

                // Conclude whether the keyboard is shown or not.
                activityRootView.getWindowVisibleDisplayFrame(r);
                int heightDiff = activityRootView.getRootView().getHeight() - (r.bottom - r.top);
                boolean isShown = heightDiff >= estimatedKeyboardHeight;

                if (isShown == wasOpened) {
                    Log.d("Keyboard state", "Ignoring global layout change...");
                    return;
                }

                wasOpened = isShown;
                listener.onVisibilityChanged(isShown);
            }
        });
    }

    public TeamChatView() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @return A new instance of fragment TeamChatView.
     */
    public static TeamChatView newInstance() {
        TeamChatView fragment = new TeamChatView();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @SuppressLint("MissingSuperCall")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(TeamChatPresenter.class, TeamChatModel.class, savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        final View view = inflater.inflate(R.layout.fragment_team_chat_view, container, false);
        this.mUnbinder = ButterKnife.bind(this, view);

        mTestMessageList = new ArrayList<>();
        this.mTeamChatListAdapter = new TeamChatListAdapter(mTestMessageList);
        this.mTeamChatRecyclerView.setAdapter(this.mTeamChatListAdapter);
        final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getContext());
        this.mTeamChatRecyclerView.setLayoutManager(linearLayoutManager);

        this.mTeamChatSendButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(!String.valueOf(mMessageTextInput.getText()).equals("")) {
                    getSpecificImpOfGenericPresenter().sendMessage(String.valueOf(mMessageTextInput.getText()));
                    mMessageTextInput.setText("");
                    mTeamChatRecyclerView.smoothScrollToPosition(mTestMessageList.size());
                }
            }
        });

        setKeyboardListener(new OnKeyboardVisibilityListener(){
            @Override
            public void onVisibilityChanged(boolean visible) {
                RelativeLayout contentFrame = (RelativeLayout) getActivity().findViewById(R.id.content_company_navigation);
                BottomBar lowerNavigationBar = (BottomBar) getActivity().findViewById(R.id.bottomBar);
                if (visible) { // if more than 100 pixels, its probably a keyboard...
                    lowerNavigationBar.setVisibility(GONE);
                    contentFrame.setPadding(0, 0, 0, 0);
                    mTeamChatRecyclerView.smoothScrollToPosition(mTestMessageList.size());
                } else {
                    contentFrame.setPadding(0, 0, 0, convertDpToPixel(60, getContext()));
                    mTeamChatRecyclerView.smoothScrollToPosition(mTestMessageList.size());
                    lowerNavigationBar.setVisibility(View.VISIBLE);
                }
            }
        });
        return view;
    }

    /**
     * This method converts dp unit to equivalent pixels, depending on device density.
     *
     * @param dp A value in dp (density independent pixels) unit. Which we need to convert into pixels
     * @param context Context to get resources and device specific display metrics
     * @return A float value to represent px equivalent to dp depending on device density
     */
    public static int convertDpToPixel(float dp, Context context){
        Resources resources = context.getResources();
        DisplayMetrics metrics = resources.getDisplayMetrics();
        int px = (int) (dp * ((float)metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT));
        return px;
    }

    public void addToTestMessageList(String str){
        this.mTestMessageList.add(str);
        this.mTeamChatListAdapter.notifyDataSetChanged();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
       // getView().getViewTreeObserver().removeGlobalOnLayoutListener(test);
    }

    @Override
    public TeamChatPresenter getSpecificImpOfGenericPresenter() {
        return (TeamChatPresenter) this.mPresenter;
    }
}

This is my XML layout:

<RelativeLayout 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"
    tools:context="uk.cal.codename.projectnedry.TeamChatFragment.TeamChatView">

    <android.support.v7.widget.RecyclerView
        android:layout_above="@+id/chatViewMessageEntryLayout"
        android:id="@+id/teamChatList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:isScrollContainer="false"
        android:paddingTop="10dp"
        android:scrollbars="vertical" />    

    <RelativeLayout
        android:id="@+id/chatViewMessageEntryLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <View
            android:id="@+id/chatViewMessageEntrySeperator"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#e3e3e8" />

        <EditText
            android:id="@+id/messageTextInput"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:layout_below="@+id/chatViewMessageEntrySeperator"
            android:layout_toLeftOf="@+id/teamChatSendButton"
            android:background="@android:color/transparent"
            android:hint="Enter message"
            android:inputType="textCapSentences|textMultiLine"
            android:maxLength="1000"
            android:maxLines="4"
            android:paddingLeft="10dp" />

        <ImageButton
            android:id="@+id/teamChatSendButton"
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_gravity="center"
            android:background="#00B9EF"
            android:src="@drawable/ic_send_white_24dp" />

    </RelativeLayout>

</RelativeLayout>

did you found any solution for this...i am also having the same problem — sunil kushwah, Aug 07 '17 at 12:28

Praveen Kumar Verma · Answer 1 · 2020-04-28T11:40:58.447

97

The easiest implementation, Add AndroidManifest.xml in

<activity android:windowSoftInputMode="adjustPan"/>

hopefully this helps someone out. Enjoy !

edited Apr 28 '20 at 11:40

answered Apr 27 '17 at 16:46

Praveen Kumar Verma

2,115
1
13
27

9

In this mode `ToolBar` is sliding out of the screen – Konstantin Konopko Jun 06 '17 at 15:50
6

When keyboard appears 'adjustPan' hides the Toolbar & 'adjustResize' shows overlapped Bottombar layout. Any solution? – Ahamadullah Saikat Sep 12 '18 at 17:21

score 23 · Answer 2 · answered Dec 05 '18 at 12:55

23

you just add this code in your manifest like this way..

 <activity android:name=".MainActivity"
        android:windowSoftInputMode="adjustPan">

this works for me.. happy coding

answered Dec 05 '18 at 12:55

Maksudul Hasan Raju

649
7
6

score 12 · Accepted Answer · answered Aug 24 '17 at 09:02

12

I ended up using the height measuring method that seems to be the standard way of soft keyboard detection which is described in this answer. However, I used this library's implementation of it, as it is still the same ViewTreeObserver.OnGlobalLayoutListener method, implemented well, and allowed me to abstract the code out of my applications main codebase.

When this keyboard visibility listener is triggered, I then hide/show the bottom navigation bar (which I have explained here).

answered Aug 24 '17 at 09:02

Calco

1,210
1
14
28

1

That's the best answer since there might be an EditText (or subview containing EditText) in a recycler view. As a result you don't want to set adjustPan because in that case the keyboard might go over your content in recycler view. – Tzegenos May 05 '20 at 14:32

score 6 · Answer 4 · edited Mar 26 '19 at 13:32

6

Add this line in onResume() of your Activity or Fragment.

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);

It is worked for me. Just try it once.

edited Mar 26 '19 at 13:32

Joaquin Iurchuk

5,003
1
40
61

answered Mar 26 '19 at 12:56

mahesh kumar

119
1
6

score 4 · Answer 5 · edited Apr 07 '20 at 00:53

4

Just add the attribute below to every activity in your AndroidManifest.xml file.

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="stateAlwaysHidden|adjustPan" />

edited Apr 07 '20 at 00:53

Matt Ke

2,612
8
21
36

answered Apr 06 '20 at 21:02

Kasasira

103
1
4

If you want to set a default mode for your application consider doing it in your theme using the attribute `stateAlwaysHidden|adjustPan` – Peter F May 05 '21 at 18:02

tahsinRupam · Answer 6 · 2017-03-30T11:33:13.763

2

Add the attribute : android:windowSoftInputMode="adjustResize"" in your manifest inside activity tag:

 <activity
        android:name=".YourActivity"
        android:windowSoftInputMode="adjustResize"/>

NB: I suggest, You should use NestedScrollView as the parent layout.

Hope this helps.

edited Mar 30 '17 at 11:33

answered Mar 30 '17 at 10:47

tahsinRupam

5,820
1
15
33

I have tried this, and it make my action bar disappear off screen along with the first 3 to 4 messages – Calco Mar 30 '17 at 10:56
Have you tried removing the measurement method ? You may give it a try commenting previous codes regarding this issue. – tahsinRupam Mar 30 '17 at 10:59
What is the point using NestedScrollView for a single RecycleView ? You may include a Parent Layout where you can add RecycleView and RelativeLayout (chatViewMessageEntryLayout) inside the NSV. – tahsinRupam Mar 30 '17 at 11:04
I removed the NSV and now just have the RecycleView. [This is what it looks like with adjustPan](http://i.imgur.com/BGfbJYD.mp4), as you can see the action bar vanishes and I only get half an EditTest visible. – Calco Mar 30 '17 at 11:12
Check my updated answer. Use adjustResize instead. You should wrap all of your views inside a scrollView otherwise keyboard won't have space to show. – tahsinRupam Mar 30 '17 at 11:35
Sadly I still get the flicker when the bottom nav bar appears/hides – Calco Mar 30 '17 at 11:59

score 2 · Answer 7 · answered Sep 27 '18 at 04:57

2

In my case, I am using DrawerLayout as a parent view with some layout content and A Navigation Bottom Bar. In Manifest file add "android:windowSoftInputMode="adjustPan" this TAG with Activity and this working fine.

answered Sep 27 '18 at 04:57

ajay singh

119
1
5

score 2 · Answer 8 · answered May 18 '20 at 05:47

 private boolean keyboardListenersAttached = false;
private ViewGroup rootLayout;


       @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_settings, container, false);


    rootLayout = (ViewGroup) view.findViewById(R.id.settings_layout);
    attachKeyboardListeners();

    return view;
}



    private ViewTreeObserver.OnGlobalLayoutListener keyboardLayoutListener = new 
    ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        int heightDiff = rootLayout.getRootView().getHeight() - 
        rootLayout.getHeight();
        if (getActivity() != null) {
            int contentViewTop = 
           getActivity().getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();
            LocalBroadcastManager broadcastManager = 
            LocalBroadcastManager.getInstance(getContext());
            Rect r = new Rect();
            rootLayout.getWindowVisibleDisplayFrame(r);
            int screenHeight = rootLayout.getRootView().getHeight();

            // r.bottom is the position above soft keypad or device button.
            // if keypad is shown, the r.bottom is smaller than that before.
            int keypadHeight = screenHeight - r.bottom;
            if (keypadHeight > screenHeight * 0.15) {
                onHideKeyboard();

                Intent intent = new Intent("KeyboardWillHide");
                broadcastManager.sendBroadcast(intent);
            } else {
                int keyboardHeight = heightDiff - contentViewTop;
                onShowKeyboard(keyboardHeight);

                Intent intent = new Intent("KeyboardWillShow");
                intent.putExtra("KeyboardHeight", keyboardHeight);
                broadcastManager.sendBroadcast(intent);
            }
        }else {

        }
    }
};

protected void onShowKeyboard(int keyboardHeight) {
    System.out.println("keyboard is shown");
    dashboardActivity.bottomNavigationView.setVisibility(View.VISIBLE);
    dashboardActivity.fab.setVisibility(View.VISIBLE);

}
protected void onHideKeyboard() {
    System.out.println("keyboard is hide");
    dashboardActivity.bottomNavigationView.setVisibility(View.INVISIBLE);
    dashboardActivity.fab.setVisibility(View.INVISIBLE);
}

protected void attachKeyboardListeners() {
    if (keyboardListenersAttached) {
        return;
    }

    rootLayout.getViewTreeObserver().addOnGlobalLayoutListener(keyboardLayoutListener);
    keyboardListenersAttached = true;
}

in Manifest.xml file add

<activity
        android:name=".Activity.DashboardActivity"
        android:windowSoftInputMode="adjustResize"

         />

score 1 · Answer 9 · edited Oct 24 '20 at 09:43

1

<activity android:name=".Activities.OrderSceenWithOrder" 
   android:windowSoftInputMode="adjustPan"
    >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

edited Oct 24 '20 at 09:43

David Buck

3,439
29
24
31

answered Oct 24 '20 at 09:16

Ali Raza

55
6

score 0 · Answer 10 · answered Apr 08 '21 at 07:28

0

That solution works for me and it also doesn't show overlapped bottom navbar just add this line to your activity:

android:windowSoftInputMode="adjustResize|adjustPan"

answered Apr 08 '21 at 07:28

Bilal Aslam

13
4

The accepted answer explains why it's not sufficient to use "adjustResize|adjustPan" in some cases with an edit control. – John Apr 08 '21 at 13:16

score -1 · Answer 11 · answered Apr 14 '20 at 06:31

-1

Add this onResume() in your fragment

@Override
public void onResume() {
    Objects.requireNonNull(getActivity()).getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);
    super.onResume();
}

Hope this helps someone!

answered Apr 14 '20 at 06:31

Rajnish Sharma

355
2
14

Hiding ‘Bottom Navigation Bar’ whilst keyboard is present - Android

11 Answers11

Linked