Reputation: 793

ScrollView with Constraint layout

I have inserted a Scroll View with a inserted Constrainted Layout. However, I do not exactly know, how this scroll view is supposed to work. For testing I wanted to insert an element that is initially not visible but becomes visible when scrolling. I made the scroll view bigger than the screen and inserted it at a position in the scroll view that is initially not visible (see screenshot below).

android studio with emulator

However when I run the app in the emulator, this button is immediately visible at a position where I did not put it to (see screenshot below).

android emulator

What can I do in order to get the desired behaviour?

Here is the whole XML code:

  <?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"
    tools:ignore="ExtraText">




    '<!--Learning: The following lines define a toolbar -->'

    <Button
        android:id="@+id/fragment_left_menu_login6"
        android:layout_width="193dp"
        android:layout_height="182dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="112dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="@mipmap/ic_launcher_round"
        android:gravity="bottom|center"
        android:text="Test This text is too"
        android:textSize="18sp"
        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.761" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="match_parent"
        android:layout_height="53dp"
        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" />


    <Button
        android:id="@+id/Bestellen_Button"
        android:layout_width="255dp"
        android:layout_height="96dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/Bestellen_Button"
        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="1.0" />

    <Button
        android:id="@+id/Statistik_Button"
        android:layout_width="256dp"
        android:layout_height="95dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/transparent"
        android:text="@string/Statistik_Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.057"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="465dp" />

    <TextView
        android:id="@+id/textView_ToolBar_MainActivity"
        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:fontFamily="@font/roboto_bold"
        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="TestText" />

    <android.support.v4.widget.NestedScrollView
        android:layout_width="323dp"
        android:layout_height="536dp"
        android:layout_marginTop="132dp"
        android:fillViewport="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.67"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar_mainActivity"
        app:layout_constraintVertical_bias="0.0">

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

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.216"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="72dp"
                android:layout_height="59dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.09"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.123"
                app:srcCompat="@color/colorAccent" />
        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.constraint.ConstraintLayout>

I'd appreciate every kind of input. Thank you in advance for that.

Upvotes: 0

Answers (3)

rachna

Reputation: 124

if you are looking for this kind of screen

Upvotes: 0

rachna

Reputation: 124

view on whole screen or half?If you want to scroll full screen then you need to put the scroll view out the parent layout then it will start to work

  <ScrollView android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >
<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"
    tools:ignore="ExtraText">




    '<!--Learning: The following lines define a toolbar -->'

    <Button
        android:id="@+id/fragment_left_menu_login6"
        android:layout_width="193dp"
        android:layout_height="182dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="112dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="@mipmap/ic_launcher_round"
        android:gravity="bottom|center"
        android:text="Test This text is too"
        android:textSize="18sp"
        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.761" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_mainActivity"
        android:layout_width="match_parent"
        android:layout_height="53dp"
        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" />


    <Button
        android:id="@+id/Bestellen_Button"
        android:layout_width="255dp"
        android:layout_height="96dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:text="BEST"
        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="1.0" />

    <Button
        android:id="@+id/Statistik_Button"
        android:layout_width="256dp"
        android:layout_height="95dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/transparent"
        android:text="Statistik"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.057"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="465dp" />

    <TextView
        android:id="@+id/textView_ToolBar_MainActivity"
        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="TestText" />



        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="700dp"
            tools:ignore="MissingConstraints">

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.216"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="72dp"
                android:layout_height="59dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.09"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.123"
                app:srcCompat="@color/colorAccent" />


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                tools:ignore="MissingConstraints" />
        </android.support.constraint.ConstraintLayout>



</android.support.constraint.ConstraintLayout>
</ScrollView>

Upvotes: 3

RadoVidjen

Reputation: 442

It seems like your ScrollView is not constrained properly to its parent. Check that out.

Upvotes: 0

ScrollView with Constraint layout

Answers (3)

Related Questions