How to change my scroll view to scrollable constraint layout or how to use scrollview

Question

How to change my scroll view to scrollable constraint layout or how to use scrollview

25 Views Asked by Laksh M At 22 February 2023 at 05:13

I want to add more options like add product and etc. but i cant because of scroll view not working properly. the following is my design code:

<?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"
tools:context=".home">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/scrollView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view6">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" >

        <View
            android:id="@+id/view8"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginStart="30dp"

            android:layout_marginTop="20dp"
            android:layout_marginEnd="30dp"
            android:background="@drawable/options_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="30dp"
            app:layout_constraintBottom_toBottomOf="@+id/view8"
            app:layout_constraintStart_toStartOf="@+id/view8"
            app:layout_constraintTop_toTopOf="@+id/view8"
            app:srcCompat="@drawable/box" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:fontFamily="@font/abel"
            android:text="Products"
            android:textSize="34sp"
            app:layout_constraintBottom_toBottomOf="@+id/view8"
            app:layout_constraintEnd_toEndOf="@+id/view8"
            app:layout_constraintStart_toEndOf="@+id/imageView4"
            app:layout_constraintTop_toTopOf="@+id/view8" />

        <View
            android:id="@+id/view10"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginStart="30dp"

            android:layout_marginTop="20dp"
            android:layout_marginEnd="30dp"
            android:background="@drawable/options_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view8" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="30dp"
            app:layout_constraintBottom_toBottomOf="@+id/view10"
            app:layout_constraintStart_toStartOf="@+id/view10"
            app:layout_constraintTop_toTopOf="@+id/view10"
            app:srcCompat="@drawable/distribution" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:fontFamily="@font/abel"
            android:text="Distributor"
            android:textSize="34sp"
            app:layout_constraintBottom_toBottomOf="@+id/view10"
            app:layout_constraintEnd_toEndOf="@+id/view10"
            app:layout_constraintStart_toEndOf="@+id/imageView5"
            app:layout_constraintTop_toTopOf="@+id/view10" />

        <View
            android:id="@+id/view11"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginStart="30dp"

            android:layout_marginTop="20dp"
            android:layout_marginEnd="30dp"
            android:background="@drawable/options_bg"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view10" />

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="30dp"
            app:layout_constraintBottom_toBottomOf="@+id/view11"
            app:layout_constraintStart_toStartOf="@+id/view11"
            app:layout_constraintTop_toTopOf="@+id/view11"
            app:layout_constraintVertical_bias="0.38"
            app:srcCompat="@drawable/cargo" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="0dp"
            android:layout_height="38dp"
            android:layout_marginStart="30dp"
            android:fontFamily="@font/abel"
            android:text="Orders"
            android:textSize="34sp"
            app:layout_constraintBottom_toBottomOf="@+id/view11"
            app:layout_constraintEnd_toEndOf="@+id/view11"
            app:layout_constraintStart_toEndOf="@+id/imageView6"
            app:layout_constraintTop_toTopOf="@+id/view11" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="logout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view11" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

<View
    android:id="@+id/view6"
    android:layout_width="0dp"
    android:layout_height="170dp"
    android:background="@drawable/bottom_radius"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/settings"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/settings_ico"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="30dp"
    android:layout_marginTop="20dp"
    android:fontFamily="@font/abel"
    android:text="Hello!"
    android:textSize="40sp"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/usertopname"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="30dp"
    android:layout_marginTop="10dp"
    android:fontFamily="@font/abel"
    android:text="Lakshmanan"
    android:textSize="24sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="31dp"
    android:fontFamily="@font/abel"
    android:text="Youre not verified"
    android:textColor="#FF0000"
    android:textSize="24sp"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="@+id/view6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/usertopname" />

   </androidx.constraintlayout.widget.ConstraintLayout>

sample screenshot here

design image

please update this as scrollable options. thought i can convert scroll view to constraint and it will work and it will be easier to design. but it doesnt work properly

Original Q&A

There are 2 best solutions below

