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>

Hi Md. Asaduzzaman, I just want to have a toolbar at the bottom of the layout and within the toolbar there should be two ImageButtoms. The ImageButtons are not so important in a first step. The main focus of my question is to have a toolbar at the bottom of the layout. It should always be at the bottom of the layout, even if you scroll down in the scroll view — VanessaF, Jan 06 '20 at 16:32
Hi Md. Asaduzzaman, my toolbar should look similar to the one posted here: https://stackoverflow.com/questions/30063426/best-way-to-create-a-bottom-toolbar-in-android/30063604. But it should be contained in a ScrollView that containts a ConstrainedLayout (see the code I posted) — VanessaF, Jan 11 '20 at 11:21
Any suggestions Md. Asaduzzaman? I would be very thankful for some further comments and I would appreicate it. — VanessaF, Jan 16 '20 at 21:05
@Md.Asaduzzaman: I just added a screenshot of the desired layout. It is also important that the two toolbars should be fixed. So whenever I scroll down, the toolbars should be visible all the time. — VanessaF, Jan 19 '20 at 08:58
@Md.Asaduzzaman: Have you seen the desired layout? You asked for it some weeks ago and I posted it but you have not replied ever since. I'd really appreciate every comment and it will be quite helpful for me — VanessaF, Jan 25 '20 at 09:14

Cheticamp · Answer 1 · 2020-01-26T14:34:12.263

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:

Thanks Cheticamp for your answer. Unfortnately it does not work with my example. To be totally honest, I do not really know what to do with your code. If you have a look at my previous code, the ScrollView is on the top of the hiearchy and afterwards the Constrained Layouts comes. If I now put - as you said - the Scroll View and the toolbar (your code) within this outer constrained Layout (from my previous code), nothing but a grey background with an error message is displayed. If I just use the ScrollView and the TextView from your code, things look also quite wrong. — VanessaF, Jan 08 '20 at 20:55
@VanessaF That may be because I am using the AndroidX library and you are back on the support library. Change all `androidx.constraintlayout.widget.ConstraintLayout ` to `android.support.constraint.ConstraintLayout` and it should work. — Cheticamp, Jan 08 '20 at 22:55
Thanks for your comment Cheticamp. Unfortunately it does not work. There is no toolbar at the bottom. As said before, I am not sure where exactly and how to insert the code you wrote. Could you edit your code such that it incoorporates my code too. Or otherwise descripte what I have to to do exactly. I forgot to mention, that I am an absolute beginner with Android. — VanessaF, Jan 09 '20 at 20:13
Can nobody help? I just want to have an additional toolbar at the bottom of the ScolView with the code I posted in the original post of this question. I would really appreciate it. — VanessaF, Jan 11 '20 at 11:16
The suggestion of Cheticamp does not work in my example. Does anyone else have an idea what I have to do? I will be quite thankful, if someone can help me, because I already spent some time on trying without any success — VanessaF, Jan 16 '20 at 21:04
@VanessaF When you post a comment on this answer, I think that I am the only one who is notified of it and I haven't been much help. ;-( I think that, if you update your question, it will pop up to the top of viewing queues. If you can post an [MCVE](https://stackoverflow.com/help/minimal-reproducible-example) on GitHub you might get someone to take another look. — Cheticamp, Jan 16 '20 at 21:59
How can I have a hiearchy as Cheticamp pointed out in this answer. I tried it but it did not work — VanessaF, Jan 23 '20 at 20:20
I updated the question, however nobody has answered. This is why I would like to ask you again about your suggested solution. You mentioned, that I should use a hierachy level like this: First level: ConstraintLayout; Second Level: ScrollView, Toolbar. So the outside Layout should be a constrained Layout but which Layout shall I inside the Scroll View? Just a Linear Layout? — VanessaF, Jan 26 '20 at 11:47

score 1 · Accepted Answer · answered Jan 27 '20 at 18:36

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>

