In my Android app, it is vital for me to use the adjustResize behavior for the soft keyboard. So users can scroll down to other UI elements, such as a "continue" button.

I've noticed that that adjustResize only works when I have both the Manifest setting and android:fitsSystemWindows="true" in the layout root element. (Please correct me if I'm wrong!)

But with android:fitsSystemWindows="true" the Toolbar no longer sits behind the Status Bar. Which makes perfect sense, but isn't what I want.

When the Toolbar sits behind it, the status bar has a matching darker shade of my Toolbar's color. What I have with android:fitsSystemWindows="true" is a colorless status bar and a toolbar that sits 24dp lower than I want it.

I will give up the matching colored Status Bar for the sake of the adjustResize keyboard behavior. But my question is, is it possible to have both? Dare I dream for both Beauty and Accessibility?

Anyone more experienced know the magical combination of settings? Or perhaps, as a work around, a way to explicitly color the status bar?

fyi:

These are Activities with RelativeLayout root elements, and there are ListViews and EditTexts in some of them.

Toolbar is android.support.v7.widget.Toolbar

Potentially relevant Style items:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowContentOverlay">@null</item>

PS - I've read dozens of similar-ish questions on soft keyboard behavior, but was unable to find anything helpful on unintended effects to the Toolbar. Also vice versa, lots of Style questions about toolbar/statusbar behavior, but nothing seemingly relevant. Never the less, sorry if I missed something!

Many thanks in advance!

Edit

I've been playing with removing android:fitsSystemWindows="true" and adding more ScrollViews or trying to get everything into the same ScrollView. This does nothing.

If I remove android:fitsSystemWindows="true" then the bottom of the UI is "glued" to the bottom of the screen -- it does not "resize" to instead glue to the top of the soft keyboard like I would expect it to do with adjustResize set in the Manifest.

Setting android:fitsSystemWindows="true" in the root view makes the UI resize like I would expect -- but it also makes the toolbar no longer draw behind the statusBar.

So I am still exactly where I started :(

Adding a layout XML code sample:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 <!-- CoordinatorLayout because this view uses SnackBars -->

    <!-- Relative Layout to lock "continue" button bar to bottom -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main content, that scrolls with or without keyboard -->
        <!-- Correctly sits behind transparent Status Bar -->
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/footer_persistent_height">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!-- ACTUAL VIEWS DELETED FOR BREVITY / CLARITY -->
            </RelativeLayout>
        </android.support.v4.widget.NestedScrollView>


        <!-- Bottom nav bar -->
        <!-- Correctly sits at bottom of UI when keyboard is not visible -->
        <!-- PROBLEM: Not accessible when soft keyboard is visible -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            style="?android:attr/buttonBarStyle">

            <Button
                android:id="@+id/skip_button"
                android:theme="@style/ButtonContinueGrey"
                android:onClick="skipClickHandler"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                style="?android:attr/buttonBarButtonStyle"/>

            <Button
                android:id="@+id/button_progress"
                android:theme="@style/ButtonContinueColored"
                android:onClick="continueClickHandler"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                style="?android:attr/buttonBarButtonStyle"/>
        </LinearLayout>

    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
  • I can't understand your problem correctly. Do you want to hide your toolbar when current view is scrolled? Your purpose of using adjustResize behaviour is for making your "continue" button accessible, have you tried to nest your RealtiveLayout inside NestedScrollView instead? You can control your statusBar color by setting ColorPrimaryDark in your theme, if you are >= Lollipop – Wiktor Wardzichowski Mar 7 '17 at 9:22
  • 1
    Try to keep your layout in scroll view and remove android:fitsSystemWindows="true" and use only adjust resize – Varun Jain Mar 7 '17 at 19:54
  • fitsSystemWindow simply draws your views behind the statusbar. possible duplicate? stackoverflow.com/questions/37454733/… Can you post an example layout - there are a lot of combinations that can be causing the problem. – ayvazj Mar 8 '17 at 8:31
  • @VarunJain if you can quickly make your comment and answer, I will give you the bounty! (it expires in less than an hour) – Kaitlyn Hanrahan Mar 9 '17 at 16:25
  • I'm having the exact same problem, did you find a solution that doesnt involve tinting the status bar (what I'm trying to draw behind the statusbar is not a solid color) – FRR Feb 2 at 5:25

I didn't got your question properly but as far I can understand to solve the problem-

For the padding problem try adding

android:fitsSystemWindows="true"
android:clipToPadding=”false”

And for the transparent status bar add

<item name="android:statusBarColor">@android:color/transparent</item>

