SMART BANKING · SLICED SIMPLE
// VISUAL STORYBOARD · ANDROID STUDIO · KOTLIN + XML
The name M3LON is bold, modern and memorable — inspired by our group name The 5 Watermelons. The stylised '3' replacing 'E' gives it a tech-forward, app-native aesthetic — immediately signalling a smart, modern financial tool built for the digital generation.
The icon features a watermelon slice styled as a pie chart — red segments represent expense categories, the green rind represents savings. Dual symbolism: distinctive and instantly communicative of the app's financial purpose.
M3LON is an Android personal finance application designed to make budgeting approachable, visual, and enjoyable for users of all financial backgrounds. The app allows users to:
M3LON follows Material Design 3 with a teal-and-coral colour palette. Dark background #101010, teal brand #4ABFAA, coral accent #E8635A, gold gamification #E8B84B. Frame size: 360×800px (Android standard). Fonts: Syne (headings) + DM Sans (body). Each screen is clean, information-dense but not cluttered, and action-oriented.
Handler(Looper.getMainLooper()).postDelayed({
startActivity(Intent(this,
LoginActivity::class.java))
finish()
}, 2000)
etPassword.addTextChangedListener(
object : TextWatcher {
override fun onTextChanged(s: CharSequence?, ...) {
pwStrengthBar.progress = calcStrength(s.toString())
}
}
)
val user = User(name, email, username,
BCrypt.hashpw(password, BCrypt.gensalt()))
userDao.insert(user)
<FloatingActionButton android:id="@+id/fab" android:backgroundTint="@color/coral" app:srcCompat="@drawable/ic_add"/> <BottomNavigationView android:id="@+id/bottomNav" app:menu="@menu/bottom_nav"/>
@Entity(tableName = "expenses") data class Expense( @PrimaryKey(autoGenerate = true) val id: Int = 0, val amount: Double, val date: String, val category: String, val description: String, val receiptPath: String? = null )
dependencies {
implementation 'com.github.PhilJay:
MPAndroidChart:v3.1.0'
}
// settings.gradle
maven { url "https://jitpack.io" }
@Dao
interface BudgetDao {
@Upsert
suspend fun setBudget(goal: BudgetGoal)
@Query("SELECT * FROM budget_goals
WHERE category = :cat")
fun getBudget(cat: String): Flow<BudgetGoal>
}
object GamificationManager {
fun onExpenseLogged(db: AppDatabase) {
db.userDao().addXP(10)
db.userDao().incrementStreak()
checkBadges(db)
}
private fun checkBadges(db: AppDatabase) {
val u = db.userDao().getUser()
if (u.streak >= 7)
db.badgeDao().unlock("WEEK_WARRIOR")
if (u.xp >= 1000)
db.badgeDao().unlock("BUDGET_BOSS")
}
}
The M3LON app flow begins with simple onboarding — start at a welcome splash screen and either log in or register a new account. Once inside, you land on a central dashboard acting as your financial hub: showing total monthly budget, a "Safe to Spend" daily amount, and visual rings tracking spending per category like Food and Shopping.
From here, the process moves into active tracking — view a list of all expenses or tap the plus button to manually log new ones by entering amount, date, and category. The app automatically turns this data into easy-to-read charts and graphs in the insights section. To keep you motivated, a gamified system earns XP and unlocks badges for consistent tracking — turning budget management into a game with levels and daily streaks. Personalise the entire experience through settings: switch between light and dark modes, manage notifications, and set up automated receipt imports from your inbox.