What is the method to follow while designing scrollable content in Android Studio?

Aaron DCosta :

I am designing my app in Constraint Layout and I have placed it under Scroll View. I want to place more Card Views but there is no place to do so in the preview of the xml file. Where do I drag and drop Buttons, TextViews etc when the layout is full? I have dealt with scroll view for text but this is something else.

I am aware that I can just type in the code but it will be hard for me to do that when I wont be able to see what exactly I am designing as the content is out of the defined screen size.

(Let me know in the comments if you want me to post screenshots to better understand the question)

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/images"
    android:fillViewport="true"
    >
<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"
    android:background="@drawable/images"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:layout_editor_absoluteX="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:gravity="center"
            android:orientation="horizontal">

            <androidx.cardview.widget.CardView
                android:id="@+id/test_donation"
                android:layout_width="160dp"
                android:layout_height="190dp"
                android:layout_margin="10dp"
                android:clickable="true"
                android:foreground="?android:attr/selectableItemBackground"
                android:padding="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#660000"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp"
                        android:background="#660000"
                        android:gravity="center">

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="80dp"
                            android:padding="10dp"
                            android:src="@drawable/ic_donate" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="DONATE"
                        android:textColor="#FFEb3b"
                        android:textSize="24sp" />

                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/test_receive"
                android:layout_width="160dp"
                android:layout_height="190dp"
                android:layout_margin="10dp"
                android:clickable="true"
                android:foreground="?android:attr/selectableItemBackground"
                android:padding="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#660000"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp"
                        android:background="#660000"
                        android:gravity="center">

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="80dp"
                            android:padding="10dp"
                            android:src="@drawable/ic_receive" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="RECEIVE"
                        android:textColor="#FFEb3b"
                        android:textSize="24sp" />

                </LinearLayout>
            </androidx.cardview.widget.CardView>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:gravity="center"
            android:orientation="horizontal">

            <androidx.cardview.widget.CardView
                android:id="@+id/test_chat"
                android:layout_width="160dp"
                android:layout_height="190dp"
                android:layout_margin="10dp"
                android:clickable="true"
                android:foreground="?android:attr/selectableItemBackground"
                android:padding="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#660000"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp"
                        android:background="#660000"
                        android:gravity="center">

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="80dp"
                            android:padding="10dp"
                            android:src="@drawable/ic_chat" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="CHAT"
                        android:textColor="#FFEb3b"
                        android:textSize="24sp" />

                </LinearLayout>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/test_logout"
                android:layout_width="160dp"
                android:layout_height="190dp"
                android:layout_margin="10dp"
                android:clickable="true"
                android:foreground="?android:attr/selectableItemBackground"
                android:padding="0dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#660000"
                    android:gravity="center"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="130dp"
                        android:background="#660000"
                        android:gravity="center">

                        <ImageView
                            android:layout_width="80dp"
                            android:layout_height="80dp"
                            android:padding="10dp"
                            android:src="@drawable/ic_logout" />
                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="LOGOUT"
                        android:textColor="#FFEb3b"
                        android:textSize="24sp" />

                </LinearLayout>
            </androidx.cardview.widget.CardView>

        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Iron Man :

Well, I guess you haven't tried to just add more CardViews (or any other Views)... I've copied your code, multiplied amount of CardViews, and it worked like magic... here's what worked for me:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <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=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:layout_editor_absoluteX="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:gravity="center"
                android:orientation="horizontal">

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_donation"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="DONATE"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_receive"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="RECEIVE"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:gravity="center"
                android:orientation="horizontal">

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_chat"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="CHAT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_logout"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="LOGOUT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:gravity="center"
                android:orientation="horizontal">

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_chat_other"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="CHAT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_other"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="LOGOUT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:gravity="center"
                android:orientation="horizontal">

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_chat_other_"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="CHAT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:id="@+id/test_other_"
                    android:layout_width="160dp"
                    android:layout_height="190dp"
                    android:layout_margin="10dp"
                    android:clickable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:padding="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#660000"
                        android:gravity="center"
                        android:orientation="vertical">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="130dp"
                            android:background="#660000"
                            android:gravity="center">

                            <ImageView
                                android:layout_width="80dp"
                                android:layout_height="80dp"
                                android:padding="10dp" />
                        </LinearLayout>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="LOGOUT"
                            android:textColor="#FFEb3b"
                            android:textSize="24sp" />

                    </LinearLayout>
                </androidx.cardview.widget.CardView>
            </LinearLayout>

        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

It's just the same as you did, only without the images because I don't have the src of them, and with four more cards, that gets out of the screen and forces the ScrollViews scroll to be enabled... If you try to do it in a specific space though, you just should set a specific height to the ScrollView, and not match_parent. Anyway, ScrollView scrolls only when it has what to scroll (of course you don't have to use cards only... you could add anything into the ScrollView, and when something gets out of its borders, its scrolling is activated)

I hope it helps!

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=415477&siteId=1