Android tutorial

Android recyclerview with cardview android example e-Commerce

Screenshot 20190831 094137 e1573188603217
823views

Hi, everyone in this Article I am sharing how to create an e-commerce App. And how to show there product in  App with a Good UI Design. Android recycler view with card view android example-e-Commerce. I am Using Android RecyclerView with CardView for Show List of product in your App. Let’s start to create your App easy way.

In this example, I am Using Recycler View List to show data in a List with Adapter. and Using CardView For Creating A Good UI for these.

Android recycler view with card view android example E-Commerce

 Step 1:- Create a Product List Activity In your Project

In your project create an activity and name with Product List. and used these code.

Step 2:-  Open your activity_product_List.XML 

in this XML file, I am adding layout for Recyclerview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="codeplayon.com.Package_List">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refreshMainCat"
        android:layout_height="match_parent"
        android:layout_width="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/Product_Recycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"/>

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

 

Step 3: Open your Product java file and adding these code.

In your you java file you can use an API for product data. I am using #Volley Libary for getting data in JSONArrey Form  

public class Package_List extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{
    public static final String KEY_joint="joint";
    private RecyclerView firstRecyclerView;
    private ProductAdapter rAdapter;
    public static String EMAIL;
    private SwipeRefreshLayout swipeRefreshLayout;
    String joint="",Appoi_id="";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_package__list);
        joint=getIntent().getStringExtra("Joint");
        Appoi_id=getIntent().getStringExtra("appoi_id");
        SessionManagement sessionManagement =new SessionManagement();
        Boolean checkLogin = sessionManagement.getLogin(this);
        EMAIL = sessionManagement.getSavedEmail(this);
        if (!checkLogin){
            Intent intent = new Intent(this,LoginActivity.class);
            startActivity(intent);
        }
        if (AppStatus.getInstance(this).isOnline()) {
            MyProductLIst();

        } else {
            ContextThemeWrapper ctw = new ContextThemeWrapper(Package_List.this, R.style.Theme_AlertDialog);
            final AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(ctw);
            alertDialogBuilder.setTitle("No internet connection");
            alertDialogBuilder.setMessage("Check your  internet connection or try again");
            alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {

                }
            });
            alertDialogBuilder.show();
        }
        swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.refreshMainCat);
        swipeRefreshLayout.setOnRefreshListener(this);
      
    }

    private void MyProductLIst() {
        // progress Dialog
        final ProgressDialog loading = new ProgressDialog(Package_List.this);
        loading.setMessage("Please Wait...");
        loading.show();
        loading.setCanceledOnTouchOutside(false);
// json response code
        StringRequest stringRequest = new StringRequest(Request.Method.POST, ConfiURL.Packges_List,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {

                        try {
                            Log.d("JSON", response);
                            loading.dismiss();
                            swipeRefreshLayout.setRefreshing(false);
                            JSONObject jsonObject = new JSONObject(response);
                            String error_status = jsonObject.getString("status");
                            if (error_status.equals("0")) {
                                String error_msg = jsonObject.getString("message");
//                                Toast.makeText(LogIn.this, error_msg, Toast.LENGTH_SHORT).show();
                                ContextThemeWrapper ctw = new ContextThemeWrapper(Package_List.this, R.style.Theme_AlertDialog);
                                final android.app.AlertDialog.Builder alertDialogBuilder = new android.app.AlertDialog.Builder(ctw);
                                alertDialogBuilder.setTitle("Message");
                                alertDialogBuilder.setCancelable(false);
                                alertDialogBuilder.setMessage(error_msg);
                                alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() {
                                    public void onClick(DialogInterface dialog, int id) {

                                    }
                                });
                                alertDialogBuilder.show();
                            } else {

                                JSONArray jArray = jsonObject.getJSONArray("allData");
                                if (jArray.length() == 0) {
 /*of array length is 0 then show alert dialog if
 * array is not 0 then go else*/
                                    ContextThemeWrapper ctw = new ContextThemeWrapper(Package_List.this, R.style.Theme_AlertDialog);
                                    final android.app.AlertDialog.Builder alertDialogBuilder = new android.app.AlertDialog.Builder(ctw);
                                    alertDialogBuilder.setTitle("Message");
                                    alertDialogBuilder.setCancelable(false);
                                    alertDialogBuilder.setMessage("No any history data please used Ro care india service");
                                    alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() {
                                        public void onClick(DialogInterface dialog, int id) {

                                        }
                                    });
                                    alertDialogBuilder.show();
                                } else {
                                    onPostExecute(jArray);

                                }

                            }

                        } catch (Exception e) {
                            Log.d("Tag", e.getMessage());

                        }
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        loading.dismiss();
                        swipeRefreshLayout.setRefreshing(false);
                        ContextThemeWrapper ctw = new ContextThemeWrapper(Package_List.this, R.style.Theme_AlertDialog);
                        final AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(ctw);
                        alertDialogBuilder.setTitle("No connection");
                        alertDialogBuilder.setMessage(" Network Timeout  error please try again ");
                        alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int id) {

                            }
                        });
                        alertDialogBuilder.show();

                    }
                }) {
            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String, String> map = new HashMap<String, String>();
                map.put(KEY_joint, joint);
                return map;
            }
        };

        RequestQueue requestQueue = Volley.newRequestQueue(this);
        requestQueue.add(stringRequest);
    }

    protected void onPostExecute(JSONArray result) {
        //this method will be running on UI thread
        List<DataObject> data = new ArrayList<>();
        data.equals(null);
        try {
            // Extract data from json and store into ArrayList as class objects
            for (int i = 0; i < result.length(); i++) {
                JSONObject json_data = result.getJSONObject(i);
                DataObject report = new DataObject();
                report.mText1 = json_data.getString("id");
                report.mText2 = json_data.getString("name");
                report.mText3 = json_data.getString("package_amount");
                report.mText4 = json_data.getString("validity");
                report.mText5 = json_data.getString("days");
                report.mText6 = json_data.getString("joints");
                report.mText7 =Appoi_id;
                data.add(report);
            }
            // Setup and Handover data to recyclerview
            firstRecyclerView = (RecyclerView) findViewById(R.id.Product_Recycler);
            rAdapter = new ProductAdapter(Package_List.this, data);
            firstRecyclerView.setAdapter(rAdapter);
            GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),2);
            firstRecyclerView.setLayoutManager(gridLayoutManager);
