Search code examples
androidandroid-scrollview

Scroll view hides the first child in the layout

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,

enter image description here

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

  1. Added an attribute android:fillViewport="true" in ScrollView but it did not work.

  2. Added a layout_gravity(center_horizontal | center_vertical) attribute but it didn't work.

  3. 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.

Solution

  • 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">