E-Commerce App: Shoe Ordering App (Kotlin, Firebase, MVVM)

Build Your Own E-Commerce App in Kotlin — Sell Shoes, Clothes or Any Product!

Created byNative Bytes

Last updated 9/2025

English

What you'll learn

Build a complete, real-world native Android e-commerce app using Kotlin from scratch.
Implement core e-commerce features like product listing, Add to Cart, order placement, and order history.
Integrate Firebase Realtime Database for dynamic product management and real-time data storage.
Design a professional, responsive user interface with modern Android components and XML layouts.

Course content

15 sections • 42 lectures • 3h 52m total length

Introduction1:30
Demo Walkthrough - LaceItUp user end app and Admin App5:34
Starter Project and Folder Structure Explanation4:41

Register Screen5:15
Understanding AuthRepository, AuthViewModel & AuthViewModelFactory8:19
Login and Forgot Password Screen2:27
//fragment_login.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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="match_parent"
android:background="@color/white"
android:fillViewport="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> 
<View
android:id="@+id/bg_top_header"
android:layout_width="0dp"
android:layout_height="230dp"
android:background="@drawable/bg_gradient"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> 
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:fontFamily="@font/bold"
android:text="Sign in"
android:textColor="@color/white"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/bg_top_header" /> 
<TextView
android:id="@+id/txt_greeting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="@font/regular"
android:text="Welcome Back You've Been Missed!"
android:textColor="@color/white"
app:layout_constraintStart_toStartOf="@id/textView2"
app:layout_constraintTop_toBottomOf="@id/textView2" /> 
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_constraintTop_toBottomOf="@id/txt_greeting">

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

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp">

<TextView
android:id="@+id/loginTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:fontFamily="@font/bold"
android:text="Hello Again!"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField1"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:hint="Email Address"
android:textColorHint="@color/black"
app:boxCornerRadiusBottomEnd="12dp"
app:boxCornerRadiusBottomStart="12dp"
app:boxCornerRadiusTopEnd="12dp"
app:boxCornerRadiusTopStart="12dp"
app:boxStrokeColor="@color/black"
app:layout_constraintBottom_toTopOf="@+id/txtPasswordL"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginTitle"
app:startIconDrawable="@drawable/ic_email"
app:startIconTint="@color/black">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edEmailId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/regular"
android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/txtPasswordL"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="@dimen/margin_8dp"
android:layout_marginEnd="16dp"
android:hint="Password"
android:textColorHint="@color/black"
app:boxCornerRadiusBottomEnd="12dp"
app:boxCornerRadiusBottomStart="12dp"
app:boxCornerRadiusTopEnd="12dp"
app:boxCornerRadiusTopStart="12dp"
app:boxStrokeColor="@color/black"
app:endIconMode="password_toggle"
app:errorEnabled="true"
app:errorIconDrawable="@null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textField1"
app:passwordToggleTint="@color/black"
app:startIconDrawable="@drawable/ic_password"
app:startIconTint="@color/black">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/regular"
android:inputType="textPassword"
android:textColor="@color/black" />
</com.google.android.material.textfield.TextInputLayout>

<LinearLayout
android:id="@+id/lin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
app:layout_constraintTop_toBottomOf="@+id/txtPasswordL">

<TextView
android:id="@+id/textResetPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:fontFamily="@font/bold"
android:foreground="?android:selectableItemBackgroundBorderless"
android:text="Forgot Password"
android:textColor="@color/black"
android:textSize="16dp"
android:textStyle="bold" />
</LinearLayout>

<Button
android:id="@+id/signInBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:backgroundTint="@color/black"
android:padding="12dp"
android:text="Log In"
android:textAllCaps="false"
android:textSize="16sp"
app:cornerRadius="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/lin2" />

<ProgressBar
android:id="@+id/loginProgressBar"
android:layout_width="36dp"
android:layout_height="36dp"
android:indeterminateTint="@color/white"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/signInBtn"
app:layout_constraintEnd_toEndOf="@+id/signInBtn"
app:layout_constraintStart_toStartOf="@+id/signInBtn"
app:layout_constraintTop_toTopOf="@+id/signInBtn" />

<RelativeLayout
android:id="@+id/log"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/signInBtn">

<TextView
android:id="@+id/alreadyTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="5dp"
android:text="Already have an account?"
android:textColor="@color/black"
android:textSize="15sp" />

<TextView
android:id="@+id/createAccBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginStart="5dp"
android:layout_toEndOf="@+id/alreadyTV"
android:fontFamily="@font/bold"
android:foreground="?android:selectableItemBackgroundBorderless"
android:text="Register"
android:textColor="@color/black"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>
</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

//fragment_forgot.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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="match_parent"
android:background="@color/white"
android:fillViewport="true">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> 
<View
android:id="@+id/bg_top_header"
android:layout_width="0dp"
android:layout_height="230dp"
android:background="@drawable/bg_gradient"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> 
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:fontFamily="@font/bold"
android:text="Forgot Password?"
android:textColor="@color/white"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /> 
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_constraintTop_toBottomOf="@id/tvTitle">

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

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp">

