196 lines
6.1 KiB
Markdown
196 lines
6.1 KiB
Markdown
# Kalkulator BMI
|
||
|
||
## 📱 Deskripsi Aplikasi
|
||
Aplikasi **BMI Calculator** (Body Mass Index Calculator) adalah aplikasi Android yang dibangun menggunakan Jetpack Compose untuk menghitung Indeks Massa Tubuh pengguna berdasarkan tinggi dan berat badan. Aplikasi ini mendukung dua sistem unit pengukuran: **Metric (kg/cm)** dan **Imperial (lbs/inches)**.
|
||
|
||
---
|
||
|
||
## 👨💻 Informasi Pengembang
|
||
- **NPM**: 202310715051
|
||
- **Nama**: Dendi Yogia Pratama
|
||
|
||
---
|
||
|
||
## 📚 Referensi
|
||
Petunjuk lebih detail dapat dibaca di:
|
||
https://docs.google.com/document/d/1iGiC0Bg3Bdcd2Maq45TYkCDUkZ5Ql51E/edit?rtpof=true
|
||
|
||
Starter dimodifikasi dan terinspirasi dari:
|
||
https://developer.android.com/codelabs/basic-android-compose-calculate-tip#0
|
||
|
||
---
|
||
Dibantu oleh [Claude AI](https://claude.ai):
|
||
-Untuk Mengatasi Nan
|
||
-Modifikasi Tampilan UI Dan UX
|
||
|
||
## 🔄 Changelog - Perubahan dari Awal sampai Akhir
|
||
|
||
### **Versi 0.5 - Setup Code**
|
||
- Memperbaiki Rumus Yang Digunakan Untuk Menghitung BMI Agar Lebih Akurat Di Kedua Sistem Unit
|
||
- Mengatasi Tulisan NAN Yang Muncul Ditampilan Sebelum Kalkulasi
|
||
|
||
### **Versi 1.0 - Initial Setup (Base Code)**
|
||
#### Fitur Awal:
|
||
- Setup project dengan Jetpack Compose
|
||
- Layout dasar dengan TextField untuk input
|
||
- Fungsi kalkulasi BMI sederhana
|
||
- Menggunakan sistem Metric (meter dan kg)
|
||
|
||
---
|
||
|
||
### **Versi 1.5 - Penambahan Unit System**
|
||
#### Perubahan:
|
||
- ✅ Menambahkan **Switch Toggle** untuk memilih sistem unit (USC/SI)
|
||
- ✅ Implementasi dua formula BMI:
|
||
- **SI Formula**: BMI = weight (kg) / height² (meters)
|
||
- **USC Formula**: BMI = 703 × weight (lbs) / height² (inches)
|
||
- ✅ Validasi input untuk kedua sistem unit
|
||
- ✅ Dynamic label pada input field sesuai sistem unit yang dipilih
|
||
|
||
---
|
||
|
||
### **Versi 2.0 - Perubahan Unit Metric**
|
||
#### Perubahan Major:
|
||
- ✅ **Mengubah unit tinggi dari meter ke centimeter (cm)**
|
||
- Alasan: Lebih mudah dipahami pengguna Indonesia
|
||
- Format baru: tinggi dalam **cm** (contoh: 170 cm)
|
||
- ✅ Update formula kalkulasi:
|
||
- Konversi cm ke meter: `heightInMeters = height / 100.0`
|
||
- BMI = weight / (heightInMeters²)
|
||
- ✅ Update validasi input:
|
||
- Minimum tinggi: 50 cm
|
||
- Maximum tinggi: 300 cm
|
||
|
||
---
|
||
|
||
### **Versi 3.0 - UI/UX Enhancement**
|
||
#### Perubahan UI/UX:
|
||
- ✅ **Modern Card Design** dengan shadow effects
|
||
- ✅ **Gradient Background** (Sky Blue ke White)
|
||
- ✅ **Custom Input Fields** dengan Card wrapper
|
||
- ✅ **Unit System Card** dengan design yang lebih menarik
|
||
- ✅ **Color-coded Results** berdasarkan kategori BMI:
|
||
- 🔵 Underweight - Light Blue
|
||
- 🔵 Normal - Sky Blue
|
||
- 🔵 Overweight - Medium Blue
|
||
- 🔵 Obese - Dark Blue
|
||
- ✅ **BMI Result Card** dengan:
|
||
- Display BMI value besar dan bold
|
||
- Badge kategori dengan emoji
|
||
- Deskripsi lengkap untuk setiap kategori
|
||
- Referensi range BMI WHO
|
||
- ✅ **Responsive Layout** dengan vertical scroll
|
||
- ✅ **Better Typography** dengan font weights dan sizing
|
||
|
||
---
|
||
|
||
### **Versi 4.0 - Blue Color Scheme Implementation**
|
||
#### Perubahan Tema:
|
||
- ✅ **Complete Blue Color Theme**
|
||
- Primary Color: Light Blue (#03A9F4)
|
||
- Secondary Color: Medium Blue (#0288D1)
|
||
- Background: Very Light Blue White (#F5FBFF)
|
||
- Accent: Sky Blue dan Navy Blue
|
||
- ✅ **Light Theme Colors**:
|
||
- Primary: Light Blue - warna utama aplikasi
|
||
- Container: Very Light Blue - untuk card backgrounds
|
||
- Surface: White - permukaan bersih
|
||
- ✅ **Dark Theme Colors**:
|
||
- Primary: Sky Blue - untuk dark mode
|
||
- Background: Very Dark Blue
|
||
- Surface: Deep Blue
|
||
- ✅ **Component Colors**:
|
||
- Button: Light Blue dengan shadow
|
||
- Input border: Light Blue saat focus
|
||
- Switch: Sky Blue theme
|
||
- Cards: Gradasi warna biru
|
||
|
||
---
|
||
|
||
## ✨ Fitur Aplikasi
|
||
|
||
### **1. Dual Unit System**
|
||
- 🌍 **Metric System**: Kilogram (kg) dan Centimeter (cm)
|
||
- 🇺🇸 **Imperial System**: Pounds (lbs) dan Inches (in)
|
||
- 🔄 Toggle switch untuk berpindah sistem
|
||
- 🔄 Auto-reset input saat ganti sistem
|
||
|
||
### **2. Input Validation**
|
||
#### Metric System:
|
||
- Tinggi: 50 - 300 cm
|
||
- Berat: 20 - 500 kg
|
||
|
||
#### Imperial System:
|
||
- Tinggi: 20 - 120 inches
|
||
- Berat: 44 - 1100 lbs
|
||
|
||
### **3. BMI Categories (WHO Standard)**
|
||
- **Underweight**: BMI < 18.5
|
||
- **Normal weight**: BMI 18.5 - 24.9
|
||
- **Overweight**: BMI 25.0 - 29.9
|
||
- **Obese**: BMI ≥ 30.0
|
||
|
||
### **4. Visual Features**
|
||
- 🎨 Gradient background dengan warna biru
|
||
- 💳 Card-based design untuk semua komponen
|
||
- 🌈 Color-coded results berdasarkan kategori
|
||
- 📊 BMI range reference dengan color indicators
|
||
- ✨ Shadow effects untuk depth visual
|
||
- 🔤 Modern typography dengan font weights
|
||
- 📱 Responsive dan scrollable layout
|
||
|
||
---
|
||
|
||
## 🛠️ Teknologi yang Digunakan
|
||
- **Kotlin** - Programming Language
|
||
- **Jetpack Compose** - Modern UI Toolkit
|
||
- **Material Design 3** - Design System
|
||
- **Android Studio** - IDE
|
||
|
||
---
|
||
|
||
## 📋 Struktur Kode
|
||
|
||
### **Data Class**
|
||
```kotlin
|
||
data class BMIResult(
|
||
val bmiValue: Double,
|
||
val category: String,
|
||
val isValid: Boolean = true,
|
||
val errorMessage: String = ""
|
||
)
|
||
```
|
||
|
||
### **Main Components**
|
||
1. **BMICalculatorLayout** - Main screen layout
|
||
2. **UnitSystemCard** - Toggle untuk sistem unit
|
||
3. **BMIInputField** - Custom input field dengan card design
|
||
4. **BMIResultCard** - Menampilkan hasil dengan visual menarik
|
||
5. **BMIRangeReference** - Referensi range BMI WHO
|
||
|
||
### **Key Functions**
|
||
- `calculateBMI()` - Menghitung BMI dengan validasi
|
||
- `validateBMIInput()` - Validasi input berdasarkan sistem unit
|
||
- `getBMICategory()` - Menentukan kategori BMI
|
||
- `getBMICategoryInfo()` - Memberikan deskripsi kategori
|
||
- `formatBMIResult()` - Format display angka BMI
|
||
|
||
---
|
||
|
||
## 🎨 Design Principles
|
||
1. **User-Friendly**: Interface yang mudah dipahami
|
||
2. **Visual Feedback**: Color-coding untuk hasil yang jelas
|
||
3. **Informative**: Deskripsi lengkap untuk setiap kategori
|
||
4. **Modern**: Design mengikuti Material Design 3
|
||
5. **Accessible**: Contrast yang baik dan text yang readable
|
||
6. **Responsive**: Layout adaptif untuk berbagai ukuran layar
|
||
|
||
---
|
||
|
||
## 🚀 Cara Menggunakan
|
||
1. Pilih sistem unit (Metric/Imperial) dengan toggle switch
|
||
2. Masukkan tinggi badan (cm atau inches)
|
||
3. Masukkan berat badan (kg atau lbs)
|
||
4. Tekan tombol "Hitung BMI"
|
||
5. Lihat hasil BMI dengan kategori dan deskripsi lengkap
|
||
--- |