Material E-Commerce App Design in Android Example

In these days Android Plays very important role in running E-Commerce business furthermore there are endless possibilities. There are thousands of applications in play store running an E-Commerce business. What makes your application stand out from this crowd. Beautiful design and user experience play a major role. In this post, we will build Material E-Commerce App Design in Android example. Mainly focusing on rich and beautiful design. This will give great user experience. The homepage consists of a list of products with name, price, and image of the product.

Download Source Code



Material E-Commerce App Design in Android Example

Step 1: Structure of this application contains Activity. Inside activity, we will place  RecyclerView. Create new Android Studio Project or open existing. First, we need to setup dependency. Open Build.gradle file. Now we will be using CardView to create beautiful material cards and Picasso to load images. Add a dependency for CardView and Picasso in build.gradle file as shown below.

Step 2: Add the below strings, colors and dimen resources to strings.xmlstyles.xml and dimens.xml files

Step 3: Download and copy these files in res -> drawable folder.

Step 4: Create adapters, models, helpers folder inside your projects package name folder.

Step 5:  Create new class models -> paste the following code into it. This class represents a model of the single product. Every product contains image, name, price and whether it is new or not.

Step 6: Create new layout -> custom_row_product.xml paste following lines in it. This layout represents the view of a product in the RecyclerView.

Step 6: RecyclerView will be populated with two different layouts first is product layout and another is progress layout. Create new layout -> custom_row_loading.xml. This layout will contain progress bar and TextView showing loading as defined below.

Step 7: Our model and views are ready now we will create the adapter to populate information in RecyclerView. The adapter will populate views according to the condition. Suppose if the app is fetching data from the server then loading view will be populated inside RecyclerView. When products are fetched then it will remove loading view and will add products views with there pieces of information. Create new class adapters -> paste below lines in it.

Step 8: Now create new class helpers -> Space add following lines to it. This class is helper class. Using this class we can add space between two RecyclerView items to separate them from each other.

Step 9: E-Commerce business can have thousands of products. Fetching all products at once can take a long time. Instead, we can load data in small chunks like five products first then when user will scroll and want to see more then we will fetch more five like this cycle continues. To achieve this create new class helpers -> add the following code to it.

Step 10: Now our adapter is ready to attach RecyclerView. This RecyclerView will be inside Activity. Create new layout -> content_main.xml. This layout will contain RecyclerView as shown below.

Step 11: create one more layout ->activity_main.xml. Add following snippet to it.

Step 12: Finally create activity class package name -> In this activity, we will initialize RecyclerView. Then we will fetch data from the server and provide it to the Adapter. Adapter will take care of populating views in RecyclerView.

Step 13: Define this activity inside manifest.xml file as shown below.

Step 15: Run the application.

Material E-Commerce App Design in Android Example - Output


If you still have any queries, please post them in the comments section below, I will be happy to help you. If you have any other questions in mind then make sure to visit our ask section.

Share this post

Hello there, My name is Amardeep founder of I have experience in many technologies like Android, Java, Php etc. In this variety of technologies, I love Android App Development. If you have any idea and you want me to develop for you then let’s have chat Email: [email protected]


Leave a Reply

Your email address will not be published. Required fields are marked *