to your AppTheme. Hope it helps rest please upload the screenshot of your problem for detailed problem view.

  • clipToPadding solved my issue where the activity using fitsSystemWindows="false" and a fragment using fitsSystemWindows="true"... along with windowSoftInputMode="adjustResize" on the activity. Before setting the clipTopPadding="false" I was seeing unessessary padding under the toolbar, which clipped the fragments content. – Codeversed May 22 at 13:25

Try to keep your layout in scroll view and remove android:fitsSystemWindows="true" and use only adjust resize

  • Glad someone was able to get the bounty :) I didn't have time to fully try out your solution before the bounty was expiring. Your simple solution does get the StatusBar the way I wanted, and I can scroll... but I can only scroll to the parts of the UI inside the ScrollView. The "continue" button, which is purposely outside the ScrollView is not accessible with the keyboard viewable. I added a code sample to the question -- would you please give it a look and tell me if you have any idea? Thank you! – Kaitlyn Hanrahan Mar 10 '17 at 14:36
  • I tried wrapping the outer RelativeLayout in another ScrollView, but then the Continue Button was no longer at the bottom of the screen, it was at the bottom of the content. – Kaitlyn Hanrahan Mar 10 '17 at 14:36
  • Haha...yes thanks for the bounty, i have just added a answer by little modification in your layout which will fix your problem...for future support if you need instant support just ping me on my whatsapp number :- +91-8585949830 – Varun Jain Mar 10 '17 at 16:50
  • Can you elaborate your answer a bit more.... adjustResize doesn't seem to do anything for me unless I also use "fitSystemWindows". Thanks :) – FRR Feb 2 at 5:21

I have found a solution that seems to work well with the OS. First set fitSystemWindows = true to the view you want to be reacting to the window and then tell it to ignore the top padding:

  ViewCompat.setOnApplyWindowInsetsListener(yourView, (view, insets) ->
      ViewCompat.onApplyWindowInsets(yourView,
          insets.replaceSystemWindowInsets(insets.getSystemWindowInsetLeft(), 0,
              insets.getSystemWindowInsetRight(), insets.getSystemWindowInsetBottom()))
  );

Read more here: https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec

  • Excellent answer. – Bolling Jul 26 at 9:11
up vote 0 down vote accepted

(Answering my own question)

This does seem to be a bug in android: https://code.google.com/p/android/issues/detail?id=63777

Posts on the above bug report link to a few suggested work arounds, like creating a custom Layout class or custom Soft Keyboard.

I feel like I've already wasted enough time with this. So my solution is to just manually color the Status Bar.

