Thursday, November 12, 2020

Android Emulator screenshot with device frame

Thursday, November 12, 2020

I often have to take app screenshots and then send them to the documentation team or a sales rep. However, they need to look nice as if they’re in a device not just a raw PNG. I’ve tried using a few different mockup sites but every time I find one I liked it ends up shutting down.

Here is how to do it yourself super easy!

On iOS I don’t have any problem using generators. I’ve been using these two for a while:

But for Android, here is my new workflow:

Step 1: Install Android Studio

When it asks for the Android SDK location, you’ll probably want to change it to match the location where Xamarin has it’s copy of the Android SDK otherwise you’ll duplicate a TON of stuff.

(If you’re not a Xamarin dev and you’ve stumbled across this blog post from somewhere else then just leave the default location)

Get the Xamarin SDK Location from Visual Studio > Tools > SDK Manager > Location

And then give this same location to the Android Studio Installer

Step 2: Android Studio

Start Android Studio and open (any) project.

Just create a blank project with no activity. It doesn’t matter what the project is, but you’ll need a project open for this to work.

Step 3: LogCat

On the very bottom of Android Studio tap the “LogCat” tab. If you don’t see it, wait a minute or two for Gradle to finish it’s build of your new project.

At the top of LogCat, select your device. This can be any emulator you’re running from Visual Studio or even a physical device you have plugged in via USB.

On the left press the camera icon.

Step 4: Screenshot

A new window will open and you’ll have several options, including whether or not to include a device frame!