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>

Adamik

Answer 1

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.

Heteronym

Awesome! Thank a lot for this answer, Have you opened a bug at Google? – Edmee

@Edmee nah I am so lazy XD – Adamik

Answer 2

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.

Chrissa

Try removing "gravity" and "layout_gravity" from the outer LinearLayout. – Chrissa

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 – Adamik

Found my answer here: #9916817 .Anyway thanks for response. – Adamik

Post yourself an answer with the solution you found, it will help future readers. – Chrissa

Aye Aye sir, I'll do it – Adamik

Answer 3

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>

Sachs

Answer 4

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"
.../>

Grammarian

Answer 5

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>

Lamontlamontagne

Answer 6

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>

Cambrian

Answer 7

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

android:layout_marginTop="?attr/actionBarSize"

Wholehearted