**Ajay Chandran** · Answer 1 · 2023-02-22T06:32:49.587000

Ajay Chandran On 22 February 2023 at 06:32

If you want to add more options like this, try recycler view for better performance. If the options are comparatively less, then wrap the top constraint layout inside a scroll view.

**Kartika Vij** · Answer 2 · 2023-02-22T07:01:50.257000

You can use it like this

<?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"
    tools:context=".home">
    
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/scrollView3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" >

            <View
                android:id="@+id/view8"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginStart="30dp"

                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:background="@drawable/options_bg"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginStart="30dp"
                app:layout_constraintBottom_toBottomOf="@+id/view8"
                app:layout_constraintStart_toStartOf="@+id/view8"
                app:layout_constraintTop_toTopOf="@+id/view8"
                app:srcCompat="@drawable/box" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:fontFamily="@font/abel"
                android:text="Products"
                android:textSize="34sp"
                app:layout_constraintBottom_toBottomOf="@+id/view8"
                app:layout_constraintEnd_toEndOf="@+id/view8"
                app:layout_constraintStart_toEndOf="@+id/imageView4"
                app:layout_constraintTop_toTopOf="@+id/view8" />

            <View
                android:id="@+id/view10"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginStart="30dp"

                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:background="@drawable/options_bg"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/view8" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginStart="30dp"
                app:layout_constraintBottom_toBottomOf="@+id/view10"
                app:layout_constraintStart_toStartOf="@+id/view10"
                app:layout_constraintTop_toTopOf="@+id/view10"
                app:srcCompat="@drawable/distribution" />

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:fontFamily="@font/abel"
                android:text="Distributor"
                android:textSize="34sp"
                app:layout_constraintBottom_toBottomOf="@+id/view10"
                app:layout_constraintEnd_toEndOf="@+id/view10"
                app:layout_constraintStart_toEndOf="@+id/imageView5"
                app:layout_constraintTop_toTopOf="@+id/view10" />

            <View
                android:id="@+id/view11"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginStart="30dp"

                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:background="@drawable/options_bg"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/view10" />

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginStart="30dp"
                app:layout_constraintBottom_toBottomOf="@+id/view11"
                app:layout_constraintStart_toStartOf="@+id/view11"
                app:layout_constraintTop_toTopOf="@+id/view11"
                app:layout_constraintVertical_bias="0.38"
                app:srcCompat="@drawable/cargo" />

            <TextView
                android:id="@+id/textView6"
                android:layout_width="0dp"
                android:layout_height="38dp"
                android:layout_marginStart="30dp"
                android:fontFamily="@font/abel"
                android:text="Orders"
                android:textSize="34sp"
                app:layout_constraintBottom_toBottomOf="@+id/view11"
                app:layout_constraintEnd_toEndOf="@+id/view11"
                app:layout_constraintStart_toEndOf="@+id/imageView6"
                app:layout_constraintTop_toTopOf="@+id/view11" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="logout"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/view11" />

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="invisible"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <View
        android:id="@+id/view6"
        android:layout_width="0dp"
        android:layout_height="170dp"
        android:background="@drawable/bottom_radius"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/settings"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/settings_ico"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:fontFamily="@font/abel"
        android:text="Hello!"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/usertopname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="10dp"
        android:fontFamily="@font/abel"
        android:text="Lakshmanan"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="31dp"
        android:fontFamily="@font/abel"
        android:text="Youre not verified"
        android:textColor="#FF0000"
        android:textSize="24sp"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="@+id/view6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/usertopname" />

</androidx.constraintlayout.widget.ConstraintLayout>

but the best practice is to use a recycler view, create an adapter and as many items as you want.

How to change my scroll view to scrollable constraint layout or how to use scrollview

There are 2 best solutions below

Related Questions in ANDROID

Related Questions in XML

Related Questions in ANDROID-STUDIO

Related Questions in ANDROID-DESIGN-LIBRARY

Trending Questions

Popular # Hahtags

Popular Questions