DEV Community

Tyler Smith
Tyler Smith

Posted on • Updated on

Include a phone frame in a screenshot of an Android Expo project

The Android emulator that Expo apps use has a built-in screenshot tool, but it only grabs what's on the screen. Sometimes you may want to include a phone case surrounding the screenshot, but you don't want to mess around with Photoshop.

Fortunately, Android Studio has a built-in Screen Capture tool that can add a generic phone frame, a drop shadow and even screen glare. Unfortunately, Expo projects can't be opened in Android Studio. Yet with a little trickery, you can still use this tool with your Expo app.

Here's what an app screenshot taken with the Android Studio Screen Capture tool looks like with the phone case and drop shadow.

Screenshot of app inside a generic phone with drop shadow

If this seems interesting, keep reading. The rest of this post assumes you've already set up an Android emulator to run your Expo app.

Step 1: Start your Android app with Expo

This one should be easy. Run the following in your console from your Expo project's main directory:

expo start
Enter fullscreen mode Exit fullscreen mode

The Expo Developer Tools should launch automatically. On the left hand menu of the Expo Developer Tools, click on "Run on Android device/emulator."

Expo panel

Step 2: Create a throw-away Android project

Unfortunately, to use Android Studio's Screen Capture tool you need to have an Android Studio project open. We'll create a new project for the sole purpose of using the Screen Capture tool. If you already have an existing Android Studio project, you can open that and skip the rest of step 2.

Open Android Studio and click "Start a new Android Studio project."

Android Studio startup screen

Select "No Activity." We're never going to run this project so we don't need any boilerplate code.

"Create New Project" screen in Android Studio

Proceed with the default settings in the next screen then click "Finish." Again: we're never going to run this project, so our settings don't matter.

Step 3: Open Logcat

In the application menu, select View > Tool Windows > Logcat to open Logcat.

Selecting Logcat from Android Studio menus

Step 4: Open the Screen Capture tool

Logcat should now be near the bottom of your screen. Select the camera icon. If you don't see a camera icon, resize the Logcat bar until it appears.

Logcat screenshot

This will open the Screen Capture tool. It captures the screen of the emulator immediately when it opens.

Screen Capture tool

Step 5: Add a phone frame

To add a generic phone frame, drop shadow and screen glare, use the checkboxes near the top of the Screen Capture tool.

Screen Capture tool with phone frame, drop shadow and screen glare selected

Step 6: Update screenshot

You may not be happy with the screenshot that Screen Capture grabbed when it opened. You can go back to your emulator and change the screen, then hit the "Recapture" button.

Screen Capture tool with arrow pointing to "Recapture" button

Step 7: Save your photo

When you're happy with your photo, hit the save button in the bottom right-hand corner.

Screen Capture tool with arrow pointing to "Save" button

This will close the Screen Capture tool, so if you want to take additional screenshots you'll need to reopen Screen Capture from within Logcat.

Step 8: Reuse this project in the future

If you ever need to use Android Studio's Screen Capture tool again in the future, you don't need to create a new project like you did in step 2: you can select the same project from the Android Studio startup screen.

Android Studio startup screen with arrow pointed at previously created project

I hope this article saves you some time. If it did, please leave a like or a comment. For up-to-date information on how to take screenshots in Android, consult the Android Screenshot Documentation.

Top comments (0)