Solution:

  1. Set android:fitsSystemWindows="true" in either the Layout's root view or globally in style.xml. This (along with adjustResize in the manifest) makes the UI shrink above the Soft Keyboard so no UI is blocked -- the most important thing.

  2. Color the Status Bar. This is only possible in Lollypop and newer. Which is the same as the transparent StatusBar, anyway.

    private void updateStatusBarColor(){
        // Check Version
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // OPTIONAL: Calculate a darker version of the toolbar color
            int color = calculateDarkerColor(toolBarColor);
    
            // Get the statusBar
            Window window = getWindow();
            // You can't color a transparent statusbar
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            // Set the color
            window.setStatusBarColor(color);
        }
    }
    
    // Calculate a darker version of a given color
    // Note I do this because the color always changes, if it's always the same I would save the darker version as a Resource in colors.xml
    private int calculateDarkerColor(int color){
        float[] hsv = new float[3];
        Color.colorToHSV(color, hsv);
        hsv[2] *= 0.8f; // smaller = darker
        return Color.HSVToColor(hsv);
    }
    
  • 1
    However this only works if the status bar is a solid color, not if you want to have content actually behind the status bar :( – htafoya Jan 15 at 7:00

I have fix your issue, and also tested at my end. Please change your relative layout to framelayout like this:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- CoordinatorLayout because this view uses SnackBars -->

    <!-- Relative Layout to lock "continue" button bar to bottom -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <!-- Main content, that scrolls with or without keyboard -->
        <!-- Correctly sits behind transparent Status Bar -->
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="24dp">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!-- ACTUAL VIEWS DELETED FOR BREVITY / CLARITY -->
            </RelativeLayout>
        </android.support.v4.widget.NestedScrollView>


        <!-- Bottom nav bar -->
        <!-- Correctly sits at bottom of UI when keyboard is not visible -->
        <!-- PROBLEM: Not accessible when soft keyboard is visible -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            style="?android:attr/buttonBarStyle"
            android:layout_gravity="bottom">

            <Button
                android:id="@+id/skip_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                style="?android:attr/buttonBarButtonStyle"/>

            <Button
                android:id="@+id/button_progress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                style="?android:attr/buttonBarButtonStyle"/>
        </LinearLayout>

    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>
  • This does not seem to make any difference. What version of Android did this give you both (1) a bottom button bar that is visible above soft keyboard and (2) a transparent statusbar? – Kaitlyn Hanrahan Mar 10 '17 at 17:28
  • but i have test in marshmallow in samsung edge s6..using above code and on opening softkeyboard bottom layout come up with keyboard and on hide the keyboard bottom layout goes down... – Varun Jain Mar 10 '17 at 17:34

Its working for me.

In manifest.xml, put this in <activity> tag.

android:windowSoftInputMode="adjustResize"

In your layout's parent tag, put this.

android:fitsSystemWindows="true"
android:clipToPadding="false"

In styles.xml, put this.

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

I have done this with minSdkVersion 16 and targetSdkVersion 26

If you still need some decision - I've found one that works for me.

Look at my XML, I'll explain some things below:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"                     //IMPORTANT
    android:background="@android:color/white">

    <RelativeLayout
        android:id="@+id/rl_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent">            //NO FITSYSTEMWINDOWS=TRUE

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/cl_root"
            android:layout_width="match_parent"
            android:layout_height="match_parent">            //NO FITSYSTEMWINDOWS=TRUE

            <android.support.design.widget.AppBarLayout
                android:id="@+id/ab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:fitsSystemWindows="true">                     //IMPORTANT

                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="190dp"
                    android:fitsSystemWindows="true"                     //IMPORTANT
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:expandedTitleTextAppearance="@style/TransparentTextStyle"
                    app:collapsedTitleTextAppearance="@style/TransparentTextStyle"
                    app:contentScrim="@android:color/white"
                    app:expandedTitleMarginEnd="64dp"
                    app:expandedTitleMarginStart="48dp">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:fitsSystemWindows="true">                     //IMPORTANT

                        <ImageView
                            android:id="@+id/iv_pic"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"/>

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@drawable/gradient_top_and_bottom_shadow"/>
                    </FrameLayout>

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:elevation="7dp"
                        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                        app:layout_collapseMode="pin"
                        app:layout_scrollFlags="scroll|enterAlways">

                        <TextView
                            android:id="@+id/tv_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:fontFamily="@font/raleway_bold"
                            android:textSize="20sp"
                            android:lines="1"
                            android:ellipsize="end"
                            android:visibility="gone"
                            tools:text="Toolbar Text"/>

                    </android.support.v7.widget.Toolbar>
                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>

            <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/sr_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="-6dp"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/rv_event_details"
                    android:clipToPadding="false"
                    android:scrollbars="vertical"
                    android:scrollbarThumbVertical="@color/orange_juice_80"
                    android:scrollbarSize="2dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scrollbarStyle="outsideOverlay"
                    android:background="@drawable/shape_rounded_top_white" />
            </android.support.v4.widget.SwipeRefreshLayout>
        </android.support.design.widget.CoordinatorLayout>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

I'm using CL with CollapsingToolbarLayout, but it doesn't matter. If you want to make it work follow thesesteps:

  1. Put CoordinatorLayout as a ROOT PARENT in your XML and set fitsSystemWindows="true" to it;

  2. Put RelativeLayout (or whatever you want) into your parent CoordinatorLayout, but DONT SET fitsSystemWindows="true";

  3. Set NEGATIVE top margin to you RelativeLayout by getting your statusbar height programmatically and set statusbar color as Color.TRANSPARENT, here's my code:

    public void adjustActivityForTransparentStatusBar(boolean adjust) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { if (adjust) { if (findViewById(R.id.rl_root) != null) { CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, CoordinatorLayout.LayoutParams.MATCH_PARENT); params.setMargins(0, -Utils.getStatusBarHeight(), 0, 0); findViewById(R.id.rl_root).setLayoutParams(params); } getWindow().setStatusBarColor(Color.TRANSPARENT); } else { if (findViewById(R.id.rl_root) != null) { CoordinatorLayout.LayoutParams params = new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, CoordinatorLayout.LayoutParams.MATCH_PARENT); params.setMargins(0, 0, 0, 0); findViewById(R.id.rl_root).setLayoutParams(params); } } } }

  4. Set fitsSystemWindows="true" to some child views if they should be "beneath" your statusbar. And now it should be working.

PS: don't know why I can't make my Java code look like code here.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.