Search code examples
androidandroid-layoutandroid-relativelayout

Android making bottom tool bar not move to top of layout

This is sort of a continuation of , where I wanted to get a warning text at the bottom of my screen (below my bottom tool bar) when off line. When in offline mode looks correct:

When offline mode selected

However when I hide the offline mode it pops to the top of the layout, like such (hiding everything I want to show):

enter image description here

I tried setting the bottom tool bar to android:layout_alignParentBottom="true", that does keep it from popping to the top when I hide the RelativeLayout with the TextView in it (Offline Mode) but then they overlay each other when I do not hide the Offline Mode.

Probably easy for someone a bit more experienced with Android UI than I. The XML layout currently looks like this:

<RelativeLayout
    android:id="@+id/mainLyt"
    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">

    <ScrollView 
        android:id="@+id/formScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/bottomBar" >
        <LinearLayout
            android:id="@+id/formLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="15dp"
            android:paddingRight="10dp"
            android:paddingBottom="15dp"
            android:orientation="vertical" >
        </LinearLayout>

    </ScrollView>

    <RelativeLayout
        android:id="@+id/bottomBar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_above="@+id/bottomOffline" 
        android:background="@color/form_toolbar">

        <ImageButton
            android:id="@+id/btnPrev"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="btnPrevClicked"
            android:layout_alignParentLeft="true"
            android:focusableInTouchMode="false"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/toolbar_prev"
            android:padding ="8dp"
            />

        <ImageButton
            android:id="@+id/btnIndex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btnPrev"
            android:onClick="btnIndexClicked"
            android:focusableInTouchMode="false"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/toolbar_index"
            android:padding ="8dp"
            />

        <ImageButton
            android:id="@+id/btnValidation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/btnIndex"
            android:onClick="btnValidationClicked"
            android:focusableInTouchMode="false"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/toolbar_validate"
            android:padding ="8dp"
            />

        <ImageButton
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:onClick="btnNextClicked"
            android:focusableInTouchMode="false"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/toolbar_next"
            android:padding ="8dp"
            />
    <!-- Some Buttons -->
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/bottomOffline"
        android:layout_width="match_parent"
        android:layout_height="34dp"
        android:layout_alignParentBottom="true"
        android:background="@color/orangelight"
        android:gravity="center_horizontal">

        <TextView
            android:id="@+id/offline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:focusableInTouchMode="false"
            android:text="OFFLINE MODE"
            android:textStyle="bold"
            android:textColor="@color/white"
            android:padding ="8dp"
            />
    </RelativeLayout>

</RelativeLayout>

Thanks!

Solution

  • Try wrapping the bottom views in a LinearLayout and remove the align fields from the two nested views

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">

<RelativeLayout
    android:id="@+id/bottomBar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:background="@color/form_toolbar">

    <ImageButton
        android:id="@+id/btnPrev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="btnPrevClicked"
        android:layout_alignParentLeft="true"
        android:focusableInTouchMode="false"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/toolbar_prev"
        android:padding ="8dp"
        />

    <ImageButton
        android:id="@+id/btnIndex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btnPrev"
        android:onClick="btnIndexClicked"
        android:focusableInTouchMode="false"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/toolbar_index"
        android:padding ="8dp"
        />

    <ImageButton
        android:id="@+id/btnValidation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btnIndex"
        android:onClick="btnValidationClicked"
        android:focusableInTouchMode="false"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/toolbar_validate"
        android:padding ="8dp"
        />

    <ImageButton
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:onClick="btnNextClicked"
        android:focusableInTouchMode="false"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/toolbar_next"
        android:padding ="8dp"
        />
    <!-- Some Buttons -->
</RelativeLayout>

<RelativeLayout
    android:id="@+id/bottomOffline"
    android:layout_width="match_parent"
    android:layout_height="34dp"
    android:background="@color/orangelight"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/offline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusableInTouchMode="false"
        android:text="OFFLINE MODE"
        android:textStyle="bold"
        android:textColor="@color/white"
        android:padding ="8dp"
        />
</RelativeLayout>