//            recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
//                @Override
//                public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
//                    if(dy > 0){
//                        fab.hide();
//                    } else{
//                        fab.show();
//                    }
//
//                    super.onScrolled(recyclerView, dx, dy);
//                }
//            });

        } catch (JSONException e) {
            Toast.makeText(Package_List.this, e.toString(), Toast.LENGTH_LONG).show();
        }
    }

    @Override
    public void onRefresh() {
        MyProductLIst();
    }

}

Step 4: Create A  DataObject java Class.

in this java class, you can create a getter and Setter method for getting and setting your value.

public class DataObject {
    public String mText1;
    public String mText2;
    public String mText3;
    public String mText4;
    public String mText5;
    public String mText6;
    public String mText7;
    public String mText8;
    public String mText9;


    public String Image;

    public String getImage() {
        return Image;
    }

    public void setImage(String image) {
        Image = image;
    }


    public String getmText1() {
        return mText1;
    }

    public void setmText1(String mText1) {
        this.mText1 = mText1;
    }

    public String getmText2() {
        return mText2;
    }

    public void setmText2(String mText2) {
        this.mText2 = mText2;
    }

    public String getmText3() {
        return mText3;
    }

    public void setmText3(String mText3) {
        this.mText3 = mText3;
    }

    public String getmText4() {
        return mText4;
    }

    public void setmText4(String mText4) {
        this.mText4 = mText4;
    }

    public String getmText5() {
        return mText5;
    }

    public void setmText5(String mText5) {
        this.mText5 = mText5;
    }
    public String getmText6() {
        return mText6;
    }

    public void setmText6(String mText6) {
        this.mText6 = mText6;
    }

    public String getmText7() {
        return mText7;
    }

    public void setmText7(String mText7) {
        this.mText7 = mText7;
    }
    public String getmText8() {
        return mText8;
    }

    public void setmText8(String mText8) {
        this.mText8 = mText8;
    }
    public String getmText9() {
        return mText9;
    }

    public void setmText9(String mText9) {
        this.mText9 = mText9;
    }

Step 5: Create A  ProductAdapter java Class.

in your Adapter java class I a  getting value with API and set the Layout View holder.

public class ProductAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context;
    private LayoutInflater inflater;
    List<DataObject> data = Collections.emptyList();
    private ArrayList<DataObject> arraylist;
    // Report current;
    // int currentPos = 0;
    String Leads_id;
    private int lastPosition = -2;
    public ProductAdapter(Context context, List<DataObject> data) {
        this.context = context;
        // inflater = LayoutInflater.from(context);
        this.data = data;
        this.arraylist = new ArrayList<DataObject>();
        this.arraylist.addAll(data);
    }

