How to place scroll view in between grid layout

130 Views Asked by At

I'm developing a category screen where I have used auto image slider and grid layout. I want to place the scroll view in between the auto image slider and grid layout but when I was trying to place it then the grid layout is not visible in category.xml layout.

I have used android:fillViewport="true" in scroll view but did not work for me.

This is my activity_categories.xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".categories">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:fontFamily="@font/beth_ellen"
            android:lineHeight="24sp"
            android:text="@string/categories"
            android:textAllCaps="false"
            android:textColor="@color/black"
            android:textSize="25sp" />

        <ImageButton
            android:id="@+id/addBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@color/white"
            android:padding="3dp"
            android:src="@drawable/heart_five" />

    </RelativeLayout>


    <androidx.cardview.widget.CardView
            android:id="@+id/categories_card_view"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:cardBackgroundColor="@color/white"
            app:cardElevation="20dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="20dp"
            android:layout_marginStart="20dp"
            app:cardCornerRadius="20dp">


            <com.denzcoskun.imageslider.ImageSlider
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:id="@+id/imageSlider"
                app:iss_period="1000"
                app:iss_auto_cycle="true"
                app:iss_delay="1000" />

        </androidx.cardview.widget.CardView>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/categories_card_view"
        android:layout_above="@+id/bottom_navigation"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="25dp"


        android:columnCount="2"
        android:rowCount="3">

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="12dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_row="1">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                >

                <ImageView
                    android:id="@+id/westerngown_img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/g1_removebg_newpreview"
                    android:layout_gravity="center_horizontal"/>

                <TextView

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"

                    android:layout_marginStart="10dp"
                    android:layout_marginTop="120dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginBottom="10dp"
                    android:text="@string/Western_Gown"
                    android:textColor="@color/white"
                    android:textSize="25sp"
                    android:textStyle="bold" />






            </RelativeLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="12dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_row="1">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                >

                <ImageView
                    android:id="@+id/partygown_img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/g7_removebg_preview"
                    android:layout_gravity="center_horizontal"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"


                    android:layout_marginStart="10dp"
                    android:layout_marginTop="120dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginBottom="10dp"

                    android:text="@string/Party_Gown"
                    android:textColor="@color/white"
                    android:textSize="25sp"
                    android:textStyle="bold" />
            </RelativeLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="12dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_row="2">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                >

                <ImageView
                    android:id="@+id/allmixed_img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:scaleType="centerCrop"
                    android:src="@drawable/g4_removebg_preview" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="130dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginBottom="10dp"
                    android:text="@string/All_Mixed"
                    android:textColor="@color/white"
                    android:textSize="25sp"
                    android:textStyle="bold" />
            </RelativeLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_margin="12dp"
            app:cardCornerRadius="15dp"
            app:cardElevation="12dp"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_row="2">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                >

                <ImageView
                    android:id="@+id/weddinggown_img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/g3_removebg_newpreview"
                    android:layout_gravity="center_horizontal"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="120dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginBottom="10dp"
                    android:text="@string/Wedding_Gown"
                    android:textColor="@color/white"
                    android:textSize="25sp"
                    android:textStyle="bold" />
            </RelativeLayout>

        </androidx.cardview.widget.CardView>


    </GridLayout>








    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/white"
        app:itemIconTint="@drawable/selector"
        app:itemTextColor="@drawable/selector"
        app:menu="@menu/bottom_nav_menu" />

</RelativeLayout>
1

There are 1 best solutions below

1
sandeep kella On

To place a ScrollView in between a GridLayout, you can use a LinearLayout as a container for both the GridLayout and ScrollView. Here's an example of how you can achieve this in XML:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2"
        android:rowCount="3">

        <!-- Add your grid items here -->

    </GridLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!-- Add your scrollable content here -->

    </ScrollView>

</LinearLayout>

In this example, a LinearLayout is used as the container for both the GridLayout and ScrollView. The LinearLayout is set to have a vertical orientation, which means that its child views will be stacked vertically.

The GridLayout is set to have two columns and three rows, and you can add your grid items inside it.

The ScrollView is placed after the GridLayout and takes up the remaining space in the container by setting its layout_height to 0dp and its layout_weight to 1. You can add your scrollable content inside the ScrollView.

By using a LinearLayout as a container, you can easily position the ScrollView in between the GridLayout and achieve the desired layout.