How to beautifully design a phone inside an Android application: from layouts to interactivity

The built-in display of a phone in an Android application is not just a decorative element, but a powerful tool for demonstrating functionality, training users, or creating a unique visual style. For example, instant messengers often show smartphone mockups to simulate chats, banking applications - to display virtual cards, and educational platforms - to simulate working with a device. But how to do this aestheticallyso that the interface does not look overloaded, and the animations work smoothly even on weak devices?

In this article we will look at 10 proven ways the design of the phone inside Android apps - from static SVG images to dynamic 3D models with gesture support. We will pay special attention optimizing performance: for example, why using Lottie to animate a phone can reduce FPS by 30% on devices with Adreno 505, and how to avoid this. We will also provide a comparative table of libraries for rendering 3D models (Rajawali, Filament, Sceneform) indicating their compatibility with modern versions of Android.

The material will be useful as designersand developers: the former will learn about visualization trends (for example, neomorphism for phone layouts in 2026), and the latter will receive ready-made code snippets for integration. All examples have been tested on Android 14 and Android 15 Developer Preview, taking into account the features of new Material You topics.

1. Static images vs. vectors: what to choose for a phone layout

Let's start with the basic approach - using raster (PNG/JPEG) or vector (SVG/Vector Drawable) images a phone. Raster images are suitable for fixed resolutions, but lose quality when scaled. Vectors, on the contrary, adapt to any screen, but can slow down with complex gradients.

Key selection criteria:

• 📱 Screen resolution: for xxhdpi (1080p) PNG 500×1000 px is enough, for xxxhdpi (1440p) — 700×1400 px.
• 🎨 Complexity design: if the phone has transparency (for example iPhone 15 with a titanium case), SVG is preferable.
• ⚡ Performance: vector animations (AnimatedVectorDrawable) consume 15-20% more CPU than static PNGs.

Example of vector integration in XML:

<vector android:name="phone_mockup" android:width="300dp" android:height="600dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF0000" android:pathData="M10,10 L290,10 L290,590 L10,590 Z"/>
<path android:fillColor="#FFFFFF" android:pathData="M20,20 L280,20 L280,580 L20,580 Z"/>
</vector>

⚠️ Attention: When using SVG c ImageView via app:srcCompat on Android 9 and below, artifacts may occur when scaling. Test on an emulator with API 28.

2. Interactive layouts: handling clicks on a “virtual” phone

A static phone in the interface is boring. It is much more effective to make it clickableso that the user can interact with elements on the mockup screen. For example, in an application for learning to work with Samsung Knox you can simulate unlocking a phone or setting up security.

This can be implemented in two ways:

1. Overlay with FrameLayout: invisible ones are overlaid on top of the phone image View (for example, Button s background="@android:color/transparent"), which process clicks.
2. Custom View: draw the phone in onDraw() and track touches through onTouchEvent().

Example code for the second approach:

class InteractivePhoneView(context: Context, attrs: AttributeSet) : View(context, attrs) {
private val phoneRect = RectF(100f, 200f, 800f, 1200f) // Phone coordinates
private val screenRect = RectF(120f, 220f, 780f, 1180f) // Screen coordinates

override fun onDraw(canvas: Canvas) {
// Drawing the phone body
canvas.drawRoundRect(phoneRect, 50f, 50f, Paint().apply { color = Color.BLACK })
// Drawing the screen
canvas.drawRect(screenRect, Paint().apply { color = Color.WHITE })
}

override fun onTouchEvent(event: MotionEvent): Boolean {
if (event.action == MotionEvent.ACTION_DOWN && screenRect.contains(event.x, event.y)) {
// Handling a click on the phone screen
performClick()
return true
}
return super.onTouchEvent(event)
}
}

⚠️ Attention: When When using FrameLayout with overlays, make sure that clickable elements have android:clickable="true" i android:focusable="true"installed. Otherwise, events will not be transmitted.

3. Phone Animations: Lottie, Property Animation and MotionLayout

Phone animation can greatly improve the user experience. For example, smooth mockup appearance when loading or rotate the device when changing orientation. Let's look at three popular tools:

An example of an animation of turning a phone using ObjectAnimator:

val phoneView = findViewById<ImageView>(R.id.phone_mockup)
val animator = ObjectAnimator.ofFloat(phoneView, "rotationY", 0f, 360f).apply {
duration = 2000
interpolator = AccelerateDecelerateInterpolator()
}
animator.start()

4. 3D phone models: Rajawali, Filament and Sceneform

If you need realistic 3D model of the phone (for example, for an AR application or repair simulator), consider specialized libraries. They allow you to render the device with texture, lighting and even physics.

Library comparison:

• 🔹 Rajawali: outdated, but supported OpenGL ES 2.0/3.0. Suitable for simple 3D scenes.
• 🔹 Filament: from Google, optimized for mobile devices. Supports Vulkan and PBR materials.
• 🔹 Sceneform: simplifies work with ARCore, but requires Android 7.0+.