<TextView
android:id="@+id/forgotTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:fontFamily="@font/bold"
android:text="Reset Password"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="@font/regular"
android:padding="16dp"
android:text="Don't worry! Please enter the email address linked with your account"
android:textAlignment="center"
android:textColor="#757575"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/forgotTitle" />

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField1"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hint="Email Address"
android:textColorHint="@color/black"
app:boxCornerRadiusBottomEnd="12dp"
app:boxCornerRadiusBottomStart="12dp"
app:boxCornerRadiusTopEnd="12dp"
app:boxCornerRadiusTopStart="12dp"
app:boxStrokeColor="@color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
app:startIconDrawable="@drawable/ic_email"
app:startIconTint="@color/black">

<com.google.android.material.textfield.TextInputEditText
android:id="@+id/edEmailId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/regular"
android:inputType="textEmailAddress"
android:textColor="@color/black" />

</com.google.android.material.textfield.TextInputLayout>

<Button
android:id="@+id/resetBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:backgroundTint="@color/black"
android:padding="12dp"
android:text="Reset Password"
android:textAllCaps="false"
android:textSize="16sp"
app:cornerRadius="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textField1" />

<ProgressBar
android:id="@+id/forgotProgressBar"
android:layout_width="36dp"
android:layout_height="36dp"
android:indeterminateTint="@color/white"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@+id/resetBtn"
app:layout_constraintEnd_toEndOf="@+id/resetBtn"
app:layout_constraintStart_toStartOf="@+id/resetBtn"
app:layout_constraintTop_toTopOf="@+id/resetBtn" />

</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
Navigation Fix: Directing Users to Auth or Main Screens3:12
Connect Register UI with Fragment Logic4:07
Connect Login UI with Fragment Logic5:51
Connect Forgot UI with Fragment Logic3:58
Toolbar and Navigation Drawer UI Design - MainFragment2:51

Implementing Navigation Drawer with Fragment Navigation3:45
Display Username in Navigation Drawer3:12
Understanding JSON Structure & Importing to Firebase Realtime Database1:43
Fetch Banner From Realtime DB in MainFragment16:15
Fetch Brand From Realtime DB in MainFragment9:34
Fetch Products From Realtime DB in MainFragment10:22
Fixing Navigation Issue From any Item(Banner, Brand, Product)1:31
Fixing UI Issue - Adding ProgressBar in MainFragment3:30

Requirements

Basic understanding of Android app development and Kotlin programming.
Android Studio installed on your computer.
A computer or laptop with internet access.
No prior e-commerce app development experience required — we'll build everything step by step.
Willingness to learn and build real-world projects.
Follow Course in order to build your own eCommerce app

Description

Welcome to LaceItUp!
In this course, you'll learn how to build a fully functional native Android e-commerce app for ordering shoes, clothes, or any type of product — using Kotlin, Firebase, RoomDB, Single Activity architecture, and MVVM pattern.

We’ll take a project-based, hands-on approach, where you’ll build the app from scratch. Whether you're a beginner Android developer or an entrepreneur looking to launch your own shopping app, this course will guide you through every essential step.

By the end of this course, you’ll have your own professional, customizable e-commerce app ready for deployment — perfect for any product category, not just shoes!

What you’ll build:

A beautiful, responsive native Android app built with Kotlin
Product listing with images, pricing, and details
Add to Cart functionality and an order placement system
Real-time data management using Firebase Realtime Database
Local order storage with RoomDB for offline support
A clean, modern UI designed with XML layouts and Material Design principles
Order History section to track customer purchases
Razorpay Payment Gateway integration for live, secure online payments
A dedicated Admin App to:
- Add and update products dynamically
- Manage order status (Confirmed, Shipped, Delivered, etc.)
- Handle bill generation and shipping updates

Why take this course?

Learn by doing: Build a complete, real-world Android app project — not just isolated code snippets.
Reusable framework: Easily adapt this project to sell clothes, accessories, or any kind of product.
Boost your developer portfolio: Showcase a professional e-commerce app to strengthen your Android job or freelance opportunities.
Perfect for freelancers and small business owners: Offer Android app development services with confidence or build apps for your own business.

No prior e-commerce app experience required — just a basic understanding of Kotlin and Android Studio. We’ll build everything together from scratch.

Who this course is for:

Android developers and Kotlin learners who want to build a complete real-world e-commerce app project.
Freelancers and entrepreneurs looking to develop their own shopping app for selling shoes, clothes, or any products online.
Students and hobbyists interested in learning practical Android development through a hands-on project.
Anyone who wants to start a career in mobile app development by adding a full e-commerce app to their portfolio.

E-Commerce App: Shoe Ordering App (Kotlin, Firebase, MVVM)

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 12min

Authentication Flow8 lectures • 36min

Home Screen Implementation8 lectures • 50min

Sale, Brand, Product Detail Screen Implementation4 lectures • 23min

Shopping Cart Feature Implementation2 lectures • 15min

Checkout Screen Feature Implementation Using RazorPay Payment Gateway1 lecture • 17min

MainFragment Issue With Related Screen Features3 lectures • 7min

Search Feature Implementation1 lecture • 11min

Fixing Bottom Navigation Issue1 lecture • 3min

Profile Screen Implementation4 lectures • 31min

Requirements

Description

Who this course is for: