How to create ecommerce app in android studio, Tutorial from Scratch – Part 1

how to create ecommerce app in android studio

google app

You can download this APK from  

First of all please check this images our application will be looks like this…..

MyApp   Cakes and Flowers  Checkout page  Menu Option

Payment option Login and register My Card Option

The main features of the app would be:

  1. Category based product list
  2. Adding/Updating products to Cart
  3. Multiple Address List for each user
  4. Order History for every user

Pre-Requisites:

  1. Basic programming skills in Java
  2. Basic Android Concepts

Use Cases:

  1. To bring your offline business to online at mobile platform
  2. An android app for existing online shopping website
  3. If you are a student, then a prototype for your school projects
  4. A sample example of Android App for eCommerce

 

Now Creating Home Screen..

HomeActivity.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.v4.widget.DrawerLayout 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:id=”@+id/drawer_layout”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:fitsSystemWindows=”true”
tools:openDrawer=”start”
>

<include
layout=”@layout/app_bar_home”
android:layout_width=”match_parent”
android:layout_height=”match_parent” />

<android.support.design.widget.NavigationView
android:id=”@+id/nav_view”
android:layout_width=”wrap_content”
android:layout_height=”match_parent”
android:layout_gravity=”start”
android:fitsSystemWindows=”true”
app:headerLayout=”@layout/nav_header_home”
app:menu=”@menu/activity_home_drawer” />

</android.support.v4.widget.DrawerLayout>

 

nav_header_home.xml

<?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”
android:layout_width=”match_parent”
android:layout_height=”@dimen/nav_header_height”
android:background=”@drawable/side_nav_bar”
android:gravity=”bottom”
android:orientation=”vertical”
android:paddingBottom=”@dimen/activity_vertical_margin”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:theme=”@style/ThemeOverlay.AppCompat.Dark”>

<ImageView
android:id=”@+id/imageView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:paddingTop=”@dimen/nav_header_vertical_spacing”
app:srcCompat=”@drawable/logo” />
<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Make life easier.” />

</LinearLayout>

 

activity_home_drawer.xml

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

<group android:checkableBehavior=”single”>
<item
android:id=”@+id/nav_camera”
android:icon=”@mipmap/home”
android:title=”Home” />
<item
android:id=”@+id/nav_gallery”
android:icon=”@mipmap/cart”
android:title=”Cart” />
<item
android:id=”@+id/nav_order”
android:icon=”@mipmap/orderhistory”
android:title=”Order History” />

</group>

<item android:title=”Communicate”>
<menu>
<item
android:id=”@+id/nav_share”
android:icon=”@drawable/ic_menu_share”
android:title=”Share” />
<item
android:id=”@+id/nav_send”
android:icon=”@mipmap/logout”
android:title=”Logout” />
</menu>
</item>

</menu>

 

content_home.xml

<?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:id=”@+id/content_home”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
tools:context=”com.mr_gunjan.ecommerce.HomeActivity”
xmlns:custom=”http://schemas.android.com/apk/res-auto”
tools:showIn=”@layout/app_bar_home”>
<com.daimajia.slider.library.SliderLayout
android:id=”@+id/slider”
android:layout_width=”match_parent”
custom:pager_animation=”Accordion”
custom:auto_cycle=”true”
custom:indicator_visibility=”visible”
custom:pager_animation_span=”1100″
android:layout_height=”150dp”/>

<com.daimajia.slider.library.Indicators.PagerIndicator
android:id=”@+id/custom_indicator”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center”
custom:selected_color=”#0095BF”
custom:unselected_color=”#55333333″
custom:selected_drawable=”@drawable/bird”
custom:shape=”oval”
custom:selected_padding_left=”5dp”
custom:selected_padding_right=”5dp”
custom:unselected_padding_left=”5dp”
custom:unselected_padding_right=”5dp”
android:layout_centerHorizontal=”true”
android:layout_alignParentBottom=”true”
custom:selected_width=”6dp”
custom:selected_height=”6dp”
custom:unselected_width=”6dp”
custom:unselected_height=”6dp”
android:layout_marginBottom=”20dp”
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id=”@+id/custom_indicator2″
style=”@style/AndroidImageSlider_Corner_Oval_Orange”
android:layout_centerHorizontal=”true”
android:layout_alignParentBottom=”true”
android:layout_marginBottom=”20dp”
/>

