Bottom Navigation Bar (Layout) is Moved up by Keyboard

Question

I am using customize bottom navigation bar using LinearLayout. So Whenever am focusing on the edit text field, the bottom view is appearing along with the keyboard.

I have tried with changing the android:windowSoftInputMode="adjustPan" and android:windowSoftInputMode="adjustResize" in manifest. It works but scrolling is not working when using it.

With the keyboard focused:

Without the keyboard focused:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.design.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sns.lovelike.activity.user.UserActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_50sdp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="end|bottom"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal"
        android:padding="@dimen/_5sdp"
        android:weightSum="5">


        <LinearLayout
            android:id="@+id/home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/home_iv"
                android:layout_width="@dimen/_18sdp"
                android:layout_height="@dimen/_18sdp"
                android:layout_gravity="center"
                android:src="@drawable/home_icon_normal" />

            <TextView
                android:id="@+id/home_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/user_home"
                android:textColor="@color/colorLightGray"
                android:textSize="@dimen/_10sdp" />

            <View
                android:id="@+id/hv"
                android:layout_width="@dimen/_32sdp"
                android:layout_height="@dimen/_1sdp"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/_1sdp"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorRed"
                android:visibility="invisible"
                tools:visibility="visible" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/love"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/love_iv"
                android:layout_width="@dimen/_18sdp"
                android:layout_height="@dimen/_18sdp"
                android:layout_gravity="center"
                android:src="@drawable/heart_icon_normal" />

            <TextView
                android:id="@+id/love_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/user_in_love"
                android:textColor="@color/colorLightGray"
                android:textSize="@dimen/_10sdp" />

            <View
                android:id="@+id/iv"
                android:layout_width="@dimen/_42sdp"
                android:layout_height="@dimen/_1sdp"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/_1sdp"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorRed"
                android:visibility="invisible"
                tools:visibility="visible" />

        </LinearLayout>

        <View
            android:layout_width="0dp"
            android:layout_height="@dimen/_60sdp"
            android:layout_marginBottom="@dimen/_20sdp"
            android:layout_weight="1"
            android:elevation="15dp"
            android:src="@drawable/search_icon_bottom" />

        <LinearLayout
            android:id="@+id/love_coin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/coin_iv"
                android:layout_width="@dimen/_18sdp"
                android:layout_height="@dimen/_18sdp"
                android:layout_gravity="center"
                android:src="@drawable/ilove_coin_normal" />

            <TextView
                android:id="@+id/coin_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/user_lov_coins"
                android:textColor="@color/colorLightGray"
                android:textSize="@dimen/_10sdp" />

            <View
                android:id="@+id/cv"
                android:layout_width="@dimen/_50sdp"
                android:layout_height="@dimen/_1sdp"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/_1sdp"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorRed"
                android:visibility="invisible"
                tools:visibility="visible" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/pager"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/pager_iv"
                android:layout_width="@dimen/_18sdp"
                android:layout_height="@dimen/_18sdp"
                android:layout_gravity="center"
                android:src="@drawable/pager_normal" />

            <TextView
                android:id="@+id/pager_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/user_pay"
                android:textColor="@color/colorLightGray"
                android:textSize="@dimen/_10sdp" />

            <View
                android:id="@+id/pv"
                android:layout_width="@dimen/_40sdp"
                android:layout_height="@dimen/_1sdp"
                android:layout_gravity="center"
                android:layout_marginTop="@dimen/_1sdp"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorRed"
                android:visibility="invisible"
                tools:visibility="visible" />

        </LinearLayout>


    </LinearLayout>

    <ImageView
        android:id="@+id/search_iv"
        android:layout_width="@dimen/_50sdp"
        android:layout_height="@dimen/_50sdp"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="@dimen/_20sdp"
        android:src="@drawable/search_icon_bottom"
        app:layout_anchor="@+id/linearLayout2"
        app:layout_anchorGravity="top|center" />

</android.support.design.widget.CoordinatorLayout>

Below is the java code, This is click action for the bottom navigation. It's similar to the other three items.

private void homeClickAction() {
    //if (!homeIsActive) {
    fragment = new HomeFragment();
    homeIV.setColorFilter(getResources().getColor(R.color.colorWhite));
    homeTV.setTextColor(getResources().getColor(R.color.colorWhite));
    loveIV.setColorFilter(null);
    loveTV.setTextColor(getResources().getColor(R.color.colorLightGray));
    coinsIV.setColorFilter(null);
    coinsTV.setTextColor(getResources().getColor(R.color.colorLightGray));
    pagerIV.setColorFilter(null);
    pagerTV.setTextColor(getResources().getColor(R.color.colorLightGray));
    v1.setVisibility(View.VISIBLE);
    v2.setVisibility(View.INVISIBLE);
    v3.setVisibility(View.INVISIBLE);
    v4.setVisibility(View.INVISIBLE);
    homeClicked = true;

}

