ScrollView Overlaps Toolbar

Question

I'm trying to use ScrollView and Toolbar as the only childs of LinearLayout but they overlap each other. Searched a bit but didn't find anything useful, any idea how to solve this rather than giving padding/margin to ScrollView?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:float="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="right"
android:background="@color/white_dark_50">

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:theme="@style/AppTheme"
    android:scrollbarStyle="outsideOverlay"
    android:gravity="center_vertical|right"
    android:layout_alignParentTop="true"
    android:background="@color/colorPrimary"
    >
    <!-- -->



</android.support.v7.widget.Toolbar>



<ScrollView
    android:scrollbarStyle="outsideOverlay"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:background="@color/white_dark_50" >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="right"
        android:background="@color/white_dark_50">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ایجاد جمله جدید"
            android:id="@+id/new_sentence_title"
            android:textColor="@color/midnight_blue"
            android:layout_margin="10dp"
            android:textStyle="bold"
            android:gravity="center_vertical"
            android:drawableRight="@drawable/ic_colored_doll"
            android:textAppearance="?android:attr/textAppearanceLarge"
            />

        <View
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_marginLeft="25dp"
            android:layerType="software"
            android:layout_marginRight="25dp"
            android:background="@drawable/dashed_line" />

        <com.wrapp.floatlabelededittext.FloatLabeledEditTextRightSided
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            float:fletPaddingLeft="10dp"
            float:fletPaddingRight="10dp"
            android:id="@+id/new_sentence_name"
            float:fletPadding="10dp">

            <EditText
                android:layout_marginLeft="10dp"
                android:id="@+id/new_sentence_name_et"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme"
                android:backgroundTint="@color/accentColor"
                android:singleLine="true"
                android:textColor="@color/midnight_blue"
                android:textColorHint="@color/hintColor"
                android:maxLength="20"
                android:drawableRight="@drawable/ic_name"
                android:gravity="center_vertical|right"
                android:hint="عنوان"/>
        </com.wrapp.floatlabelededittext.FloatLabeledEditTextRightSided>


        <com.wrapp.floatlabelededittext.FloatLabeledEditTextRightSided
            android:layout_width="match_parent"
            android:foregroundGravity="center_vertical|right"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            float:fletPaddingLeft="10dp"
            float:fletPaddingRight="10dp"
            android:id="@+id/new_sentence_period"
            float:fletPadding="10dp">

            <EditText
                android:id="@+id/new_sentence_period_et"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme"
                android:backgroundTint="@color/accentColor"
                android:singleLine="true"
                android:layout_marginLeft="10dp"
                android:inputType="number"
                android:textColor="@color/midnight_blue"
                android:textColorHint="@color/hintColor"
                android:maxLength="20"
                android:drawableRight="@drawable/ic_name"
                android:gravity="center_vertical|right"
                android:hint="دوره تکرار"/>
        </com.wrapp.floatlabelededittext.FloatLabeledEditTextRightSided>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginRight="5dp"
            android:gravity="center_vertical|right">


            <Spinner
                android:id="@+id/repeat_kind"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/AppTheme"
                android:minHeight="25dp"
                android:gravity="right"
                android:layout_marginRight="5dp"
                android:layout_marginLeft="10dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="نوع تکرار"
                android:id="@+id/doll_type_tv"
                android:textColor="@color/midnight_blue"
                android:layout_margin="10dp"
                android:gravity="center_vertical"
                android:drawableRight="@drawable/ic_doll"
                android:textAppearance="?android:attr/textAppearanceMedium" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginRight="5dp"
            android:gravity="center_vertical|right">


            <com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/date_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/blue"
                android:text="Button"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="تاریخ تکرار"
                android:textColor="@color/midnight_blue"
                android:layout_margin="10dp"
                android:gravity="center_vertical"
                android:drawableRight="@drawable/ic_doll"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginRight="5dp"
            android:gravity="center_vertical|right">


            <com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/time_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/blue"
                android:text="Button"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="زمان تکرار"
                android:textColor="@color/midnight_blue"
                android:layout_margin="10dp"
                android:gravity="center_vertical"
                android:drawableRight="@drawable/ic_doll"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>






        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="5dp"
            android:gravity="center_vertical|right">


            <ImageView
                android:id="@+id/doll_pic_IV"
                android:layout_width="150dp"
                android:layout_height="150dp"
                style="@style/AppTheme"
                android:minHeight="25dp"
                android:scaleType="fitXY"
                android:gravity="right"
                android:layout_marginRight="5dp"
                android:layout_marginLeft="10dp"
                android:src="@drawable/ic_image_add_to_photos"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="انتخاب صدا"
                android:textColor="@color/midnight_blue"
                android:layout_margin="10dp"
                android:gravity="center_vertical"
                android:id="@+id/pic_tv"
                android:drawableRight="@drawable/ic_image"
                                                                                   android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>

    </LinearLayout>
