feat(ui): add automatic tablet UI scaling with density adaptation#3793
Open
kairosci wants to merge 2 commits into
Open
feat(ui): add automatic tablet UI scaling with density adaptation#3793kairosci wants to merge 2 commits into
kairosci wants to merge 2 commits into
Conversation
Fix icons, menu, text and everything being too small on tablets/phablets by auto-scaling Compose density based on screen width class. Also show NavigationRail on tablets in portrait mode.
Contributor
📝 WalkthroughWalkthroughMainActivity is updated to support tablets by enabling multi-window mode, implementing dynamic density scaling based on screen width, and extending navigation rail visibility to wider devices. The density scaling adjusts all composed text, icons, and spacing to remain appropriately sized on larger screens. ChangesTablet Scaling and Multi-Window Support
🎯 2 (Simple) | ⏱️ ~15 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
|
Caution Failed to replace (edit) comment. This is likely due to insufficient permissions or the comment being deleted. Error details |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/src/main/kotlin/com/metrolist/music/MainActivity.kt`:
- Around line 781-783: The tablet detection is using realScreenWidthDp (full
device screen) which breaks in multi-window; change isTablet to use the window
width from LocalWindowInfo (the same source used for isLandscape) — e.g.,
replace references to realScreenWidthDp with configuration.containerDpSize.width
(or the LocalWindowInfo containerDpSize.width) so isTablet and dependent values
like showRail use the actual app window size; also update the density-scaling
logic that currently reads screen width (the block around the density scaling
variables) to use the window width instead so density scaling follows the app
window in split-screen.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 354217bc-0372-4d7d-b94a-7948fd5ca845
📒 Files selected for processing (2)
app/src/main/AndroidManifest.xmlapp/src/main/kotlin/com/metrolist/music/MainActivity.kt
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/src/main/kotlin/com/metrolist/music/MainActivity.kt (1)
88-88: ⚡ Quick winRemove unused import.
LocalConfigurationis imported but not used anywhere in the file. The density scaling and tablet detection logic useLocalWindowInfoinstead.♻️ Proposed fix
-import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalDensity🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/src/main/kotlin/com/metrolist/music/MainActivity.kt` at line 88, Remove the unused import of LocalConfiguration from MainActivity.kt; locate the import statement "import androidx.compose.ui.platform.LocalConfiguration" and delete it so only the required imports (e.g., LocalWindowInfo) remain, then run a build or organize imports to ensure no unused imports remain.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/src/main/kotlin/com/metrolist/music/MainActivity.kt`:
- Line 88: Remove the unused import of LocalConfiguration from MainActivity.kt;
locate the import statement "import
androidx.compose.ui.platform.LocalConfiguration" and delete it so only the
required imports (e.g., LocalWindowInfo) remain, then run a build or organize
imports to ensure no unused imports remain.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dba0d6e4-1056-4802-8ca3-508e6f821800
📒 Files selected for processing (2)
app/src/main/AndroidManifest.xmlapp/src/main/kotlin/com/metrolist/music/MainActivity.kt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Icons, menu, text and everything looks very small when Metrolist is installed on a tablet or phablet (≥7" screens). The app has zero tablet awareness — no WindowSizeClass, no density adaptation, no sw600dp qualifiers, and layout grids hardcoded for phone-width screens (~412dp).
Cause
All Compose layouts use fixed dp values designed for phones. On tablets (600-950dp wide) the same dp values produce UI elements that are proportionally tiny because they occupy a smaller fraction of the larger screen. The only adaptive UI was a landscape check that toggles bottom nav ↔ rail; there was no detection of tablet-sized screens at all.
Solution
Testing
Related Issues
Summary by CodeRabbit
New Features
Bug Fixes