can you share the screenshot of your layout describing the issue, and how you want it to be look like. — Asad Ali Choudhry, Jun 13 '19 at 08:46
could you explain more please ? I mean what is your problem and how do you want it to be look like. — JDevoloper, Jun 13 '19 at 08:54
@Asad Ali Choudry: I have appended layout screenshot right now. — Ahmed Suhail, Jun 13 '19 at 08:57
@JDevoloper Bottom view is appearing along with the keyboard. I need to prevent/hide the bottom view when the keyboard is visible. — Ahmed Suhail, Jun 13 '19 at 08:59

Asad Ali Choudhry · Answer 1 · 2019-06-13T09:16:12.483

2

If you want that keyboard should not push bottom bar up and it should remain behind the keyboard then just add this tag in your activity

android:windowSoftInputMode="adjustNothing"

Otherwise you can do it in a way, add keyboard visible/hidden events, and show/hide your bottom bar accordingly. Like

mainLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        if (mainLayout != null) {
            int heightDiff = mainLayout.getRootView().getHeight() - mainLayout.getHeight();
            if (heightDiff > 200) { 
               //keyboard is open, hide layout
            } else {
               //keyboard is hidden, show layout
            }
        }
    }
});

edited Jun 13 '19 at 09:16

answered Jun 13 '19 at 09:01

Asad Ali Choudhry

3,533
4
18
31

1

Yeah, I tried the above code also in the manifest. It's working what exactly I need but is not able to scroll(If I have a scroll view). – Ahmed Suhail Jun 13 '19 at 09:07
1

then try my other custom solution, detect keyboard show/hidden events, and accordingly show/hide your bottom layout. – Asad Ali Choudhry Jun 13 '19 at 09:08
1

Okay, I will try the second option. Can you please tell me that dpToPx. What should I use instead of that dpToPx? – Ahmed Suhail Jun 13 '19 at 09:12
1

no need, I've removed that. that was used just for precision, but it works without that. – Asad Ali Choudhry Jun 13 '19 at 09:16
1

you can also take help from this post, https://stackoverflow.com/a/25681196/5701085. But I made it simple for you. – Asad Ali Choudhry Jun 13 '19 at 09:18
1

try to use edittext.requestFocus(). if you can control your focusable to your edditext, it is really usefull for your issue. – JDevoloper Jun 13 '19 at 09:21
1

@AsadAliChoudhry, I tried your second opinion(mainLayout), It's working great, but one thing is when hiding the view, the empty space is showing over there. Can you have any suggestions to overcome that? Are you getting my point? – Ahmed Suhail Jun 13 '19 at 09:35
1

@JDevoloper I have more than 5 edit texts. So I tried with request focus also, sometimes not getting my requirement. – Ahmed Suhail Jun 13 '19 at 09:37
1

@AhmedSuhail can you share the screenshot of the space which you want to remove? – Asad Ali Choudhry Jun 13 '19 at 10:34
1

if its working, please upvote & accept my answer. thanks. – Asad Ali Choudhry Jun 13 '19 at 10:50
1

@AsadAliChoudhry Here is the link "http://lovelike.com.br/1560426416072.JPEG "for the screenshot. Please check. You can see the white empty space over the keyboard. – Ahmed Suhail Jun 13 '19 at 11:59
1

you made bottom Bar visibility to "INVISIBLE"? change it to "GONE" – Asad Ali Choudhry Jun 13 '19 at 12:16
1

Yes, For the highlighter I set to invisible. Can you check in the top? I have uploaded with the XML layout. Also, you need java code? I will also try my side to change the code. – Ahmed Suhail Jun 13 '19 at 12:37
1

@AsadAliChoudhry I tried with changing of invisible to gone then also the white space is showing and really thanks for your contiguous replying. If you have any suggestions please kindly let me know. Am eagerly waiting. – Ahmed Suhail Jun 13 '19 at 12:47
1

No problem, please share the java code where you are making it invisible. – Asad Ali Choudhry Jun 13 '19 at 12:51
Am not able to add code in the comment section. Please check in the top. I uploaded over there. – Ahmed Suhail Jun 13 '19 at 13:35
its not the code where you are hiding the bottomBar? – Asad Ali Choudhry Jun 13 '19 at 13:39
by the way by just adjusting your layout, it can resolve it easily, As I didn't have access to your complete code, thats why not able to find out the exact problem. But Its very simple issue. – Asad Ali Choudhry Jun 13 '19 at 13:40
@AsadAliChoudhry I think so, I will try to do some stuff in layout. Really Thank you for your solution. – Ahmed Suhail Jun 13 '19 at 13:44
you are welcome. please let me know if you face any other issue. – Asad Ali Choudhry Jun 13 '19 at 13:45
@AsadAliChoudhry Yes, Sure! I will. – Ahmed Suhail Jun 13 '19 at 13:52

Bottom Navigation Bar (Layout) is Moved up by Keyboard

1 Answers1