<android.support.v7.widget.RecyclerView
android:id=”@+id/card_recycler_view”
android:scrollbars=”vertical”
android:layout_below=”@+id/slider”
android:layout_width=”match_parent”
android:layout_height=”match_parent”/>

</RelativeLayout>

 

Now java file for this xml.

HomeActivity.java

package com.mr_gunjan.ecommerce;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.print.PrintManager;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.Volley;
import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import com.joanzapata.iconify.widget.IconButton;
import com.mr_gunjan.ecommerce.adapter.HomeCategoryAdapter;
import com.mr_gunjan.ecommerce.adapter.ProductCounterAdapter;
import com.mr_gunjan.ecommerce.app.CustomRequest;
import com.mr_gunjan.ecommerce.database.MyCart;
import com.mr_gunjan.ecommerce.pojo.MasterCategory;

import org.json.JSONArray;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class HomeActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener, BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener {

private LayerDrawable mCartMenuIcon;
private MenuItem mSearchMenu,cart;
private int mCartCount;
private SliderLayout mDemoSlider;
Button search;
private RecyclerView recyclerView;
private ProgressDialog mProgressDialog;
public static MyCart myCartdb;

public static long countproductoncart=0;

RelativeLayout notificationCount1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

myCartdb=new MyCart(HomeActivity.this);

// SharedPreferences sharedPreferences = getSharedPreferences(“loginstate”, Context.MODE_PRIVATE);
// if (sharedPreferences.getString(“islogin”, “”).equals(“1”)) {
//
// } else {
// Intent intent=new Intent(HomeActivity.this,Login.class);
// this.finish();
// startActivity(intent);
//
//
// }

myCartdb.open();
countproductoncart=myCartdb.countproduct();
myCartdb.close();

// ADD SLIDER
mDemoSlider = (SliderLayout)findViewById(R.id.slider);

HashMap<String,String> url_maps = new HashMap<String, String>();
url_maps.put(“Market”, “http://greatist.com/sites/default/files/Healthy-Grocery-Shopping.jpg”);
url_maps.put(“Online”, “http://goodearthmarket.coop/wp-content/themes/goodearth/images/grocery.jpg”);
url_maps.put(“Frocery”, “http://www.theloop.ca/wp-content/uploads/2015/02/grocery-shopping.jpg”);
url_maps.put(“App”, “http://cdn.modernfarmer.com/wp-content/uploads/2014/11/shoppinghero.jpg”);
for(String name : url_maps.keySet()){
TextSliderView textSliderView = new TextSliderView(this);
// initialize a SliderLayout
textSliderView
.description(name)
.image(url_maps.get(name))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(HomeActivity.this);

//add your extra information
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString(“extra”,name);

mDemoSlider.addSlider(textSliderView);
}
mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setDuration(4000);
mDemoSlider.addOnPageChangeListener(HomeActivity.this);

// END ADD SLIDER
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
// NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
initViews();
}

@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}

@Override
public boolean onCreateOptionsMenu(final Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
//getMenuInflater().inflate(R.menu.home, menu);
getMenuInflater().inflate(R.menu.cart, menu);

mCartMenuIcon = (LayerDrawable) menu.findItem(R.id.action_cart).getIcon();
mSearchMenu = (MenuItem) menu.findItem(R.id.action_search);
cart=(MenuItem) menu.findItem(R.id.action_cart);
mSearchMenu.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// Toast.makeText(HomeActivity.this,”Search Click”,Toast.LENGTH_LONG).show();
Intent i=new Intent(HomeActivity.this,SearchActivity.class);
startActivity(i);
return false;
}
});

cart.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
//Toast.makeText(HomeActivity.this,”Cart Click”,Toast.LENGTH_LONG).show();
Intent i=new Intent(HomeActivity.this,CartActivity.class);
startActivity(i);
return false;
}
});
setBadgeCount(this, mCartMenuIcon, String.valueOf(countproductoncart));
return super.onCreateOptionsMenu(menu);
}
public static void setBadgeCount(Context context, LayerDrawable icon, String count) {

BadgeDrawable badge;

// Reuse drawable if possible
Drawable reuse = icon.findDrawableByLayerId(R.id.ic_badge);
if (reuse != null && reuse instanceof BadgeDrawable) {
badge = (BadgeDrawable) reuse;
} else {
badge = new BadgeDrawable(context);
}

badge.setCount(count);
icon.mutate();
icon.setDrawableByLayerId(R.id.ic_badge, badge);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.searchnavigationicon) {
Intent i=new Intent(HomeActivity.this,CartActivity.class);
startActivity(i);
return true;
}

