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>
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!