</ScrollView>

M. Erfan Mowlaei · Accepted Answer · 2015-05-23T20:48:26.283

10

Apparently the problem wasn't overlapping Toolbar with ScrollView, but rather was with ScrollView itself. The problem was arrising from gravity of the only child on ScrollView, so removing gravity from LinearLayout inside ScrollView and the problem was solved. It seems like a bug to me maybe I should contact google and let them know 'bout this.

edited May 23 '15 at 20:48

answered May 22 '15 at 21:50

M. Erfan Mowlaei

1,376
1
14
25

Awesome! Thank a lot for this answer, Have you opened a bug at Google? – Waza_Be Nov 06 '15 at 09:48
3

@Waza_Be nah I am so lazy XD – M. Erfan Mowlaei Nov 07 '15 at 07:15

score 8 · Answer 2 · answered May 22 '15 at 21:16

8

Try:

<LinearLayout>

    <Toolbar 
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /> 

    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

This way the LinearLayout is going to firstly compute the dimension of the toolbar, because it has no layout_weight attributes, and lay it down. Then it assigns all the remaining space to the ScrollView.

answered May 22 '15 at 21:16

natario

24,954
17
88
158

Try removing "gravity" and "layout_gravity" from the outer LinearLayout. – natario May 22 '15 at 21:31
I guess the problem is worse than what I said, the first children inside LinearLayout of ScrollView are going top and out of Scrollview itself thus they are not being shown – M. Erfan Mowlaei May 22 '15 at 21:32
Found my answer here: http://stackoverflow.com/questions/9916317/android-scrollview-hiding-top-content-in-layout .Anyway thanks for response. – M. Erfan Mowlaei May 22 '15 at 21:37
Post yourself an answer with the solution you found, it will help future readers. – natario May 22 '15 at 21:42
Aye Aye sir, I'll do it – M. Erfan Mowlaei May 22 '15 at 21:47

score 4 · Answer 3 · answered Dec 20 '15 at 05:56

i solved this by place toolbar and scroll view in relative layout, then give "android:layout_below="@+id/bar" " in scroll view..

just like this:

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</android.support.design.widget.AppBarLayout>

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/bar"
    android:paddingTop="20dp"
    android:layout_gravity="center">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"/></ScrollView></RelativeLayout>

score 1 · Answer 4 · answered Mar 25 '16 at 03:45

For my problem: I'm rebuilding an activity into appCompatActivity while using a new standalone toolbar that was being overlapped by a scrollview. My solution was to give the toolbar elevation:

<android.support.v7.widget.Toolbar
...
android:elevation="3dp"
.../>

and increase the margin of the top item in my scrollview.

<EditText
...
android:layout_marginTop="80dp"
.../>

score 0 · Answer 5 · answered Oct 15 '15 at 16:09

I solved this by adding this with this code, I hope it will help

<LinearLayout 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"
android:fillViewport="false"
android:orientation="vertical"
android:padding="@dimen/activity_vertical_margin"
tools:context="tz.co.ikunda.MemberProfileActivity">


<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="56dp"
    android:orientation="vertical">

    <TextView
      android:id="@+id/tvMyView"
      android:layout_width="match_parent"
      android:text="You views goes between this scrollview layout"
      android:layout_height="wrap_content" />
</ScrollView>

score 0 · Answer 6 · answered Jul 26 '19 at 16:14

for me, problem solved simply by put my ScrollView in a Frame layout

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
         ......

    </ScrollView>
 </FrameLayout>

score 0 · Answer 7 · edited Feb 23 '23 at 15:58

0

For anyone experiencing similar issue with NestedScrollview, set marginTop of root component to that of actionBarSize, i.e.:

android:layout_marginTop="?attr/actionBarSize"

edited Feb 23 '23 at 15:58

double-beep

5,031
17
33
41

answered Feb 14 '23 at 06:19

namasake

1

ScrollView Overlaps Toolbar

7 Answers7

Linked