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.
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
The Expo Developer Tools should launch automatically. On the left hand menu of the Expo Developer Tools, click on "Run on Android device/emulator."
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."
Select "No Activity." We're never going to run this project so we don't need any boilerplate code.
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.
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.
This will open the Screen Capture tool. It captures the screen of the emulator immediately when it opens.
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.
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.
Step 7: Save your photo
When you're happy with your photo, hit the save button in the bottom right-hand corner.
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.
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)