An example of loading a 3D model of a phone into Filament:

// 1. Initializing the engine
val engine = Engine.create()
val scene = engine.createScene()

// 2. Loading the model (glTF format)
val asset = AssetLoader.create(engine, context.assets.open("phone.glb"))
val entity = asset.getEntities()[0]

// 3. Adding to the scene
scene.addEntity(entity)

// 4. Rendering in SurfaceView
val renderer = MobileRenderer(scene)
val surfaceView = findViewById<SurfaceView>(R.id.surface_view)
surfaceView.setRenderer(renderer)

⚠️ Attention: 3D models increase the APK size. For Sceneform the minimum increase is 10 MB (due to dependencies ARCore). Use abisSplit to build.gradleto reduce the size for specific architectures.

5. Dynamic display of content on the phone screen

Often required the phone screen in the mockup displayed real data from the application. For example, in a banking application, a mockup can show the user's account balance. Suitable for this:

• 📲 TextureView: allows you to render any View or Surface texture.
• 🖼️ Canvas + Bitmap: draw the content manually and apply it as texture.
• 🔄 WebView: if the content is dynamic and loaded from the server (for example, a web version of a chat).

Example with TextureView:

<TextureView
android:id="@+id/phone_screen"
android:layout_width="250dp"
android:layout_height="500dp"
android:layout_marginStart="25dp"
android:layout_marginTop="50dp"/>

// In code
val textureView = findViewById<TextureView>(R.id.phone_screen)
val surfaceTexture = textureView.surfaceTexture
val surface = Surface(surfaceTexture)

// Draw on Surface via Canvas or render View
val canvas = surface.lockCanvas(null)
canvas.drawColor(Color.WHITE)
canvas.drawText("Balance: 10,000 ₽", 50f, 50f, Paint())
surface.unlockCanvasAndPost(canvas)

6. Adaptability: how the phone in the application looks on different screens

The phone mockup should be displayed correctly on all devices - from Galaxy Fold (folding screen) to Pixel 8 (high aspect ratio). To do this:

1. Use ConstraintLayout to position the mockup relative to other elements.
2. Set dimensions in dp, not in px, and limit the maximum width/height.
3. For foldable devices, check Configuration.ORIENTATION and Configuration.SCREENLAYOUT_SIZE_MASK.

An example of a responsive layout:

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/phone_mockup"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="@drawable/phone_vector"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_max="400dp"
app:layout_constraintHeight_max="800dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

For foldable devices, add a check in the code:

val isFoldable = resources.configuration.screenLayout and
Configuration.SCREENLAYOUT_SIZE_MASK == Configuration.SCREENLAYOUT_SIZE_XLARGE

if (isFoldable) {
// Setting up the layout for foldable screen
phoneMockup.layoutParams.width = 600 // Increase the size of the mockup
}

7. Performance optimization: how to avoid lags

A poorly optimized phone mockup can reduce FPS the entire application, especially if it is animated or contains 3D. Main problems and solutions:

For diagnostics, use Android Profiler in Android Studio:

1. Open CPU Profiler and check the loading when interacting with the mockup.
2. in Memory Profiler monitor leaks when working with Bitmap or 3D textures.
3. Turn on GPU Overdraw to Developer Optionsto find redundant layers.

8. Trends 2026: neomorphism, sceumorphism and minimalism

In 2026, the design of phone mockups in Android applications follows three main trends:

• 🎨 Neomorphism: soft shadows and convex elements that imitate physical objects. Suitable for educational applications.
• 📱 Skeumorphism: realistic textures (metal, glass) for device simulators.
• ⚪ Minimalism: flat icons without shadows, emphasis on screen content (for example, in Google Messages).

Implementation examples:

• For neomorphism use CardView s cardElevation="8dp" i cardBackgroundColor="#F0F0F0".
• For skeumorphism connect textures via shapeableImageView s app:strokeColor="#808080".

Color palettes of 2026 for mockups:

• 🟣 Purple: #6E5EF5 (used in Material You for a dark theme).
• 🟢 Mint: #A7E8BD (popular in fitness applications).
• ⚫ Graphite: #333333 (for corporate applications).

⚠️ Attention: Design trends may change. Before making the final choice of style, check the current guidelines Material Design on the official Google website.

FAQ: Frequently asked questions about designing a phone in Android

val screenRegion = Region()
screenRegion.set(120, 220, 780, 1180) // Screen coordinates

override fun onTouchEvent(event: MotionEvent): Boolean {
val x = event.x.toInt()
val y = event.y.toInt()
if (screenRegion.contains(x, y)) {
// Click processing
return true
}
return super.onTouchEvent(event)
}

TransitionManager.beginDelayedTransition(container)
phoneScreenView.visibility = View.GONE
newContentView.visibility = View.VISIBLE

@Test
fun testPhoneMockupVisibility() {
onView(withId(R.id.phone_mockup)).check(matches(isDisplayed()))
onView(withId(R.id.phone_screen)).check(matches(hasContentDescription("Phone screen")))
}