Search code examples
androidandroid-layoutfooterandroid-relativelayout

Fold up a Layout but keep another at the bottom


I've got this layout:

enter image description here

Without colors: https://i.sstatic.net/OdSda.png

  • Layout for the tabs (separate xml file)
  • RelativeLayout 1 surrounding everything else
  • A, B, C all have their own LinearLayout in RelativeLayout 2
  • The horizontal line, D (in a LinearLayout) and the "OK" button have their own RelativeLayout 3
  • And there's RelativeLayout 4 (=footer) for E

What I want to happen if I click on the EditText next to D and the keyboard opens up:

  • 4 stays at the bottom and is hidden behind the keyboard
  • If there isn't enough space to fully display 3, 2 is collapsed until the keyboard is closed again

What's actually happening:

  • 2 stays where it is
  • The keyboard covers 3 halfway and I can't see what I'm typing
  • 4 is pushed up and covers D

Two things I've already tried but with both didn't fully work as expected:

I) Add android:windowSoftInputMode="adjustPan" to the manifest:

  • 4 stays at the bottom BUT
  • Everything else is pushed up, so 2, 3 and the tabs which are then covered half way

II) Add android:windowSoftInputMode="adjustResize" to the manifest: Nothing changes unless I also add android:fitsSystemWindows="true" to the tab fragment's xml:

  • Now all the padding of the surrounding RelativeLayout 1 is ignored
  • The EditText next to D is pushed up against 2 but not readable and D and the "OK" button are covered by the keyboard
  • 4 is still pushed up

Solution

  • I managed to find a way! :) A big thanks goes to Umair for giving me the tip with the ScrollView and testing different things too!

    First of all, this is how the overall layout is built now:

    • Surrounding RelativeLayout 1 (nothing special, no android:fitsSystemWindows="true" - the ScrollView seems to disable that anyway!)
      • new ScrollView
        • new RelativeLayout (ScrollView can only contain a single element!)
          • RelativeLayout 2
            • LinearLayout A (TextView + EditText)
            • LinearLayout B (TextView + EditText)
            • LinearLayout C (TextView + EditText)
            • "Save" Button
          • RelativeLayout 3
            • LinearLayout D (TextView + EditText + "OK" Button)
      • RelativeLayout 4 (TextView E)

    Manifest:

    <activity android:name=".MainActivity"
        android:windowSoftInputMode="adjustResize"
    ....
    

    Code for RelativeLayout 4:

    Before:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom">
        <TextView
            android:id="@+id/textE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/E"
            android:textSize="20sp"/>        
    </RelativeLayout>
    

    After:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:layout_below="@id/ScrollViewABCD"
        android:gravity="bottom">
        <TextView
            android:id="@+id/textE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/E"
            android:textSize="20sp"/>
    </RelativeLayout>
    

    I'm not sure if android:layout_gravity="bottom" is actually needed anymore (android:gravity="bottom" is to have the text at the bottom!) but I haven't noticed any changes without it either.

    android:layout_alignParentBottom="true" is the important part here because without it, Relative Layout 4 would be simply below the ScrollView but this little extra makes it use up all the space it can, while still keeping it as far south as possible. Plus, you can still use margins to create some empty space between the ScrollView and RL 4 (even though you're only going to see it in the Preview window in Android Studio).

    What this does:

    • The ScrollView is usable
    • The keyboard is always below the ScrollView
    • If there isn't enough space to display the ScrollView AND the keyboard, the former becomes scrollable
    • RelativeLayout 4 is always hidden behind the keyboard
    • The tabs stay where they are
    • The padding of RelativeLayout 1 doesn't get ignored (like it would with android:fitsSystemWindows="true")