Thanks a lot Mohammed Alaa for your answer and the code. It basically looks good. However there is still a problem with the toolbar at the top. There is another text on the left side of the toolbar that I do not know where it comes from with the string "App Name". But I can't find this string in your posted code and it is also not displayed in the layout editor. — VanessaF, Feb 02 '20 at 14:32
this is the title try this in your activity onCreate() `getSupportActionBar().setDisplayShowTitleEnabled(false);` — Mohammed Alaa, Feb 02 '20 at 18:14
Thanks Mohammed Alaa for your comment. Unfortnuately I get an error message when I insert your suggested code in the onCreate method: ' java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.td.barapp/com.example.td.barapp.Selection_Activity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.support.v7.app.ActionBar.setDisplayShowTitleEnabled(boolean)' on a null object reference' — VanessaF, Feb 04 '20 at 19:36
post your code for `AndroidManifest.xml` ,`style.xml` and `MainActivity.java` so we can know what the case of the problem — Mohammed Alaa, Feb 05 '20 at 04:41
Now it seems to work. Thank you very much for your help Mohammed Alaa. Still I have to admit, that I do not really understand what you did. How did you correctly infer the attributes of the ImageButtons for app:layout_constraintEnd_toStartOf, app:layout_constraintStart_toStartOf, app:layout_constraintTop_toBottomOf and layout_constraintVertical_chainStyle. This is because of the ScrollView, right? If you do not have a ScrollView you can just always use "parent" for these attributes, but your allignment looks quite tricky for me. — VanessaF, Feb 08 '20 at 17:34
How did you infer the contraint attributes for the individual ImageButtons? — VanessaF, Feb 10 '20 at 20:46
@Vanessaf check [this](https://pastebin.com/Abr9Umkm) explanation — Mohammed Alaa, Feb 11 '20 at 14:57
Thanks Mohammed Alaa for the link. Unfortunately the constraints are not explained in detail in the example which makes it difficult for me to understand it. Especially I would not know how to generalize this. Here are some questions I have:1) What is the difference between constraintStart and constraintTop; 2) Why do some buttoms have layout_constraintVertical_chainStyle="packed" and others not; 3) Why do some buttoms have constraintStart="parent" 4) What does it's start after the end of "imageButton3" mean — VanessaF, Feb 14 '20 at 21:48
Altough I can now use the code by Mohammed Alaa (thanks a lot for your effort) I still have cruical problems undestanding the ConstrainedView if it is used in combination with a ScrollView and I have not found a good tutorial covering this. Do you have any suggestions or would you maybe advise me not to use ConstrainedLayout within ScrollViews — VanessaF, Feb 14 '20 at 21:51
I'm sorry to here that this explanation didn't help you , what I can help you with is to guide you to read a lot about contraintlayout and how it's work you can check this links [link1](https://constraintlayout.com/basics/), [link2](https://www.youtube.com/watch?v=4N4bCdyGcUc&list=PLrnPJCHvNZuA80lNWNCLICR3qYzhw3iPI) , also I think this [reddit](https://www.reddit.com/r/androiddev/) is better in discussing this kind of things — Mohammed Alaa, Feb 14 '20 at 22:13
Thanks Mohammed Alaa for your answer and help. I think that I have already read through the links and watched the tutorials but as far as I remember they do not cover how to combine a ScrollView with ConstrainedLayout. If you use a ConstraineyLayout without scrolling it is pretty simple as you can just use the parents to align. However things get tremendously complicated for me when trying to combine them. I don't understand why this is so different from the "plain" ConstraineLayout — VanessaF, Feb 14 '20 at 22:32
Thanks for the links. I had a look at them again and unfortunately they do not cover how to combine a ScrollView with a ConstrainedLayout — VanessaF, Feb 15 '20 at 18:00
How did you learn about how to combine the Scroll View and a Constrained Layout? For me it is really weird. All the tutorials about Constrained Layout that I have found so far (at least 20) do not cover this, although scrolling apps are very common. — VanessaF, Feb 17 '20 at 19:45
Does anyone know a good tutorial that in fact covers how to combine a ScrollView with a ConstrainedLayout — VanessaF, Feb 19 '20 at 20:59
Hi @Vanessaf I suggest to you to read how to use constraint-layout alone and then how to use ScrollView and I'm sure you will achieve what you want by using both , also this will help you to achieve any this you want to do with other things in android by learning how things work alone and then how to combine any thing with another, and in my opinion this is an important skill any programmer need to master it, and excuse me I will not replay again becasue I don't have any thing to add here , and for conversations ,there are stackoverflow chats and a lot of other sites — Mohammed Alaa, Feb 19 '20 at 22:45

Additional toolbar at the bottom with Scroll View

2 Answers2