This PR provides comprehensive tablet and foldable device optimization for the RethinkDNS app, transforming it from a phone-centric design to a truly responsive application that adapts intelligently to different screen sizes.

Problem

The app's UI was designed primarily for phone screens, causing poor user experience on tablets and foldable devices:

• Cards and UI elements appeared tiny on large screens with excessive whitespace
• Touch targets were too small for comfortable tablet interaction
• Text sizes didn't scale appropriately for larger displays
• No landscape optimizations for horizontal screen usage
• Dialogs and bottom sheets had inadequate spacing and sizing

Solution

Implemented a comprehensive responsive design system with multiple layers of optimization:

Multi-Tier Responsive Layout System

• sw720dp: Standard tablet optimization for 7-10 inch screens
• sw900dp: Large tablet/foldable optimization for 10+ inch screens
• Automatic screen detection using smallestScreenWidthDp >= 720 for dynamic adjustments

Home Screen Transformation

• Portrait Mode: Enhanced 2x2 grid layout with larger cards (180-200dp height vs 140dp)
• Landscape Mode: Efficient 3-column horizontal layout (DNS/Firewall | Proxy/Logs | Apps/Controls)
• Improved spacing with 32-64dp side margins instead of 15dp
• Modern 20dp corner radius for cards with enhanced visual hierarchy

Enhanced Touch Experience

• Navigation bar increased to 72dp height with 28dp icons
• Touch targets standardized to 56-72dp minimum sizes for tablet interaction
• Main action button scales from 48dp to 56-64dp height
• Toggle controls enhanced to 40dp with proper background highlighting

Activity-Specific Optimizations

App List Activity: Enhanced search bar (56dp height), better filter controls (40dp touch targets), improved content constraints, and enhanced fast scroll for tablet navigation.

Advanced Settings: Modern card-based design with 16dp corner radius, 72dp setting item heights, clear typography hierarchy, and logical content grouping.

Bottom Sheets: Optimized item heights (72dp), larger icons (28dp), improved spacing and visual hierarchy for tablet interaction patterns.

Dialog & Typography Improvements

• Adaptive dialog padding that automatically scales from 50dp to 80dp on tablets
• Enhanced text sizing (16sp → 18sp) for better readability on large screens
• Responsive typography scale: 12-28sp for standard tablets, 14-32sp for large tablets
• Content width constraints prevent excessive stretching on very wide screens

Technical Implementation

The solution uses Android's resource qualifier system for efficient, performant responsive design:

app/src/main/res/
├── values-sw720dp/ (tablet dimensions & styles)
├── values-sw900dp/ (large tablet dimensions)
└── layout-sw720dp/ (tablet-optimized layouts)
    ├── fragment_home_screen.xml
    ├── activity_home_screen.xml
    ├── activity_app_list.xml
    └── bottom_sheet_home_screen.xml

app/src/full/res/layout-sw720dp-land/
└── fragment_home_screen.xml (landscape optimization)

Dynamic screen detection in code:

val isTablet = context.resources.configuration.smallestScreenWidthDp >= 720
val dialogPadding = if (isTablet) 80 else 50

Results

This implementation provides significant improvements across all tablet and foldable form factors:

• Better Space Utilization: No more tiny UI elements on large screens
• Enhanced Readability: Appropriately scaled typography for comfortable reading
• Improved Touch Interaction: Finger-friendly touch targets following Material Design guidelines
• Landscape Optimization: Efficient use of horizontal space with multi-column layouts
• Future-Proof Design: Adaptive system ready for emerging form factors

The changes are fully backward-compatible, maintaining the existing phone experience while dramatically improving the tablet experience. All functionality remains available across device types with no performance impact on phone users.

Fixes #2044.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.