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>
add a comment