show products list in android with multicolumn custom layout

Question

I wanna show some products in my android application and I need it to be dynamic,

I need below requirements :

• show products in grid view (2, 3 or 4 columns depending on phone, tablet, portrait, landscape mode)
• each product has onclick event (to show detail of the product in another activity/fragment)
• each product on the grid should be from an xml layout (containing thumbnail image, title, price and so on)
• load more products on scrolling (load on scroll)
• load products from sqlserver database on the net using json (it can be done using adapters ...)

I should mention that I've searched for android libraries and I've found cardslib , but I can't understand how to combine these requirements with this library ! I know some of the requirements are easy to handle but I don't know how to have all of them together !

for clarifying the situation I've uploaded some pictures from a similar application:

thanks in advance for any solution.

Answer 1

Here is the single grid view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e6e6e6"
android:orientation="vertical"
android:padding="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:padding="1.5dp">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="150dp"
            android:layout_height="250dp"
            android:layout_gravity="top|center"
            android:padding="5dp"
            android:src="@drawable/productcimage" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1.5dp"
            android:background="#e6e6e6" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="2dp"
                android:text="New Text" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:text="New Text" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/textView2"
                android:text="New Text" />

            <RatingBar
                android:id="@+id/ratingBar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/textView2"
                android:rating="3" />

        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

Answer 2

Here is the Gridview

<GridView
    android:id="@+id/gridview2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="10dp"
    android:numColumns="2"
    android:paddingBottom="5dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="5dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />