Developing an E-Commerce App with Cart and Product Details

Course: Android App Development

Topic: Developing an E-Commerce App with Cart and Product Details

Course Link: Android App Development Course

Demo Link: Register for Course Demo

Website: JustAcademy

1. Introduction to E-Commerce App Development

An e-commerce application is a mobile application that allows users to browse products, view detailed product information, add products to a shopping cart, update quantities, calculate totals, and proceed toward checkout. Android e-commerce applications provide a convenient shopping experience through an intuitive interface and organized product information.

In this project, we develop an Android shopping application that demonstrates essential e-commerce features, including product listing, product details, cart management, price calculations, and navigation between screens. The application can initially use sample product data and later be extended to retrieve products from an online API or database.

The project is useful for learning Android UI development, Kotlin programming, RecyclerView, data models, event handling, application architecture, and local data persistence.

Learning Objectives

• Understand the basic architecture of an Android e-commerce application.
• Create product listing and product details screens.
• Display product images, names, prices, descriptions, and availability.
• Implement Add to Cart functionality.
• Increase or decrease product quantities in the cart.
• Calculate item subtotals, cart totals, discounts, and delivery charges.
• Maintain cart data while navigating between screens.
• Understand how to persist cart information using local storage.
• Learn testing, debugging, and security practices for shopping applications.

2. Understanding the Main Components of an E-Commerce App

A basic shopping application contains multiple connected components. Each component has a specific responsibility and communicates with other components to create a complete shopping workflow.

3. Choosing the Android Development Technologies

The application can be developed using Android Studio and Kotlin. XML layouts with Activities or Fragments are suitable for a traditional Android project, while Jetpack Compose is an alternative for building interfaces declaratively.

Android's ViewModel architecture helps retain screen state during configuration changes, while Room provides structured local persistence when cart information needs to survive app restarts. ViewModel documentation and Room database documentation provide additional implementation guidance.

4. Planning the Application Structure

Before writing code, identify the screens, data models, and user interactions required for the shopping workflow.

Suggested Screens

1. Home Screen: Displays a welcome message, categories, and featured products.
2. Product Listing Screen: Shows products using a grid or vertical list.
3. Product Details Screen: Displays information about one selected product.
4. Cart Screen: Shows selected items, quantities, and calculated totals.
5. Checkout Screen: Collects delivery information and summarizes the order.
6. Order Confirmation Screen: Displays the result after a successful order response.

Example Navigation Flow

Home Screen
    |
    v
Product Listing
    |
    v
Product Details
    |
    | Add to Cart
    v
Shopping Cart
    |
    | Proceed to Checkout
    v
Checkout Screen
    |
    v
Order Confirmation

For the initial project, focus on product browsing, product details, and cart management. Checkout and payment can be added after the main shopping functionality works correctly.

5. Creating the Android Project

Step 1: Open Android Studio

1. Launch Android Studio.
2. Select the option to create a new project.
3. Choose an appropriate Activity template.
4. Enter a project name such as ShoppingApp.
5. Select Kotlin as the programming language.
6. Choose a suitable minimum Android SDK based on the intended audience and library requirements.
7. Finish creating the project and wait for Gradle synchronization.

Step 2: Organize the Project

A clean package structure makes the application easier to maintain as new features are introduced.

com.example.shoppingapp
|
|-- data
|   |-- model
|   |-- local
|   |-- remote
|   |-- repository
|
|-- ui
|   |-- home
|   |-- products
|   |-- details
|   |-- cart
|   |-- checkout
|
|-- viewmodel
|
|-- utils

The exact structure depends on the app's complexity. A small learning project can start with fewer packages and be refactored as it grows.

6. Designing the Product Data Model

A product model represents one item available for purchase. It should contain the information needed to display the product, identify it uniquely, and calculate the cart amount.

Example Product Model in Kotlin

data class Product(
    val id: String,
    val name: String,
    val description: String,
    val pricePaise: Long,
    val imageUrl: String,
    val category: String,
    val stockQuantity: Int,
    val discountPercent: Int = 0
)

In this example, the price is stored in paise rather than a floating-point number. Using integer minor currency units helps avoid common floating-point rounding problems in monetary calculations.

Example Product Data

val products = listOf(
    Product(
        id = "P101",
        name = "Wireless Headphones",
        description = "Comfortable headphones for everyday use.",
        pricePaise = 249900,
        imageUrl = "",
        category = "Electronics",
        stockQuantity = 12,
        discountPercent = 10
    ),
    Product(
        id = "P102",
        name = "Smart Watch",
        description = "A smartwatch with activity tracking features.",
        pricePaise = 399900,
        imageUrl = "",
        category = "Accessories",
        stockQuantity = 8
    )
)

These are sample values for demonstration. A production application should obtain product prices, stock levels, and discounts from a trusted backend rather than relying on values supplied by the mobile client.

7. Building the Product Listing Screen

The product listing screen displays multiple products so that users can browse and select items. A grid layout is often suitable for shopping applications because it makes product images and prices easy to compare.

Information to Display

• Product image or placeholder.
• Product name.
• Current selling price.
• Original price, when a discount applies.
• Discount label, if applicable.
• Availability or stock status.
• Button or clickable area to open product details.

Using RecyclerView

RecyclerView is useful for displaying large or changing collections of items. It reuses item views as the user scrolls, reducing unnecessary view creation.

A typical implementation includes the following components:

1. Item layout: Defines the image, product name, price, and action area.
2. Adapter: Connects product data to item views.
3. ViewHolder: Holds references to the views in each product item.
4. LayoutManager: Determines whether products appear in a grid or list.
5. Click listener: Opens the details screen for the selected product.

Product Click Handling Example

fun onProductSelected(product: Product) {
    // Navigate to the product details screen.
    // Pass the product ID rather than trusting
    // a client-supplied price during checkout.
    openProductDetails(product.id)
}

The function openProductDetails() represents navigation logic that must be implemented using the project's Activity, Fragment, Navigation Component, or Compose navigation setup.

8. Developing the Product Details Screen

The product details screen gives users enough information to decide whether to add an item to their cart.

Important UI Elements

• Large product image with appropriate scaling.
• Product name and category.
• Detailed product description.
• Current selling price.
• Discount information, if available.
• Stock availability.
• Quantity selector, if supported.
• Add to Cart button.
• Optional rating, specifications, and delivery information.

Product Details Layout Example

<ScrollView>
    <LinearLayout
        android:orientation="vertical"
        android:padding="16dp">

        <ImageView
            android:id="@+id/productImage"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:contentDescription="Product image"
            android:scaleType="centerInside" />

        <TextView
            android:id="@+id/productName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="22sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/productPrice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/productDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/addToCartButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Add to Cart" />

    </LinearLayout>
</ScrollView>

This is a simplified layout illustration. Add the required namespace declarations and parent attributes when placing it in a complete XML layout file.

Handling Product Availability

Before enabling the Add to Cart button, check whether the product is available. If stock is zero, show an out-of-stock message and disable the action. The final availability check must also occur on the backend during order placement because stock may change after the product details screen loads.

9. Understanding the Shopping Cart

The shopping cart temporarily stores the products a user intends to purchase. Each cart entry contains a product reference and a selected quantity.

Cart Data Model

data class CartItem(
    val product: Product,
    val quantity: Int
)

A product's identity should be based on its unique ID, not its name. Two products can have similar names but different identifiers, prices, variants, or specifications.

Core Cart Operations

10. Implementing Add to Cart Functionality

When a user taps Add to Cart, the app should identify the selected product, verify that it is available, and update the cart state. If the product already exists in the cart, the application can increase its quantity instead of creating a duplicate row.

Cart Manager Example

class CartManager {
    private val items = linkedMapOf<String, CartItem>()

    fun addProduct(product: Product): Boolean {
        val existing = items[product.id]
        val currentQuantity = existing?.quantity ?: 0

        if (product.stockQuantity <= currentQuantity) {
            return false
        }

        items[product.id] = CartItem(
            product = product,
            quantity = currentQuantity + 1
        )
        return true
    }

    fun getItems(): List<CartItem> {
        return items.values.toList()
    }

    fun removeProduct(productId: String) {
        items.remove(productId)
    }

    fun clearCart() {
        items.clear()
    }
}

This example demonstrates the core idea in memory. The manager is not yet persistent or thread-safe, and it should not be treated as a complete production cart service. A real implementation should also handle concurrent updates, product refreshes, stock changes, and lifecycle-aware state observation.

Connecting the Button

addToCartButton.setOnClickListener {
    val added = cartManager.addProduct(selectedProduct)

    if (added) {
        showMessage("Product added to cart")
    } else {
        showMessage("Requested quantity is unavailable")
    }
}

The selectedProduct, cartManager, and showMessage() references must be provided by the surrounding screen implementation. In a production app, a ViewModel should usually coordinate the action and expose updated cart state to the UI.

11. Displaying Cart Items

The cart screen displays every selected item and gives users control over quantities before checkout.

Recommended Cart Item Layout

• Product thumbnail.
• Product name.
• Price per item.
• Decrease quantity button.
• Current quantity.
• Increase quantity button.
• Line subtotal.
• Remove item option.

Use RecyclerView for a traditional XML-based interface or a LazyColumn in Jetpack Compose. Keep each cart row reusable so that quantity changes can update only the relevant information when practical.

Quantity Update Logic

fun updateQuantity(
    item: CartItem,
    newQuantity: Int
): CartItem? {
    if (newQuantity <= 0) {
        return null
    }

    if (newQuantity > item.product.stockQuantity) {
        return item
    }

    return item.copy(quantity = newQuantity)
}

This helper returns null when the requested quantity is zero or lower, allowing the calling code to remove the item. It leaves the existing item unchanged when the requested quantity exceeds the currently known stock.

12. Calculating Cart Subtotals and Total Price

Price calculations are essential to a shopping application. The app must calculate each line subtotal, the total value of all products, any valid discounts, delivery fees, and the final amount.

Basic Formula

Line Subtotal = Unit Price × Quantity

Cart Subtotal = Sum of All Line Subtotals

Final Total = Cart Subtotal
            - Discount
            + Delivery Fee
            + Applicable Taxes

Kotlin Calculation Example

fun calculateSubtotal(items: List<CartItem>): Long {
    return items.sumOf { item ->
        item.product.pricePaise * item.quantity.toLong()
    }
}

This function assumes that the product price is already expressed in paise and that quantities and price values have been validated. For production systems, add overflow protection and ensure all monetary calculations use consistent currency and rounding rules.

Example Cart Calculation

The example delivery fee is illustrative. Actual delivery charges, taxes, and discounts depend on the store's business rules and customer location.

13. Managing Discounts and Product Prices

Some e-commerce applications display an original price and a discounted selling price. The interface should clearly distinguish the two values and avoid misleading calculations.

Discount Formula

Discount Amount = Original Price × Discount Percentage / 100

Selling Price = Original Price - Discount Amount

For currency calculations, define how fractional paise values are rounded. The backend should be authoritative for discount eligibility, coupon validation, tax, delivery fees, and the final order amount.

Important Validation Rules

• Discount percentages must be within the permitted range.
• Prices must not be negative.
• Unavailable products should not be purchasable.
• Cart quantities must be positive integers.
• Coupon codes must be validated by the backend.
• Displayed totals should be recalculated whenever cart contents change.

14. Maintaining Cart State Across Screens

The cart must remain consistent when users move from product details to the cart and back. If each screen maintains an independent cart list, the displayed quantities and totals may become inconsistent.

A better approach is to keep cart operations in a shared state holder or repository. A ViewModel can expose the current cart contents and calculated totals to the UI. Activities, Fragments, or Compose screens can observe the state and update their interfaces accordingly.

Recommended Data Flow

User Action
    |
    v
Screen / UI
    |
    v
ViewModel
    |
    v
Cart Repository
    |
    +------> Local Database
    |
    +------> Backend API (if required)
    |
    v
Updated Cart State
    |
    v
Cart UI Refresh

This separation makes the app easier to test and maintain. Android's architecture guidance recommends keeping UI state and data operations in appropriate layers rather than placing all logic directly in Activities or UI components.

15. Saving Cart Data Locally

An in-memory cart is cleared when the application process is terminated. To restore the cart after reopening the app, store the relevant data locally or synchronize it with a backend.

Storage Options

Suggested Room Cart Entity

@Entity(tableName = "cart_items")
data class CartEntity(
    @PrimaryKey
    val productId: String,
    val quantity: Int
)

The example stores the product ID and quantity. The application can retrieve current product information from its local product cache or backend. If a snapshot of the price is stored for display purposes, the checkout process must still verify the current authoritative price on the server.

16. Loading Product Data from an API

Sample data is sufficient for the first prototype, but a real shopping app normally retrieves product information from a backend service. The backend can provide product IDs, names, descriptions, prices, images, categories, and availability.

Typical API Workflow

1. Send an HTTP request to the product endpoint.
2. Check the response status.
3. Parse the response into Kotlin data models.
4. Expose loading, success, and error states to the UI.
5. Display the returned products.
6. Refresh or cache data according to the application's requirements.

Example API Response

{
  "id": "P101",
  "name": "Wireless Headphones",
  "description": "Comfortable everyday headphones",
  "pricePaise": 249900,
  "imageUrl": "https://example.com/images/headphones.jpg",
  "stockQuantity": 12
}

This JSON is an illustrative response, not a live endpoint. The application must use the actual schema and endpoint provided by its backend developer.

17. Handling Product Images

Product images are an important part of the shopping experience. Images should load efficiently, maintain their aspect ratio, and not block the main thread while downloading.

• Use an image-loading library such as Coil or Glide for remote images.
• Display a placeholder while an image loads.
• Show a fallback image if the request fails.
• Use appropriately sized images to reduce bandwidth.
• Provide meaningful content descriptions where appropriate.
• Load images over HTTPS.
• Consider caching images to improve repeat browsing.

Do not assume that every product has a valid image URL. The UI should remain usable when an image is missing or unavailable.

18. Implementing Search, Categories, and Sorting

After the basic product list is working, improve product discovery with search and filtering features.

Search

Allow users to search by product name or supported keywords. Trim unnecessary spaces and define whether matching should be case-insensitive.

Categories

Group products into categories such as electronics, clothing, books, and accessories. Selecting a category should update the visible product collection.

Sorting

• Price: low to high.
• Price: high to low.
• Name: alphabetical order.
• Newest products first, if supported by the data.

For large catalogues, filtering and sorting may be handled by the backend to avoid downloading an unnecessarily large product collection.

19. Checkout and Order Preparation

The checkout screen collects the information required to create an order. It typically includes the delivery address, selected items, quantities, delivery method, applicable discounts, and the final payable amount.

Checkout Workflow

1. Validate that the cart is not empty.
2. Collect and validate required delivery information.
3. Submit product IDs, quantities, and any permitted coupon code to the backend.
4. Let the backend verify current prices, stock, taxes, delivery fees, and discounts.
5. Display the confirmed order summary returned by the server.
6. Proceed through the supported payment process, if implemented.
7. Show confirmation only after the backend confirms successful order creation.

The mobile client must not be trusted to determine the final payable amount. A user can modify client-side data, so the server must independently calculate the order total and validate stock and discounts.

20. Payment and Security Considerations

Payment processing should be added only through an appropriate payment provider and a secure backend integration. Do not store raw card numbers, card verification codes, or other sensitive payment credentials in the shopping cart or local application database.

• Use HTTPS for network communication.
• Keep secret API credentials and private signing keys off the mobile client.
• Validate prices and stock on the server.
• Authenticate protected account and order endpoints.
• Validate user input on both client and server.
• Use the payment provider's approved SDK or hosted payment flow.
• Verify payment status through trusted server-side mechanisms.
• Prevent duplicate order creation using suitable idempotency controls.
• Request only the permissions required by the app.

21. Error Handling and User Feedback

A reliable shopping application must provide clear feedback when something goes wrong. Users should understand whether a product was added, a quantity was changed, or an operation failed.

Avoid showing raw exception messages to users. Log appropriate diagnostic details for development while keeping sensitive information out of logs.

22. Improving the User Interface

A good e-commerce interface makes product discovery and purchasing straightforward. Design should prioritize readability, predictable navigation, and responsive feedback.

• Use consistent spacing, typography, and button styles.
• Make product prices and important actions easy to find.
• Provide visible cart item counts when useful.
• Use clear empty-cart and loading states.
• Support different screen sizes and display densities.
• Ensure buttons have accessible labels and adequate touch targets.
• Provide content descriptions for meaningful product images.
• Do not rely on colour alone to communicate errors or availability.
• Show a clear confirmation before destructive actions when necessary.

23. Testing the E-Commerce Application

Testing verifies that product browsing, cart updates, and price calculations work as expected. Test the business logic independently from the UI and then test the complete user journey.

Functional Test Cases

Unit Testing Price Calculations

import org.junit.Assert.assertEquals
import org.junit.Test

class CartCalculationTest {

    @Test
    fun subtotalIsCalculatedCorrectly() {
        val product = Product(
            id = "P101",
            name = "Headphones",
            description = "Sample product",
            pricePaise = 250000,
            imageUrl = "",
            category = "Electronics",
            stockQuantity = 10
        )

        val items = listOf(
            CartItem(product = product, quantity = 2)
        )

        assertEquals(
            500000L,
            calculateSubtotal(items)
        )
    }
}

This test checks a subtotal of ₹5,000, represented as 500,000 paise. The test assumes the previously defined Product, CartItem, and calculateSubtotal() declarations are available to the test source set.

24. Common Development Problems and Solutions

25. Performance and Maintainability Best Practices

• Use RecyclerView or LazyColumn for efficient scrolling lists.
• Load remote data asynchronously rather than blocking the main thread.
• Use a repository to organize access to local and remote data.
• Keep business logic out of large Activity classes.
• Expose observable UI state through a ViewModel.
• Use stable IDs and appropriate list-diffing strategies when updating product collections.
• Cache images and, where suitable, product data.
• Avoid unnecessary database and network requests.
• Test price calculations and cart operations independently.
• Keep product, inventory, and order validation authoritative on the backend.
• Use logging carefully and never log sensitive payment information.

26. Practical Project Exercises

Exercise 1: Product Catalogue

Create a screen displaying at least ten sample products. Each product should include an image or placeholder, name, price, and category. Add navigation to a product details screen.

Exercise 2: Product Details

Create a details screen with a larger image, description, price, stock availability, and Add to Cart button. Handle missing product information gracefully.

Exercise 3: Shopping Cart

Implement adding, removing, increasing, and decreasing product quantities. Display the current quantity and line subtotal for every item.

Exercise 4: Cart Totals

Calculate the subtotal, discount, delivery fee, and final total using consistent currency units. Add tests for empty carts, multiple products, and quantity changes.

Exercise 5: Local Persistence

Store cart entries in a Room database. Reopen the app and confirm that the cart is restored correctly.

Exercise 6: Online Catalogue

Connect the product listing to a test API. Add loading indicators, error messages, retry functionality, and image placeholders.

Exercise 7: Final Shopping App

Combine product browsing, details, cart management, search, categories, and a checkout summary into a single Android application. Document which features use local sample data and which rely on a backend.

27. Interview Questions and Answers

Q1. What is an e-commerce Android application?

Answer: It is a mobile application that allows users to browse products, view details, add items to a cart, and complete shopping-related tasks such as checkout and order tracking.

Q2. What is the purpose of a product data model?

Answer: A product model represents product information in a structured format, such as its ID, name, price, image, description, category, and stock quantity.

Q3. Why is RecyclerView useful for product lists?

Answer: RecyclerView reuses item views while scrolling, helping display large collections efficiently.

Q4. What is a shopping cart?

Answer: A shopping cart stores selected products and their quantities before an order is placed.

Q5. How should duplicate products be handled in a cart?

Answer: The application should identify products using a stable unique ID and either increase the existing quantity or follow the store's chosen variant-specific cart rules.

Q6. How is the cart subtotal calculated?

Answer: Multiply each item's unit price by its quantity and sum the resulting line subtotals.

Q7. Why use integer minor units for prices?

Answer: Integer minor units, such as paise, help avoid floating-point precision problems during monetary calculations.

Q8. Why is ViewModel useful in Android development?

Answer: ViewModel holds screen-related state and business logic, helping state survive configuration changes and separating logic from UI components.

Q9. How can cart contents be preserved after an app restart?

Answer: Store cart entries in a local database such as Room or synchronize them with a backend for account-based carts.

Q10. Why should the server verify prices and stock?

Answer: Client-side data can be changed and inventory can change at any time. The backend must validate the current price, stock, discounts, and final order amount.

Q11. What happens when a product becomes unavailable?

Answer: The app should notify the user, refresh availability, and prevent checkout of invalid items until the cart is updated.

Q12. How should payment information be handled?

Answer: Use a trusted payment provider and secure backend integration. Do not store raw card credentials in the cart or ordinary local app storage.

Q13. What is the purpose of a repository?

Answer: A repository separates data access from UI logic and can coordinate local storage, remote services, and caching.

Q14. What test cases are important for a cart?

Answer: Test adding items, duplicate additions, quantity changes, removal, empty carts, stock limits, price calculations, persistence, and server-side validation.

28. Quick Revision Checklist

• Understand the architecture and navigation flow of the shopping app.
• Create a structured Product data model.
• Display products in a grid or list.
• Build a product details screen.
• Implement Add to Cart and remove-item operations.
• Support quantity changes and stock limits.
• Calculate subtotals and final totals correctly.
• Share cart state between screens.
• Persist cart contents when required.
• Handle loading, errors, missing images, and unavailable products.
• Test cart operations and monetary calculations.
• Validate prices, inventory, discounts, and orders on the backend.

29. Conclusion

Developing an e-commerce app with cart and product details is a practical Android project that combines interface design, Kotlin data models, list rendering, navigation, state management, price calculations, and local or remote data storage. A well-designed application allows users to browse products, inspect details, manage cart quantities, and review an accurate order summary.

Begin with a small working catalogue and an in-memory cart, then add persistent storage, API integration, robust validation, and checkout functionality. Keep the interface responsive, test calculations carefully, and ensure that the backend remains responsible for authoritative pricing, stock, and order confirmation.

To explore Android app development training, visit JustAcademy's Android App Development Course, register through the course demo registration page, or visit the JustAcademy homepage.