SSton Cricket App - Complete Android Development Guide for Freshers

Build a professional e-commerce cricket equipment mobile app using Android Jetpack Compose - the modern UI toolkit for Android development. This project will teach you everything from basic setup to advanced features like navigation, state management, and custom UI components.

What You'll Learn

Jetpack Compose fundamentals and modern Android development
Material Design 3 implementation
Navigation Component for multi-screen apps
State Management in Compose
Custom UI Components and theming
E-commerce App Architecture
Real-world Android development practices

Prerequisites

Basic knowledge of Kotlin programming language
Android Studio installed (latest version)
Understanding of Object-Oriented Programming concepts
Familiarity with Git version control (recommended)

Step-by-Step Development Guide

Phase 1: Project Setup & Foundation (Week 1)

1.1 Create New Android Project

// In Android Studio:
// File → New → New Project
// Choose "Empty Compose Activity"
// Name: "SStonCricket"
// Package: "com.sstoncricket.app"
// Language: Kotlin
// Minimum SDK: API 24 (Android 7.0)

1.2 Add Dependencies

// In app/build.gradle
dependencies {
implementation 'androidx.compose.ui:ui:1.5.4'
implementation 'androidx.compose.ui:ui-tooling-preview:1.5.4'
implementation 'androidx.compose.material3:material3:1.1.2'
implementation 'androidx.navigation:navigation-compose:2.7.4'
implementation 'androidx.compose.material:material-icons-extended:1.5.4'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0'
}

1.3 Project Structure Setup

app/src/main/java/com/sstoncricket/app/
-> MainActivity.kt
-> ui/
? -> theme/
? ? -> Color.kt
? ? -> Theme.kt
? ? ??? Type.kt
? ??? screens/
? ? ??? HomeScreen.kt
? ? ??? ProductsScreen.kt
? ? ??? PlayersScreen.kt
? ? ??? CartScreen.kt
? ? ??? ProfileScreen.kt
? ??? components/
? ??? ProductCard.kt
? ??? PlayerCard.kt
? ??? CustomComponents.kt
??? data/
? ??? models/
? ? ??? Product.kt
? ? ??? Player.kt
? ? ??? Category.kt
? ??? repository/
? ??? SampleData.kt
??? navigation/
??? NavigationGraph.kt

2. UI Theme & Design System (Week 2)

2.1 Create Color Scheme

// ui/theme/Color.kt
val SStonGreen = Color(0xFF1B5E20)
val SStonGold = Color(0xFFFFD700)
val LightGray = Color(0xFFF5F5F5)
val DarkGray = Color(0xFF424242)

val LightColorScheme = lightColorScheme(
primary = SStonGreen,
onPrimary = Color.White,
secondary = SStonGold,
onSecondary = Color.Black,
background = LightGray,
surface = Color.White
)

2.2 Typography Setup

// ui/theme/Type.kt
val Typography = Typography(
headlineLarge = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 28.sp
),
titleLarge = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 22.sp
),
bodyLarge = TextStyle(
fontSize = 16.sp,
lineHeight = 24.sp
)
)

2.3 Custom Theme

// ui/theme/Theme.kt
@Composable
fun SStonCricketTheme(
content: @Composable () -> Unit
) {
MaterialTheme(
colorScheme = LightColorScheme,
typography = Typography,
content = content
)
}

Data Models & Sample Data (Week 3)

3.1 Create Data Models

// data/models/Product.kt
data class Product(
val id: String,
val name: String,
val price: Int,
val originalPrice: Int,
val rating: Int,
val reviewCount: Int,
val isOutOfStock: Boolean = false,
val category: String = "General",
val description: String = "",
val imageUrl: String = ""
)

// data/models/Player.kt
data class Player(
val id: String,
val name: String,
val team: String,
val role: String,
val imageUrl: String = ""
)

// data/models/Category.kt
data class Category(
val id: String,
val name: String,
val itemCount: Int,
val icon: ImageVector
)

3.2 Sample Data Repository

// data/repository/SampleData.kt
object SampleData {
fun getBestsellerProducts(): List {
return listOf(
Product(
id = "1",
name = "SS Limited Edition Cricket Kit Bag",
price = 4999,
originalPrice = 5999,
rating = 5,
reviewCount = 12,
category = "Bags"
),
// Add more products...
)
}

fun getFeaturedPlayers(): List {
return listOf(
Player(
id = "1",
name = "Surya Kumar Yadav",
team = "India",
role = "Batsman"
),
// Add more players...
)
}
}

Navigation Setup (Week 4)

4.1 Navigation Graph

// navigation/NavigationGraph.kt
@Composable
fun NavigationGraph(navController: NavHostController) {
NavHost(
navController = navController,
startDestination = "home"
) {
composable("home") {
HomeScreen(navController)
}
composable("products") {
ProductsScreen(navController)
}
composable("players") {
PlayersScreen(navController)
}
composable("cart") {
CartScreen(navController)
}
composable("profile") {
ProfileScreen(navController)
}
composable("product_detail/{productId}") { backStackEntry ->
val productId = backStackEntry.arguments?.getString("productId")
ProductDetailScreen(navController, productId ?: "1")
}
}
}

4.2 Bottom Navigation

// ui/components/BottomNavigation.kt
@Composable
fun BottomNavigationBar(navController: NavController) {
val items = listOf(
NavigationItem("home", "Home", Icons.Default.Home),
NavigationItem("products", "Products", Icons.Default.Category),
NavigationItem("players", "Players", Icons.Default.Person),
NavigationItem("cart", "Cart", Icons.Default.ShoppingCart),
NavigationItem("profile", "Profile", Icons.Default.AccountCircle)
)

NavigationBar(
containerColor = SStonGreen
) {
items.forEach { item ->
NavigationBarItem(
icon = { Icon(item.icon, contentDescription = item.label) },
label = { Text(item.label) },
selected = false,
onClick = { navController.navigate(item.route) }
)
}
}
}

Screen Development (Weeks 5-8)

5.1 Home Screen Development

// ui/screens/HomeScreen.kt
@Composable
fun HomeScreen(navController: NavController) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(LightGray)
) {
item { HeroSection() }
item { BestsellerSection(navController) }
item { PlayerEndorsementSection() }
item { CategoriesSection(navController) }
}
}

@Composable
fun HeroSection() {
Box(
modifier = Modifier
.fillMaxWidth()
.height(250.dp)
.background(
brush = Brush.verticalGradient(
colors = listOf(SStonGreen, Color(0xFF2E7D32))
)
)
) {
// Hero content implementation
}
}

5.2 Custom Components

// ui/components/ProductCard.kt
@Composable
fun ProductCard(
product: Product,
navController: NavController,
modifier: Modifier = Modifier
) {
Card(
modifier = modifier
.width(180.dp)
.height(280.dp)
.clickable {
navController.navigate("product_detail/${product.id}")
},
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(12.dp)
) {
// Product image placeholder
ProductImage(product.imageUrl)

// Product details
ProductInfo(product)

// Price and actions
ProductActions(product)
}
}
}

State Management & Advanced Features (Weeks 9-10)

6.1 ViewModel Implementation

// ui/viewmodels/ProductViewModel.kt
class ProductViewModel : ViewModel() {
private val _products = mutableStateOf>(emptyList())
val products: State> = _products

private val _selectedCategory = mutableStateOf("All")
val selectedCategory: State = _selectedCategory

init {
loadProducts()
}

fun loadProducts() {
_products.value = SampleData.getBestsellerProducts()
}

fun filterByCategory(category: String) {
_selectedCategory.value = category
// Implement filtering logic
}
}

6.2 Shopping Cart State

// ui/viewmodels/CartViewModel.kt
class CartViewModel : ViewModel() {
private val _cartItems = mutableStateListOf()
val cartItems: List = _cartItems

fun addToCart(product: Product, quantity: Int = 1) {
val existingItem = _cartItems.find { it.productId == product.id }
if (existingItem != null) {
val index = _cartItems.indexOf(existingItem)
_cartItems[index] = existingItem.copy(
quantity = existingItem.quantity + quantity
)
} else {
_cartItems.add(
CartItem(
productId = product.id,
name = product.name,
price = product.price,
quantity = quantity
)
)
}
}

fun removeFromCart(productId: String) {
_cartItems.removeIf { it.productId == productId }
}
}