return super.onOptionsItemSelected(item);
}

@SuppressWarnings(“StatementWithEmptyBody”)
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();

if (id == R.id.searchnavigationicon) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
Intent i=new Intent(HomeActivity.this,CartActivity.class);
startActivity(i);

} else if (id == R.id.nav_order) {
Intent i=new Intent(HomeActivity.this,OrderHistory.class);
startActivity(i);

} else if (id == R.id.nav_send) {
SharedPreferences sharedPreferences = getSharedPreferences(“loginstate”, MODE_PRIVATE);
SharedPreferences.Editor editor = sharedPreferences.edit();
editor.putString(“islogin”, “”);
editor.putString(“userid”,””);
editor.commit();
Intent intent=new Intent(HomeActivity.this,Login.class);
startActivity(intent);
}

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}

@Override
protected void onStop() {
// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed
mDemoSlider.stopAutoCycle();
super.onStop();
myCartdb.open();
countproductoncart=myCartdb.countproduct();
myCartdb.close();
}

@Override
public void onSliderClick(BaseSliderView slider) {
Toast.makeText(this,slider.getBundle().get(“extra”) + “”,Toast.LENGTH_SHORT).show();
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

@Override
public void onPageSelected(int position) {
Log.d(“Slider Demo”, “Page Changed: ” + position);
}

@Override
public void onPageScrollStateChanged(int state) {}
// RECYCLE VIEW
private void initViews(){
recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
recyclerView.setHasFixedSize(true);
RecyclerView.LayoutManager layoutManager = new GridLayoutManager(getApplicationContext(),2);
recyclerView.setLayoutManager(layoutManager);
mProgressDialog = new ProgressDialog(HomeActivity.this);

Map<String, String> parameterData = new HashMap<>();
jsonObjectRequest2(“http://ecommerceadmin.learnrip.com/Json/all_categories”, parameterData);

}
public void jsonObjectRequest2(String url, final Map<String, String> params) {
try {
mProgressDialog.show();
mProgressDialog.setCancelable(false);
mProgressDialog.setMessage(getString(R.string.loading));
Response.Listener<JSONObject> reponseListener = new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject jsonObject) {
processJsonObject2(jsonObject);
mProgressDialog.dismiss();
}
};
Response.ErrorListener errorListener = new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError volleyError) {
//Toast.makeText(getActivity(), “error==> ” + volleyError.toString(), Toast.LENGTH_LONG).show();
mProgressDialog.dismiss();
}
};
CustomRequest jsObjRequest = new CustomRequest(Request.Method.POST, url, params, reponseListener, errorListener);
RequestQueue requestQueue = Volley.newRequestQueue(HomeActivity.this);
requestQueue.add(jsObjRequest);
} catch (Exception e) {
VolleyLog.d(“RESPONSE ERROR”, e.toString());
mProgressDialog.dismiss();
}
}
private void processJsonObject2(JSONObject response) {
if (response != null) {
Log.e(“==RESPONSE ERROR=”, response.toString());
try {
JSONArray jsonArray = response.getJSONArray(“category”);
ArrayList<MasterCategory> arrayList=new ArrayList<MasterCategory>();
for (int i=0; i<jsonArray.length(); i++){
JSONObject jsonObject=jsonArray.getJSONObject(i);

MasterCategory masterCategory=new MasterCategory();
masterCategory.setId(jsonObject.getString(“id”));
masterCategory.setName(jsonObject.getString(“name”));
masterCategory.setImage(jsonObject.getString(“image”));
Log.e(“JSON TEST”,jsonObject.getString(“id”));

arrayList.add(masterCategory);
}
HomeCategoryAdapter adapter = new HomeCategoryAdapter(getApplicationContext(),arrayList);
recyclerView.setAdapter(adapter);
}catch (Exception e){

}

}
}
@Override
protected void onResume() {

//Toast.makeText(HomeActivity.this,”Resume”,Toast.LENGTH_SHORT).show();
super.onResume();
myCartdb.open();
countproductoncart=myCartdb.countproduct();
//setBadgeCount(this, mCartMenuIcon, String.valueOf(countproductoncart));
myCartdb.close();

invalidateOptionsMenu();
//updatcartc();

}

