Additional toolbar at the bottom with Scroll View

Question

I want to have an additional Toolbar with elements in it (like a back buttom and another bottom to directly go into a certain activity) at the bottom of the layout. The problem is that I use a Scroll View inside a Constraint Layout. How can I insert such a layout file. I tried it by drag and dropping a toolbar in the Scroll View. However, as the Scroll View is bigger than the layout in the layout editor of Android Studio, I did not know where to put it. It is also important that the two toolbars should be fixed. So whenever I scroll down, the toolbars should be visible all the time.

Update: Does nobody have an idea. I am still strugelling with that

Here is the design I want to have (in a first step without any buttoms):

Here you can see the code of the XML layout file:

<ScrollView 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"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <android.support.constraint.ConstraintLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"


        tools:context=".MainActivity"
        tools:ignore="ExtraText">


        '<!--Learning: The following lines define a toolbar -->'

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_mainActivity"
            android:layout_width="410dp"
            android:layout_height="50dp"
            android:background="#435cb53f"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="@android:color/holo_green_light" />


        <TextView
            android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="TestText"
            android:textColor="@android:color/white"
            android:textSize="24sp"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="@+id/toolbar_mainActivity"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.535"
            app:layout_constraintStart_toStartOf="@+id/toolbar_mainActivity"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.421"
            tools:text="Selection" />

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            app:layout_constraintTop_toBottomOf="@+id/toolbar_mainActivity"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="73dp">


            <ImageButton
                android:id="@+id/imageButton"
                android:layout_width="210dp"
                android:layout_height="128dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.026"
                app:srcCompat="@mipmap/test_dish_2" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="210dp"
                android:layout_height="128dp"
                android:background="#00000000"
                android:scaleType="fitCenter"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.014"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.026"

                app:srcCompat="@mipmap/test_dish_1" />



        </android.support.constraint.ConstraintLayout>


    </android.support.constraint.ConstraintLayout>
</ScrollView>

Answer 1

check this ,I hope it helps you

<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_mainActivity"
    android:layout_width="410dp"
    android:layout_height="50dp"
    android:background="#435cb53f"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextColor="@android:color/holo_green_light">

    <TextView
        android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="TestText"
        android:gravity="center"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        tools:text="Selection" />
</android.support.v7.widget.Toolbar>

<ScrollView
app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity"
app:layout_constraintBottom_toTopOf="@id/bottom_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="0dp"
android:layout_height="0dp">
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    tools:ignore="ExtraText">


    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintEnd_toStartOf="@id/imageButton1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo" />


    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/imageButton2"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@id/imageButton4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton2"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toEndOf="@id/imageButton3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton2"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton5"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@id/imageButton6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton3"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton6"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toEndOf="@id/imageButton3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton3"
        app:srcCompat="@drawable/logo" />


    <ImageButton
        android:id="@+id/imageButton7"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@id/imageButton8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton5"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton8"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toEndOf="@id/imageButton7"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton5"
        app:srcCompat="@drawable/logo" />


    <ImageButton
        android:id="@+id/imageButton9"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@id/imageButton10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton7"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton10"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toEndOf="@id/imageButton9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton7"
        app:srcCompat="@drawable/logo" />


    <ImageButton
        android:id="@+id/imageButton11"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@id/imageButton12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton9"
        app:srcCompat="@drawable/logo" />

    <ImageButton
        android:id="@+id/imageButton12"
        android:layout_width="0dp"
        android:layout_height="128dp"
        android:background="#00000000"
        android:scaleType="fitCenter"
        app:layout_constraintStart_toEndOf="@id/imageButton11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton9"
        app:srcCompat="@drawable/logo" />



</android.support.constraint.ConstraintLayout>
</ScrollView>

<LinearLayout
    android:background="#FFD600"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:id="@+id/bottom_layout"
    android:layout_width="0dp"
    android:layout_height="70dp">

    <Button
        android:layout_gravity="center_vertical"
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:text="One"
        android:layout_margin="4dp"
        android:layout_height="wrap_content"/>


    <Button
        android:layout_gravity="center_vertical"
        android:id="@+id/button2"
        android:layout_weight="1"
        android:text="Two"
        android:layout_width="0dp"
        android:layout_margin="4dp"
        android:layout_height="wrap_content"/>


    <Button
        android:layout_gravity="center_vertical"
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:text="Three"
        android:layout_margin="4dp"
        android:layout_height="wrap_content"/>

</LinearLayout>
</android.support.constraint.ConstraintLayout>

Answer 2

Here is how to arrange the views. This is from the Android Studio designer:

The scrollingView is a NestedScrollView.

scrollingView will scroll independently of the toolbars and the toolbars will stay in place (with the proper constraints.) Something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#435cb53f"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:title="Top Toolbar"
        app:titleTextColor="@android:color/black" />

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollingView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottomToolbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity">

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView_ToolBar_CocktailSelectionActivity"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="@string/material"
                android:textColor="@android:color/black"
                android:textSize="24sp" />
        </android.support.v7.widget.LinearLayoutCompat>
    </android.support.v4.widget.NestedScrollView>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/bottomToolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="210dp"
            android:layout_height="128dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:srcCompat="@mipmap/ic_launcher" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="210dp"
            android:layout_height="128dp"
            android:background="#00000000"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:srcCompat="@mipmap/ic_launcher" />

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

This is the result: