01 iOS & Android shells putio-ios · putio-android
Touch is the engine — no focus rings, long-press for context, bottom-sheet for actions. Visual stays put.io: yellow folders, GT America, tabular-mono numerics. Native chrome (status bar, tab bar, FAB, gesture pill) is the only thing that changes between platforms.
9:41
Files
your storage

Films

Search in Films
202412 items
2023 · keep40 items · pinned
Dune.Part.Two.mkv3.42 GB · Mar 14
tears_of_steel.mkv1.20 GB · Feb 28
subtitles.srt14 kB
Files
Transfers
Recent
Account

iOS · SwiftUI

Files screen, dark by default.
  • Large title at 28px / 700 with an uppercase mono eyebrow above.
  • Search sits below title (iOS large-title pattern); collapses on scroll.
  • Tab bar uses yellow for active — never iOS-default blue.
  • Long-press a row → bottom-sheet (see overlays).
  • Hit-target floor: 44pt. Row height is 50pt min.
10:24 5G
Files
AT
Search files and folders
Films168 items · 412 GB
TV Shows42 items · 218 GB
tears_of_steel.mkv1.20 GB
tears_of_steel.mkv
1.20 GB · video
Play here
Cast to TV
Download to device
Move to trash
Files
Transfers
Search
Account

Android · Compose · Material 3

Files screen with file-actions sheet open.
  • Top app bar 56dp tall, hamburger ↔ avatar layout.
  • Bottom navigation uses M3 pill-on-active pattern; yellow component-bg tint instead of M3 default purple.
  • Long-press opens the bottom-sheet with the file name pinned to the top.
  • 3-dot menu is the canonical row affordance (vs iOS's swipe).
  • FAB hidden when sheet open — would compete for taps.
10:24
tears_of_steel.mkvFilms · 2023
00:42:18−01:08:42
Audio
Subs
PiP
More

Android · Player chrome

Media3 PlayerView with overlay.
  • Scrubber uses --yellow-solid on a translucent track.
  • Cast first-class top-right (Chromecast is primary on Android per the brief).
  • PiP active tints yellow — Android handles handoff to system PiP natively.
  • Mono numerics for timecode — never reflow on tick.
9:41
┌( ಠ_ಠ)┘

Link this device

Open put.io/link on the device showing this code, and enter it.

P
U
T
I
O
7

Pairing flow — shared across all native apps

Same kaomoji, same code, same copy.
  • Kaomoji ┌( ಠ_ಠ)┘ is the existing welcome on Android TV — keep it.
  • Six-character code in mono at 18pt / 700.
  • Pill CTA at 44pt min — iOS hit-target floor.
  • Used on iOS, Android, tvOS, Roku — copy identical, only chrome differs.
02 Mobile components — patterns that only exist on touch SwiftUI · Compose · Media3
Beyond the shells: native mobile patterns the web app doesn't have. Pull-to-refresh, swipe-to-action, native segmented controls, toast snackbars, setting toggles, FAB. All match the production styling in putio-ios and putio-android.
Pull-to-refreshSwiftUI .refreshable · Compose pullToRefresh
Updating files…
Swipe-to-actioniOS swipeActions · Compose dismissable item
Films · 2024
iOS segmented controlUISegmentedControl · SwiftUI Picker(.segmented)
Snackbar / toastMaterial 3 Snackbar · iOS overlay
Saved to /Films/2024
Setting rowsiOS Form · Android Preference
Autoplay next fileWhen a video ends, play the next.
Cellular downloadsUse mobile data when Wi-Fi is off.
Background uploadsContinue when the app's not open.
FAB (Floating Action Button)Material 3 only · iOS uses + in nav bar
md · 48dp lg · 56dp (default)