# For L10n Training

# 🔑 | Localization Bait Inventory: Training "Cheat Sheet" for "Notes" Android Native App

This document lists all the deliberate localization "traps" implemented in the Notes app. Use this to guide students in identifying why hard-coding is problematic and how to properly implement Android L10n.

<span style="white-space: pre-wrap;">Project Github Repo </span>[here](https://github.com/itsLittleKevin/Android-native-app-Notes-for-l10n-practice).

---

### 1. Hard-coded UI Strings (The "Low Hanging Fruit")

- **Location:**<span style="white-space: pre-wrap;"> All screens (</span>`<span class="editor-theme-code">AboutScreen.kt</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">NoteListScreen.kt</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">NoteEditorScreen.kt</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">SettingsScreen.kt</span>`)
- **The Bait:**<span style="white-space: pre-wrap;"> Plain text strings like </span>`<span class="editor-theme-code">"About Notes"</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">"Save"</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">"Search Notes…"</span>`<span style="white-space: pre-wrap;">, and </span>`<span class="editor-theme-code">"Delete"</span>`.
- **The Lesson:**<span style="white-space: pre-wrap;"> Basic translation. These must be moved to </span>`<span class="editor-theme-code">res/values/strings.xml</span>`<span style="white-space: pre-wrap;"> so the system can swap them based on the user's language.</span>

### 2. The Plurals Trap (Manual Logic)

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">NoteListScreen.kt</span>`
- **The Bait:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">text = if (notesCount == 1) "1 note" else "$notesCount notes"</span>`
- **The Lesson:**<span style="white-space: pre-wrap;"> English only has two plural forms (one/other), but languages like Arabic have six, and Russian has three. Hard-coded </span>`<span class="editor-theme-code">if/else</span>`<span style="white-space: pre-wrap;"> logic cannot scale.</span>
- **Solution:**<span style="white-space: pre-wrap;"> Refactor to use </span>**`<strong class="editor-theme-bold editor-theme-code">res/values/plurals.xml</strong>`**.

### 3. Date &amp; Time Formatting

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">NoteListScreen.kt</span>`<span style="white-space: pre-wrap;"> (inside </span>`<span class="editor-theme-code">NoteItem</span>`)
- **The Bait:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">SimpleDateFormat("MM/dd/yyyy HH:mm", Locale.US)</span>`
- **The Lesson:**<span style="white-space: pre-wrap;"> Date order (MM/DD vs DD/MM) and clock formats (12h vs 24h) are regional. Forcing </span>`<span class="editor-theme-code">Locale.US</span>`<span style="white-space: pre-wrap;"> makes the app feel "foreign" in most of the world.</span>
- **Solution:**<span style="white-space: pre-wrap;"> Use </span>`<span class="editor-theme-code">java.text.DateFormat</span>`<span style="white-space: pre-wrap;"> formatters that respect the system locale.</span>

### 4. Text Embedded in Assets (The "Icon Trap")

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">res/drawable/ic_app_icon.xml</span>`
- **The Bait:**<span style="white-space: pre-wrap;"> The vector paths draw the literal English characters </span>**"N-O-T-E-S"**<span style="white-space: pre-wrap;"> and </span>**"L10N"**.
- **The Lesson:**<span style="white-space: pre-wrap;"> When an app name is translated, an icon containing English text becomes misleading.</span>
- **Solution:**<span style="white-space: pre-wrap;"> Either use symbolic icons (no text) or use </span>**Resource Qualifiers**<span style="white-space: pre-wrap;"> (e.g., </span>`<span class="editor-theme-code">drawable-zh/</span>`) to swap assets.

### 5. String Concatenation &amp; Templates

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">AboutScreen.kt</span>`
- **The Bait:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">text = "Version " + "1.0.0"</span>`
- **The Lesson:**<span style="white-space: pre-wrap;"> In some languages, the word for "Version" comes </span>**after**<span style="white-space: pre-wrap;"> the number. Concatenation locks the word order.</span>
- **Solution:**<span style="white-space: pre-wrap;"> Use string resources with placeholders: </span>`<span class="editor-theme-code">Version %s</span>`.

### 6. Logic Keys as Display Strings

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">NotesViewModel.kt</span>`<span style="white-space: pre-wrap;"> (Enums and Tags)</span>
- **The Bait:**<span style="white-space: pre-wrap;"> Tags like </span>`<span class="editor-theme-code">"Work"</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">"Personal"</span>`<span style="white-space: pre-wrap;">, and </span>`<span class="editor-theme-code">"Important"</span>`<span style="white-space: pre-wrap;"> are used as both database keys and UI labels.</span>
- **The Lesson:**<span style="white-space: pre-wrap;"> Translating a UI label that is also used as a logic key will break the app's functionality.</span>
- **Solution:**<span style="white-space: pre-wrap;"> Separate </span>**internal IDs**<span style="white-space: pre-wrap;"> (stable) from </span>**display labels**<span style="white-space: pre-wrap;"> (localized).</span>

### 7. Cultural Sorting &amp; Search

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">NotesViewModel.kt</span>`
- **The Bait:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">it.title.contains(query, ignoreCase = true)</span>`<span style="white-space: pre-wrap;"> and </span>`<span class="editor-theme-code">"Title (A-Z)"</span>`<span style="white-space: pre-wrap;"> sorting.</span>
- **The Lesson:**<span style="white-space: pre-wrap;"> Alphabetical order varies by script. Simple case-insensitivity fails for accented characters (like </span>`<span class="editor-theme-code">é</span>`<span style="white-space: pre-wrap;"> vs </span>`<span class="editor-theme-code">E</span>`).
- **Solution:**<span style="white-space: pre-wrap;"> Use </span>`<span class="editor-theme-code">java.text.Collator</span>`<span style="white-space: pre-wrap;"> for locale-aware sorting.</span>

### 8. UI Expansion &amp; Layout Breaking

- **Location:**<span style="white-space: pre-wrap;"> </span>`<span class="editor-theme-code">NoteListScreen.kt</span>`<span style="white-space: pre-wrap;"> (Grid Mode)</span>
- **The Bait:**<span style="white-space: pre-wrap;"> The 2-column grid layout assumes English-length text.</span>
- **The Lesson:**<span style="white-space: pre-wrap;"> German and French words are often 30% longer than English.</span>
- **Challenge:**<span style="white-space: pre-wrap;"> Students must ensure the UI doesn't "break" or overlap when words expand.</span>