Android
androidFrames content inside an Android phone device mockup.
Usage
Basic usage
The Android casing with a centered punch-hole camera wraps the screen content, the default is Pixel 9 Pro.
Hulian AppAndroid screen
tsx
<Android>
<img src="/app.png" alt="" />
</Android>Select model
model Switch the default model and determine the default width.
Hulian AppAndroid screen
tsx
<Android model="galaxy-s24-ultra">
<img src="/app.png" alt="" />
</Android>Custom width
width takes precedence over the model default width when passed in explicitly.
Hulian AppAndroid screen
tsx
<Android width={220}>
<img src="/app.png" alt="" />
</Android>Picture content
Pass imageSrc and directly render the App screenshot (priority to children).
Hulian AppAndroid screen
tsx
<Android model="pixel-9-pro" imageSrc="/app.png" />When to Use
Use it to present an app screenshot or mobile page inside an Android device frame with a hole-punch camera. Pixel and Galaxy dimensions are available. Use iPhone for an iPhone frame, Tablet for a tablet, or Safari and Chrome for browser windows.
Import
ts
import { Android, ANDROID_MODELS } from "@hulianui/ui"Props
Extends ComponentPropsWithoutRef<"div">. ANDROID_MODELS exports the model-to-width mapping.
| Name | Type | Default | Description |
|---|---|---|---|
| model | "pixel-9-pro-xl" | "pixel-9-pro" | "pixel-9" | "galaxy-s24-ultra" | "galaxy-s24" | - ("pixel-9-pro" in the showcase) | Optional model used to resolve the width; the component itself has no model default |
| width | number | Model width, or 280 without a model | Device width in pixels; an explicit value takes precedence over model |
| imageSrc | string | - | Screen image URL; takes precedence over children |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Custom screen content |
Usage Guidelines
- Body height is derived from the screen ratio and the border, never a hard-coded `aspectRatio`. The border is a fixed pixel value while the screen scales with the width, so the body ratio is not a constant: the same device drawn at 280px and at 360px has two different body ratios. A hard-coded ratio therefore skews the inner screen at some widths, and PreviewSandbox
fitscaling leaves a white band on the short edge (#117). The logical screen resolution and border width live inlib/device-metrics, and a unit test locks the invariant that the inner screen ratio always equals the declaredscreenratio.
modelandwidthchange only the body width; the height follows from the screen ratio, so the body aspect ratio shifts slightly with width. That is correct behaviour, because the border does not scale.- When both
imageSrcandchildrenare provided,imageSrcwins.
Related
Playground
Hulian AppAndroid screen
<Android model="pixel-9-pro">
<img src="/app.png" />
</Android>