Scroll view hides the first child in the layout

Question

I have certain widgets in LinearLayout which is a child of ScrollView. The problem is that the first widget in this case, the widget named "Title 1" is not visible it goes beyond the screen size as seen in this image,

I have tried the following but still it does not show my Title 1.

Added an attribute android:fillViewport="true" in ScrollView but it did not work.
Added a layout_gravity(center_horizontal | center_vertical) attribute but it didn't work.
This question was specific to the OP's design Android ScrollView fillViewport not working and did not help much.

Note: I want the widget visible by not using any margin/padding attributes.

The code,

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/view_pager"
            android:fillViewport="true"
            android:focusableInTouchMode="true"           
            app:layout_constraintBottom_toTopOf="@+id/tabLayout"
           >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:paddingTop="10dp"
                    >
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"                     
                        android:text="Title 1"
                        />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 2"
                        />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 3"
                        />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 4"
                        />
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 5"
                        /> 

                        <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 6"
                    /> 

                    <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 7"
                    />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 8"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 9"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 10"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 11"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 12"
                        />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="20sp"
                        android:gravity="center"
                        android:background="@color/green"
                        android:layout_marginTop="20dp"
                        android:text="Title 13"
                        />
                </LinearLayout>
        </ScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            style="@style/tabLayoutStyle"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    </android.support.constraint.ConstraintLayout>
</LinearLayout>

EDIT 1

Changed height of LinearLayout(Inside scrollview) from match_parent to wrap_content but still didn't work.

Change height of _LInearLayout(Inside scrollview)_ from `match_parent` to `wrap_content` — Piyush, Dec 04 '18 at 09:59
Can you change the theme with Theme.AppCompat.Light.NoActionBar — Prince Dholakiya, Dec 04 '18 at 10:07
First, try removing ConstraintLayout enclosing ScrollView, if this doesn't make any sense then just tell me what are these child view? are they independent view or is it a list? — rajat singh, Dec 04 '18 at 10:08
@rajatsingh They are independent widgets didn't see the code ? I want them in a scroll view only else how will scrolling happen ? — oldcode, Dec 04 '18 at 10:11
I got your error. just Add android:layout_marginTop="10dp" insted of android:paddingTop="10dp". — Prince Dholakiya, Dec 04 '18 at 10:12
First, make the `height` of parent LinearLayout `match_parent` after that remove 'ConstraintLayout' and after that make scrollView height `match_parent` — rajat singh, Dec 04 '18 at 10:14
@rajatsingh I need constraint layout man so that I can show the content above the toolbar — oldcode, Dec 04 '18 at 10:16
@rajatsingh Nope if I use that then my `ScrollView` will go behind the `TabLayout` making the bottom of the widgets in the `ScrollView` invisible. — oldcode, Dec 04 '18 at 10:22
edited my comment **I use that then my ScrollView will go behind the TabLayout making the bottom of the widgets in the ScrollView invisible.** to rectify this see for scroll behaviors here https://android.jlelse.eu/scrolling-behavior-for-appbars-in-android-41aff9c5c468 — rajat singh, Dec 04 '18 at 10:28

score 2 · Answer 1 · answered Dec 04 '18 at 11:04

The result is add to post.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/view_pager"
            android:fillViewport="true"
            android:focusableInTouchMode="true"
            app:layout_constraintBottom_toTopOf="@+id/tabLayout"
            app:layout_constraintTop_toTopOf="parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="10dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:text="Title 1"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 2"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 3"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 4"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 5"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 6"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 7"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 8"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 9"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 10"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 11"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 12"/>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:background="@color/green"
                    android:layout_marginTop="20dp"
                    android:text="Title 13"/>
            </LinearLayout>
        </ScrollView>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_height="50dp"
            android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="match_parent"/>
    </android.support.constraint.ConstraintLayout>
</LinearLayout>

score 1 · Answer 2 · answered Dec 04 '18 at 10:18

1

Remove the TabLayout, then the first TextView will appear. The problem is that you use the TabLayout wrong

answered Dec 04 '18 at 10:18

darksider

11
2

1

This should be a comment and not an answer.`Remove the TabLayout, then the first TextView will appear` no this will not work since the tablayout is at the bottom – oldcode Dec 04 '18 at 10:23

score 1 · Accepted Answer · answered Dec 05 '18 at 07:22

In addition to Mohammad Asheri's answer, I added the following attribute and it worked flawlessly,

From Mohammad Asheri's answer I added this attribute,app:layout_constraintTop_toTopOf="parent" which aligns the ScrollView to the top and prevents the child View's from going above the device height but then another problem occurred, the View's at the bottom were hidden by the tabLayout So I added this attribute to correct this, changed the layout_height to wrap_content and added this, app:layout_constrainedHeight=”true" this attribute does not exceed the resulting dimension which is tabLayout in this case. This is from the constraint layout version 1.1 onwards refer this ConstraintLayout 1.1.0 different from 1.0.2, is it a bug?

Also the docs describe it perfectly

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/view_pager"
            android:fillViewport="true"
            android:focusableInTouchMode="true"
            app:layout_constrainedHeight=”true"
            app:layout_constraintBottom_toTopOf="@+id/tabLayout"
            app:layout_constraintTop_toTopOf="parent">

score 0 · Answer 4 · answered Dec 04 '18 at 10:18

Your TabLayout maybe the reason the first value is not visible. The first item on your list is probably under the TabLayout and not visible.

There is no need for the ConstrainLayout. Make orientation of your LinearLayout vertical. You can use this sample

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    style="@style/tabLayoutStyle"
    />

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/view_pager"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="10dp"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:text="Title 1"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 2"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 3"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 4"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 5"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 6"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 7"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 8"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 9"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 10"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 11"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 12"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:background="@color/green"
            android:layout_marginTop="20dp"
            android:text="Title 13"
            />
    </LinearLayout>
</ScrollView>

`The first item on your list is probably under the TabLayout and not visible.` totally wrong how come did you even look at my code ? — oldcode, Dec 04 '18 at 10:22
`There is no need for the ConstrainLayout. Make orientation of your LinearLayout vertical. You can use this sample` How come man I need the tab layout at the bottom you have placed it top as per your wish. The tab needs to be at bottom and the widgets should be hidden by the tab layout at the bottom. — oldcode, Dec 04 '18 at 10:27
@GeekDroid if you want the TabLayout at the bottom, place it after the ScrollView — Anga, Dec 04 '18 at 10:30
That would hide the TextView's 11,12,13(If you could understand) — oldcode, Dec 04 '18 at 10:31
@GeekDroid just try it, it is not suppose to. And it is not standard practice to place TabLayout at the bottom of the screen — Anga, Dec 04 '18 at 10:40

Scroll view hides the first child in the layout

4 Answers4