Mobile UX Design — Android Port

Complete UX specification for the Android app. All UI decisions are documented here. Android views are independent files in XBVault.Android/Views/ — they copy visual patterns from desktop but have full freedom to change later.

Design Principles

Screen Flow

flowchart TD
    SPLASH_NATIVE["Pre-Splash\n(Native Android)\n#284325 + logo"]
    SPLASH_AVA["Avalonia Splash\n(MobileSplashView)\nAll text + version"]
    MAIN["MobileMainWindow\n(Top bar + Content + Tab bar)"]
    BROWSE["BrowsePage"]
    INSTALLED["InstalledPage"]
    FILES["FilesPage"]
    TOOLS["ToolsPage"]
    CONNECTION["ConnectionPage\n(Fullscreen dialog)"]
    HAMBURGER["Hamburger Menu\n(Notifications, Jobs, Logs, Settings, About)"]

    SPLASH_NATIVE -->|Avalonia init| SPLASH_AVA
    SPLASH_AVA -->|2s delay + services ready| MAIN
    MAIN --> BROWSE
    MAIN --> INSTALLED
    MAIN --> FILES
    MAIN --> TOOLS
    MAIN -->|Connection icon tap| CONNECTION
    MAIN -->|Hamburger tap| HAMBURGER

Screen 1: Pre-Splash (Native Android)

Splash nativo Android que aparece instantaneamente ao abrir a app, antes do Avalonia inicializar.

Visual

┌──────────────────────────────────────┐
│                                      │
│            (fundo #284325)           │
│                                      │
│                                      │
│            [Xbox Logo]               │
│           (centralizado)             │
│                                      │
│                                      │
│                                      │
└──────────────────────────────────────┘

Fundo sólido #284325 (verde escuro Xbox) com logo da aplicação centralizado.

Assets

Config

• styles.xml: windowBackground=#284325, windowSplashScreenBackground=#284325, windowSplashScreenAnimatedIcon=@drawable/splash_icon
• values-v31/styles.xml: idem + API 31+ splash attributes

Screen 2: Avalonia Splash (MobileSplashView)

Splash Avalonia que aparece assim que o framework inicializa. Repete o layout do desktop splash adaptado pra portrait.

Visual (portrait)

┌──────────────────────────────────────┐
│         (splash-bg.png fill)         │
│                                      │
│            [Xbox Logo 80x80]         │
│                                      │
│         XB HOMEBREW                  │
│            VAULT                     │
│                                      │
│  Desktop manager for Xbox Dev Mode   │
│            ────                      │
│            v1.4.0                    │
│         Marcelo Frau                 │
│         GPL-3.0-only                 │
│                                      │
│   ──────────────────────────────     │
│          (progress bar)              │
└──────────────────────────────────────┘

Elementos (mesmos do desktop)

Duração

~2 segundos (mesmo SplashMinDelayMs do desktop), depois transição automática pro MobileMainWindow.

Arquivos

Screen 3: MobileMainWindow Shell

Shell principal — top bar, content area, bottom tab bar.

Visual

┌──────────────────────────────────────┐
│ Top Bar                               │
│ [logo] XB Homebrew Vault   [🔗] [☰] │
├──────────────────────────────────────┤
│                                      │
│  Content Area                        │
│  (BrowsePage por default)            │
│  (conteúdo interno na Fase 2)        │
│                                      │
│                                      │
│                                      │
├──────────────────────────────────────┤
│ Bottom Tab Bar (4 tabs, icons only)  │
│ [🔍] [📦] [📁] [🔧]                │
└──────────────────────────────────────┘

Top Bar

Background: TitleGradient (#447F3E → #9ACA3C) — mesmo gradiente do desktop. Altura: 48dp (touch-friendly).

Connection Status Icons

Hamburger Menu

Dropdown popup posicionado abaixo do ícone:

┌────────────────────────────────┐
│ 🔔  Notifications              │
│ 📋  Jobs                       │
│ ──────────────                 │
│ 📋  Logs                       │
│ ⚙   Settings                   │
│ ──────────────                 │
│ ℹ   About                      │
└────────────────────────────────┘

Background: SurfaceAltBrush (#252830), borda BorderBrush. Estilo: Reutiliza o estilo MenuFlyout do BladesTheme (já existe). Items: Ícones 20x20 do desktop, texto 14px.

Bottom Tab Bar — 4 tabs, icons only

Ícones: Mesmos assets do desktop, referenciados via avares://XBVault/Assets/Views/MainWindow/.... Background: SurfaceBrush (#1A1D23) ou BgBrush (#0D1117). Altura: 56dp. Selecionado: Ícone fica verde + indicador sutil (underline ou dot). Sem texto: Só ícones.

Binding: SelectedIndex → MainViewModel.SelectedTab (0-3).

Content Area

Carousel ou ContentControl com DataTemplate:

<Carousel SelectedIndex="{Binding SelectedTab}">
  <!-- Tab 0: BrowsePage placeholder -->
  <!-- Tab 1: InstalledPage placeholder -->
  <!-- Tab 2: FilesPage placeholder -->
  <!-- Tab 3: ToolsPage placeholder -->
</Carousel>

Fase 1B: Só placeholders (“Browse” / “Installed” / “Files” / “Tools”). Conteúdo real na Fase 2.

Arquivos

Tab Mapping

Nota: MainViewModel.SelectedTab usa índices 0-6. No mobile são 0-3 pras tabs + 4 pra Settings via hamburger. Inspector excluído do Android.

Dialog Strategy

Desktop: ShowDialog() (separate Window)

All 21 dialog views inherit from Window and are opened via ShowDialog(mainWindow).

Mobile: 3 presentation modes

Navigation Stack

Desktop usa ShowDialog(mainWindow). Android vai usar:

• ShowConnectAction → push ConnectionPage (Fase 2)
• ShowAboutAction → push AboutPage (Fase 2)
• ShowDetailAction → push ItemDetailPage (Fase 2)

Fase 1B: Só seta as ações como noop ou placeholder.

Back Button Behavior

1. Se NavigationStack tem página → pop
2. Se em tab que não é Browse → vai pra Browse
3. Se em Browse → minimize/exit

Touch Guidelines

• Mínimo 48x48dp pra targets interativos
• Font size mínimo 14sp corpo
• Sem hover effects, usar :pressed
• Scroll natural do Android
• Swipe gestures para navegação entre tabs (opcional Fase 4)

Icon Mapping

Referenciados do shared via avares://XBVault/Assets/...

Ícone novo copiado do personal set

Cópia pro Android drawable (pre-splash nativo)

Blade Theme Color Palette (Reference)

Typography (Reference)

• Title: Oxanium Bold 700 (Assets/Fonts/Oxanium-700.ttf)
• Body: Oxanium Regular 400 (Assets/Fonts/Oxanium-400.ttf)
• Mono: ProFontWindows Nerd Font (Assets/Fonts/ProFontWindowsNerdFont-Regular.ttf)
• Fallback: Inter, Segoe UI, sans-serif