0

I had to introduce a ScrollView in my Dialog layout to display all the layout when the phone is in landscape mode or the app is running on small screens. However, the bottom of the layout is being cut off.

I've tried different things like setting ScrollView's layout_height = "0dp", adding more constraints, replacing the ScrollView with a NestedScrollView and other small things as clipToPadding = false or fillViewPort = true but none of these have worked.

This is my layout currently used in a Dialog I need:

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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"> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/icon_image_container" android:layout_width="match_parent" android:layout_height="80dp" android:background="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <ImageView android:id="@+id/icon_image" android:layout_width="50dp" android:layout_height="50dp" android:background="@drawable/ic_help_outline_white_24dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:ignore="ContentDescription" /> </androidx.constraintlayout.widget.ConstraintLayout> <ScrollView android:id="@+id/message_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/icon_image_container"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp"> <TextView android:id="@+id/help_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:textAlignment="center" android:textAppearance="@style/TextAppearance.AppCompat.Headline" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/help_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/internal_margin_views" android:textAlignment="textStart" android:textAppearance="@style/TextAppearance.AppCompat.Medium" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/help_title" /> <TextView android:id="@+id/help_example_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/internal_margin_views" android:text="@string/help_dialog_example_title" android:textAlignment="center" android:textAppearance="@style/TextAppearance.AppCompat.Headline" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/help_message" /> <TextView android:id="@+id/help_example_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/internal_margin_views" android:textAlignment="textStart" android:textAppearance="@style/TextAppearance.AppCompat.Medium" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/help_example_title" /> <Button android:id="@+id/help_button_ok" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginTop="@dimen/internal_margin_views" android:background="@drawable/button_background" android:text="@string/help_dialog_button_ok" android:textAlignment="center" android:textColor="@color/colorPrimary" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/help_example_message" /> </androidx.constraintlayout.widget.ConstraintLayout> </ScrollView> </androidx.constraintlayout.widget.ConstraintLayout>

And this is how it's being displayed with the above xml layout. The image is showing the scrollview scrolled to the bottom as far as possible.

current layout

I have been stuck on this a lot. Any help would be much appreciated

3
  • 1
    You should consider using linearlayout for this vertical layout! Commented Aug 19, 2019 at 12:16
  • Can you share text content So i can try your issue. Commented Aug 19, 2019 at 12:24
  • Oh it was so simple! Thank you @SumitShukla Commented Aug 19, 2019 at 12:24

3 Answers 3

1

Change scrollview height to 0dp and constraint it to the bottom of parent it should solve your issue

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/icon_image_container"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/colorPrimary"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/icon_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ic_help_outline_white_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

</androidx.constraintlayout.widget.ConstraintLayout>

<ScrollView
    android:id="@+id/message_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:scrollbars="none"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@id/icon_image_container">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:id="@+id/help_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/help_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/internal_margin_views"
            android:textAlignment="textStart"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/help_title" />

        <TextView
            android:id="@+id/help_example_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/internal_margin_views"
            android:text="@string/help_dialog_example_title"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/help_message" />

        <TextView
            android:id="@+id/help_example_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/internal_margin_views"
            android:textAlignment="textStart"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/help_example_title" />

        <Button
            android:id="@+id/help_button_ok"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/internal_margin_views"
            android:background="@drawable/button_background"
            android:text="@string/help_dialog_button_ok"
            android:textAlignment="center"
            android:textColor="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/help_example_message" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Sign up to request clarification or add additional context in comments.

1 Comment

I've tried this before but didn't solve my issue. I have posted the solution now. Thanks anyway
1

I post the answer in case anybody encounter the same issue. I just replaced the root layout from ConstraintLayout to LinearLayout with orientation = "vertical" and the same thing for the layout inside the ScrollView.

Comments

0
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/icon_image_container"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/icon_image"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/ic_help_outline_white_24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="ContentDescription" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <ScrollView
        android:id="@+id/message_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/icon_image_container">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

            <TextView
                android:id="@+id/help_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

            <TextView
                android:id="@+id/help_message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/internal_margin_views"
                android:textAlignment="textStart"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

            <TextView
                android:id="@+id/help_example_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/internal_margin_views"
                android:text="@string/help_dialog_example_title"
                android:textAlignment="center"
                android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

            <TextView
                android:id="@+id/help_example_message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/internal_margin_views"
                android:textAlignment="textStart"
                android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

            <Button
                android:id="@+id/help_button_ok"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/internal_margin_views"
                android:background="@drawable/button_background"
                android:text="@string/help_dialog_button_ok"
                android:textAlignment="center"
                android:textColor="@color/colorPrimary" />

        </LinearLayout>

    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

1 Comment

@Automatik try this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.