    // Inflate the layout when viewholder created
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = inflater.from(parent.getContext()).
                inflate(R.layout.product_card, parent, false);
        ProductAdapter.MyHolder holder = new ProductAdapter.MyHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        // Get current position of item in recyclerview to bind data and assign values from list
        ProductAdapter.MyHolder myHolder = (ProductAdapter.MyHolder) holder;
        DataObject current = data.get(position);
        myHolder.ProductId.setText(current.getmText1());
        myHolder.ProductName.setText(current.getmText2());
        myHolder.package_amount.setText(current.getmText3());
        myHolder.validity.setText(current.getmText4());
        myHolder.days.setText(current.getmText5());
        myHolder.joints.setText(current.getmText6());
        Leads_id=current.getmText7();

//        String userImage = current.getImage();
//        if (userImage.isEmpty()) {
//            Toast.makeText(context, "no image for user", Toast.LENGTH_LONG).show();
//        } else {
//            Picasso.with(context)
//                    .load(userImage)
//                    .placeholder(R.drawable.ic_logo)
//                    .resize(120, 100)
//                    .into(((MyHolder) holder).Productimage);
//        }
        setAnimation(myHolder.itemView, position);

    }

    private void setAnimation(View viewToAnimate, int position)
    {
        // If the bound view wasn't previously displayed on screen, it's animated
        if (position > lastPosition)
        {
            Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
            viewToAnimate.startAnimation(animation);
            lastPosition = position;
        }
    }

    // Filter Class
    public void filter(String charText) {
        charText = charText.toLowerCase(Locale.getDefault());
        data.clear();
        if (charText.length() == 0) {
            data.addAll(arraylist);
        } else {
            for (DataObject wp : arraylist) {
                if (wp.getmText2().toLowerCase(Locale.getDefault()).contains(charText)) {
                    data.add(wp);
                }
            }
        }
        notifyDataSetChanged();
    }

    @Override
    public int getItemCount() {
        return data.size();
    }


    class MyHolder extends RecyclerView.ViewHolder {

        TextView ProductName;
        TextView ProductId;
        ImageView Productimage;
        TextView joints,package_amount,validity,days;
        Button ViewProduct;
        CardView CV;

        // create constructor to get widget reference
        public MyHolder(View itemView) {
            super(itemView);
            CV = (CardView) itemView.findViewById(R.id.CardView);
            ProductName = (TextView) itemView.findViewById(R.id.CatgriName);
            ProductId = (TextView) itemView.findViewById(R.id.CatagriId);
            joints = (TextView) itemView.findViewById(R.id.joints);
            Productimage = (ImageView) itemView.findViewById(R.id.Catagriimage);
            package_amount = (TextView) itemView.findViewById(R.id.package_amount);
            validity = (TextView) itemView.findViewById(R.id.validity);
            ViewProduct=(Button)itemView.findViewById(R.id.ViewProduct);
            days = (TextView) itemView.findViewById(R.id.days);


            ViewProduct.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent=new Intent(context,Buys_Package.class);
                    intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK| Intent.FLAG_ACTIVITY_NEW_TASK);
                    context.startActivity(intent);

                }
            });
        }
    }
}

 

Step 6:  Create a Card View for show product detail used in Adapter.

create an XML file for show list data in a card view. CardView is used in your adapter class to show the value in the layout.

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CardView"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="8dp">

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

        <ImageView
            android:id="@+id/Catagriimage"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:padding="10dp"
            android:background="@drawable/product"
            android:contentDescription="@null" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:padding="5dp"
            android:orientation="vertical">
            <TextView
                android:id="@+id/CatgriName"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:textAppearanceSmall"
                android:textStyle="bold"
                android:inputType="textMultiLine"
                android:layout_weight="1"
                android:padding="2dp"
                android:text="" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAppearance="?android:textAppearanceSmall"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:text="Joint:  " />
                <TextView
                    android:id="@+id/joints"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAppearance="?android:textAppearanceSmall"
                    android:padding="2dp"
                    android:text="" />
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/green"
                    android:textAppearance="?android:textAppearanceSmall"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:text="Amount:  " />
            <TextView
                android:id="@+id/package_amount"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:textColor="@color/green"
                android:textAppearance="?android:textAppearanceSmall"
                android:padding="2dp"
                android:text="" />
                </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/red"
                    android:textAppearance="?android:textAppearanceSmall"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:text="Validity:  " />

            <TextView
                android:id="@+id/validity"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textColor="@color/red"
                android:gravity="center"
                android:textAppearance="?android:textAppearanceSmall"
                android:padding="2dp"
                android:text="" />
                </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/black"
                    android:textAppearance="?android:textAppearanceSmall"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:text="Days:  " />

            <TextView
                android:id="@+id/days"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textColor="@color/black"
                android:gravity="center"
                android:textAppearance="?android:textAppearanceSmall"
                android:padding="2dp"
                android:text="" />
                </LinearLayout>

            <TextView
                android:id="@+id/CatagriId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                android:text=""/>
        </LinearLayout>

        <Button
            android:id="@+id/ViewProduct"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:textStyle="bold"
            android:background="@drawable/button_left"
            android:text="View"/>

    </LinearLayout>
</android.support.v7.widget.CardView>

 

 

Welcome to my blog! I’m Ritu Malik, and here at Codeplayon.com, we are dedicated to delivering timely and well-researched content. Our passion for knowledge shines through in the diverse range of topics we cover. Over the years, we have explored various niches such as business, finance, technology, marketing, lifestyle, website reviews and many others.