public void updatcartc(){
View view;
myCartdb.open();
countproductoncart=myCartdb.countproduct();
setBadgeCount(this, mCartMenuIcon, String.valueOf(mCartCount++));
myCartdb.close();
}
}

 

Now using this xml and java file our design will look like this.

ecommerce app

 

Now its too long i will post second part soon, Thanks for this..

 

 

 




Categories: Android,Php

Tags: ,,,,

264 Comments

  1. hi, first of all thanks for the code. pls email me the 2nd part of the code.
    thanking you in advance for the second part

    Reply
  2. Its nice tutorial/code for learning android in overall context, please can you mail full code on my email address.
    Thanks for sharing

    Reply
  3. HI Gunjan,

    Your tutorial really awesome dude thanks in advance. I like UI but Dude may i get Source Code of This App I dnt know much about java but it will be great if you can sent me full source code. thanks in advance again..

    Regards
    Ankit Agrawal

    Reply
  4. Thank you for your tutorial.

    Could you send me the Full source Code for the app and the admin panel if possible.

    Thanks!

    Reply
  5. hey that’s a very nice tutorial.. i would want to go through the entire code to understand it better.
    can you please send it to me on my email id chirag1693@gmail.com

    Thank you in advance.
    Good stuff.

    Please let me know when you post part 2

    Reply
  6. Thank you for the tutorial 🙂

    Can you please send me the full source code along with the admin panel if possible.

    Once again thank you for the tutorial.
    Hope to get your mail at the earliest.

    Reply
  7. Hello Sir

    i am working like that project and i have need some help in coding please send me full code on my email.
    please send me running code.
    My Email is:-thakur.rajeev42@gmail.com

    Thanks

    Reply
  8. Sir As i am at learning stage and very much impressed by your part 1 design so sir can u please send me the complete source code so that i can learn from that and try to make like that….

    Reply
  9. sir great tutorial, Learned a lot from it.Will you please share the source code and full tutorial to mohitsharma069@gmail,com

    Reply
  10. Hi Sir please could email me this source code for part 1 and part 2 i want to create a university app with a canteen which needs this shopping cart feature.
    Are you able to help me create it ?

    Reply
  11. Hi Sir, Please share with me (manjuhombaradi@gmail.com) Part 1 and Part 2 tutorials. If possible pls share the source code.

    Reply
  12. Hey Gunjan congrats for the great article also can’t see the link to 2nd Part. Would you please the source files of both those parts at the below address. Your Efforts are highly appreciated. Thanks in advance.

    E-mail: hshah1470@gmail.com

    Reply
  13. Hello, firstly thanks to improve the knowledge of other people’s. could you please send complete tutorial of E commerce app.

    Reply
  14. Dear SIR ,
    Gujan Srivastava your code is amazing and your efforts are amazing too can you please send me this whole e-commerce application project with all its files and source code to the mail follows : prgraphy1988@gmail.com
    i would be thankful to you if you do so.

    Reply
  15. Sir please can you send me full project code to my mail id it’s very nice and I want to try to make this app plz send me full source code

    Reply

Leave A Reply

Your email address will not be published.

error: Alltutorial.in content is protected !!