DEV Community

loading...
Cover image for Magically turn your phone into a tablet with adb for testing tablet views!

Magically turn your phone into a tablet with adb for testing tablet views!

Matt McKenna
I write about Android Dev and Kotlin. Making a newsletter @StoicallyTyped πŸ’­ he/him #BlackLivesMatter πŸ‘ŠπŸΌπŸ‘ŠπŸ½πŸ‘ŠπŸΏ #StopAsianHate ❀️
Originally published at stoicallytyped.com ・5 min read

The Pledge

So you forgot your tablet at the office and now you are working from home for the foreseeable future. It's still important to test those tablet views! Here’s a quick and painless way to turn an ordinary phone into a tablet and back again. This isn't one of those one way disappearing acts!

Tools of the Trick

  1. Android Debug Bridge - Our good friend the Android Debug Bridge (adb). We will be using some commands here to perform our magic trick.
  2. Search Engine - One of your choice, I recommend DuckDuckGo (go privacy!)
  3. Phone - Can be any phone you want to use. I promise we will put it back to the way it was by the end of this article
  4. scrcpy - An application to view and control your Android device from your computer

The Turn

The first step you want to take is to find the resolution and pixel density of the tablet you want to emulate on your device. For example, if we want to emulate a Pixel C device we can search up its specs on a site like GSMArena. We find that this device has a 2560x1800 resolution display with a pixel density of 308 ppi (pixels per inch).

Alt Text

For the next step I'm going to assume that adb is installed and set up on your system. If it is not, check out this write up from xda developers.

The Android Debug Bridge has a slew of great commands. The one we will be using today is the shell command with the wm command.

shell - allows us to access the linux shell on an Android device

wm - accesses the devices window manager

We also need to know two parameters for the wm command.

size - which will allow us to see our current and original screen resolution, as well as set a desired screen resolution

density - which allows us to see our current and original pixel densities as well as set a desired pixel density.
Lets try this out in our terminal.

Now let's try this command! Make sure you have your device connected and USB Debugging enabled! I am running this on a Google Pixel 4XL. Here's what is shown when running these commands

> adb shell wm size
Physical size: 1440x3040

> adb shell wm density
Physical density: 560
Enter fullscreen mode Exit fullscreen mode

As you can see we are given the original resolution with size and the original pixel density with density.

Alt Text

Time to become a tablet! Remember this is easily reversible if something goes awry.
Let's grab the resolution of a Pixel C tablet and set our phone resolution to it using the command:

> adb shell wm size 2560x1800
Enter fullscreen mode Exit fullscreen mode

You should see your device make this change immediately.

Alt Text

Running the size command again will show that we now have another line of output for the Override size.

> adb shell wm size
Physical size: 1440x3040
Override size: 2560x1800
Enter fullscreen mode Exit fullscreen mode

Now the screen will look a little funny but this is because the pixel density of the device most likely isn't calibrated correctly for this resolution. Lets see what it looks like when we change only the density.

> adb shell wm density 308
Enter fullscreen mode Exit fullscreen mode

Alt Text

And again our change can be verified by running the density command once more.

> adb shell wm density
Physical density: 560
Override density: 308
Enter fullscreen mode Exit fullscreen mode

Now it's time to bring it all together changing both size and density to match what the Pixel C specs have!

> adb shell wm size 2560x1800
> adb shell wm density 308
Enter fullscreen mode Exit fullscreen mode

Alakazam!

Alt Text

A tablet! This is similar to changing the resolution or scaling on your laptop or monitor! Now when you run your app the tablet specific views will be rendered!

Hmm, it still looks funny on the device though. It's probably pretty small. It might not even respond to touch inputs. That's okay! This is expected. There are a few ways we can address this. Firstly, a Pixel C is a tablet device with a very high resolution screen and pixel density. Choosing a resolution and pixel density from a tablet that isn't quite as large as the Pixel C's will provide a bit of a better experience. However, there is a cooler option.

Introducing scrcpy

If you have never used scrcpy before you will love it. It's a magic trick all in its own by some developers at Genymobile to control and view your Android devices from your computer. It can easily be installed for all platforms following the instructions on their Github README.
Now that it's installed all we need to do is open up a terminal and run:

> scrcpy
Enter fullscreen mode Exit fullscreen mode

If you only have one device connected you will be able to see it right away! If you have more than one you will need to get your device's serial number and then use that to invoke scrcpy.

> adb devices
List of devices attached
0123456789abcdef    device

> scrcpy -s 0123456789abcdef
Enter fullscreen mode Exit fullscreen mode

Alt Text

The reason we are using scrcpy here is the window is resizable so you can now enjoy that full size "tablet experience" being rendered on your phone and use your mouse and keyboard for inputs!
And voila! We now have a solution for seamless tablet development.

The Prestige

When done working on tablet views it is very easy to undo our tablet transformation trick! All that is needed is a simple reset with:

> adb shell wm size reset
> adb shell wm density reset
Enter fullscreen mode Exit fullscreen mode

Boom! Back in the phone business.
But wait! We can go even further. We can look up the screen settings of some smaller phones to see how our views look on smaller screens. I'll leave this to you to try on your own!
I hope this has helped you if you need to check things out on a tablet but happen to find yourself without one!


Header photo by Rodion Kutsaev on Unsplash

Discussion (0)