Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 218
Calco Avatar asked Mar 30 '17 10:03

Calco


People also ask

How do you keep a bottom nav bar from being pushed up on keyboard?

Try removing this: android:windowSoftInputMode="adjustResize" from AndroidManifest. xml This should help. You have 3 options for what to do when the keyboard shows- scroll the app such that the cursor is onscreen, resize the app in the remaining space, or nothing. Number 2 is probably the closest to what you want.

How do I hide the bottom Navigation bar on Android?

Way 1: Touch “Settings” -> “Display” -> “Navigation bar” -> “Buttons” -> “Button layout”. Choose the pattern in “Hide navigation bar” -> When the app opens, the navigation bar will be automatically hidden and you can swipe up from the bottom corner of the screen to show it.

How do you turn off the behavior bottom Navigation bar goes up with keyboard in flutter?

I just came across the same problem where my bottomNavbar is moving up with the keyboard when the keyboard is enabled. I solved it by checking if the keyboard is open or not. If it is open, just hide the disable the bottomNavbar and when it is closed, it's time to enable the navbar..


2 Answers

The easiest implementation, Add AndroidManifest.xml in

<activity android:windowSoftInputMode="adjustPan"/> 

hopefully this helps someone out. Enjoy !

like image 131
Praveen Kumar Verma Avatar answered Sep 19 '22 13:09

Praveen Kumar Verma


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

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

this works for me.. happy coding

like image 25
Maksudul Hasan Raju Avatar answered Sep 21 '22 13:09

Maksudul Hasan Raju