DEV Community: Matt McKenna

Learning Live Templates for Jetpack Compose

Matt McKenna — Wed, 21 Apr 2021 22:11:40 +0000

What are Live Templates?
How can they speed up your development?
And how to create your own for Jetpack Compose!

Intro to Live Templates

If you are like me you like to optimize some of the most common situations in your day to day tasks. Finding little ways to make your machine work more for you is satisfying and when it all adds up can lead to some serious time saved!

Android Studio's live templates are a great and fun way to increase your productivity.

One way to think about live templates are like acronyms. Much like in english "IDK" expands to "I don't know" a live template can expand from main to:

fun main(args: Array<String>) {
  $END$
}

In the follow parts of this post you'll learn:

To use Live Templates in Android Studio
How to create your own Live Templates
About the many variables available for Live Templates
How to use Live Templates with Jetpack Compose

Let's dive in!

How to use Live Templates

Android Studio comes with a bunch of live templates out of the box. These can be accessed by going to: Preferences > Editor > Live Templates. Lets see what kind of options we have in this settings screen.

The list of available categories and live template .
Abbreviation: what is typed to trigger the live template.
Template Text: Where the live template is constructed.
Description: A description for what this live template does.
Additional options for this live template.
The "Edit variables" button for this live template.
A context selector to choose where a live template can be invoked.

To use one of these live templates lets make a new kotlin file, type main, and then wait a second. A tool-tip window will show up enabling the insertion of a live template! Press enter or tab to insert.

And that's it! You have now used a Live Template.

Explore some of the example live templates for Kotlin and Android in the settings window to see what else is predefined. In the next section we will learn how to customize one of the preexisting templates to be a bit more useful.

Creating a Custom Live Template

Let's start by creating a simple live template for a custom TODO comment. I usually put my initials in my TODO's so that I can easily search them. They look like this:

// TODO:mcm

To start making this live template follow these steps:

Go to Preferences > Editor > Live Templates
Select the Kotlin group. This is the group the live template will be added to.
Click the + button in the upper right corner.
Select Live Template.
Type the abbreviation to use to trigger the live template.
Give the live template a description.
In the code block, add the code for the live template. In our case it will be the above TODO.
Choose the contexts where this template should be usable.
1. For this template we want to use it in Kotlin.
2. And it should be usable in all contexts except comments (since we already add the comment slashes).

And that's it! Here it is in action!

Live Template Variables

Defining Variables

To define a variable in a live template simply surround a string with dollar signs. Let's look at the provided Kotlin interface live template:

interface $NAME$ {
  $END$
}

There are two variables here:

$NAME$
$END$

After invoking the live template with tab the editor places your cursor to define a name for the interface. After entering a value for $NAME$ pressing tab again will take you to the next variable, until you get to the variable $END$ . $END$ , and a few other variables, are predefined for specific use.

Predefined Variables

$DOLLAR$
$END$
$SELECTION$

The $DOLLAR$ variable is used for inserting a dollar sign ($) into a live template. Think of it like an escape sequence in a String. It will most likely be used in those sorts of situations. To see an example look at the Kotlin live template, soutv (Prints a value to System.out).

println("$EXPR_COPY$ = $DOLLAR${$EXPR$}")

$END$ is a special live template variable that just signifies the template is done being populated. When pressing tab leads to this variable your cursor will be placed in the $END$ 's position and the live template will no longer be active.

$SELECTION$ is a special variable type as it represents text that is highlighted in the editor. For instance to surround a piece of code with parenthesis we could define a live template like this:

($SELECTION$)

This live template is already defined as P under the Live Templates > surround section, along with a few others.

To trigger a selection live template, select the text you wish to use and then, if you are on mac, press ⌥+⌘+J (Ctrl+Alt+J for windows/linux) to prompt the dialog. Then the applicable live templates will appear! Now you can type the name or select which one to use.

Variable Functions

Alright, this is where we get to the true magic of live templates.

In the first section we called out the edit variable button in the live template window. This is where variables gain extra power.

Lets jump to Live Templates > Kotlin > iter and see how it is defined:

for ($VAR$ in $ITERABLE$) {
  $END$
}

To break this down, we have the structure for a Kotlin for loop. Two variables are defined, $VAR$ for the variable name and $ITERABLE$ for the iterable collection. And finally $END$ to place the cursor in the for loop when the live template finishes executing.

Up until now this is exactly how we would define such a structure, but lets super charge it.

Click on the "Edit Variables" button that we saw above in location 6 to bring up this window table containing each of the defined variables.

The Expression column has a drop down menu that provides access to many functions that can make the live template variables smarter. Let's take a look at the two variables in this tempate.

For the variable ITERABLE we see that there is an expression of kotlinVariable(). This function will make a suggestion for something that can populate this variable. If nothing is found then a Default value can be provided as a suggestion.

For VAR we see it has kotlinSuggestVariableName(). This function is tells the live template to put something like i, s, etc if a type can be inferred or loops are being nested. Here the Default value to suggest is i.

The last column in this table is "Skip if defined". Checking this box means that if the function executes and returns a value then this variable is considered defined and the live template will automatically move your the cursor to the next variable.

Lets see these functions in action! I will make a function to print out elements of a List<String>. Since Android Studio knows the list is only of type string it will suggest a variable name of s for VAR. And since we have a variable of type Iterable in our scope the variable ITERABLE will populate with the available val list! Finally, since the check boxes for "Skip if defined" are not enabled, the cursor still goes to each of these variable in case they need to be edited.

There are LOTS of these functions available for live template variables. The function names are pretty descriptive and I recommend looking through the drop down menus to see the options. There is a comprehensive list on the Jetbrains website.

Live Template Pro tips

Options

There are a few options in the bottom right of the live template window which can add additional convenience.

Expand with tab
- Allows for choosing which key will expand a live template
Reformat according to code style
- a checkbox to use the project's code style when inserting a live template
Shorten FQ names
- FQ stands for Fully Qualified
- This is a way to automatically import objects or annotations that a live template uses

Automatic Imports with Live Templates

To automatically import with a live template the "Shorten FQ names" checkbox needs to be checked. Then include the fully qualified name in the live template definition.

Here is an example for making a quick test function and not needing to import the @Test annotation:

@org.junit.Test
fun $TEST_FUNCTION$() {
  $END$
}

Applicable Contexts

Not all live templates should be accesible at all times. For instance, Kotlin live templates shouldn't be available in a Java context, but we can have even more control than that! Let's look at the live template to create a function with no return type (void).

This live template is useful at the levels of:

top-level
statement
class

but not at the other levels of:

comment
expression
object declaration
other

This means is we can granularly configure when a live template could be applicable. Typing void while in a class will for the live template, but typing void in a comment will not!

In a class:

In a comment:

Live Templates for Jetpack Compose

Many of the code structures, syntax, and best practices in Jetpack Compose UI are very repeatable which means this is a great opportunity to create live templates! Android Studio Arctic Fox comes with some Compose live templates, but lets add some common uses that aren't included.

Private Composable

Abbreviation	pcomp
Description	Create a private composable function
Shorten FQ Names	✅

@androidx.compose.runtime.Composable
private fun $NAME$() {
  $END$
}

Remember mutableStateOf delegate

Abbreviation	remstate
Description	Create a remember mutableStateOf Delegate
Shorten FQ Names	✅

val $VAR$ by androidx.compose.runtime.remember { 
  androidx.compose.runtime.mutableStateOf($END$)
}

Make a Spacer

Abbreviation	spacer
Description	Makes a spacer of set width
Shorten FQ Names	✅

androidx.compose.foundation.layout.Spacer(Modifier.width($NUM$.dp))
$END$

LazyColumn

Abbreviation	lazycol
Description	Makes a LazyColumn Composable
Shorten FQ Names	✅

Edit Variables Values

Name	MOD
Expression	variableOfType(androidx.compose.ui.Modifier)
Default	"androidx.compose.ui.Modifier"
Skip if defined	Unchecked

Name	LIST
Expression	kotlinVariable()
Default
Skip if defined	Unchecked

androidx.compose.foundation.lazy.LazyColumn(modifier = $MODIFIER$) {
  items(items = $LIST$) { item ->
    $END$          
  }
)

Day / Night Preview Composable

This live template idea is from Adam McNeilly

Abbreviation	dnprev
Description	Create a day/night `@Preview` composable function
Shorten FQ Names	✅

@androidx.compose.ui.tooling.preview.Preview(
    name = "Night Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES,
)
@androidx.compose.ui.tooling.preview.Preview(
    name = "Day Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_NO,
)
@androidx.compose.runtime.Composable
private fun $NAME$Preview() {
    $NAME$($END$)
}

Phone Preview Annotation

This series of @Preview annotation live templates is inspired by William Barbosa

Abbreviation	prevphone
Description	Create an `@Preview` annotation for a phone in light/dark mode
Shorten FQ Names	✅

@androidx.compose.ui.tooling.preview.Preview(
    name = "Phone Night Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES,
)
@androidx.compose.ui.tooling.preview.Preview(
    name = "Phone Day Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_NO,
)

Tablet Preview Annotation

This series of @Preview annotation live templates is inspired by William Barbosa

Abbreviation	prevtablet
Description	Create an `@Preview` annotation for a tablet in light/dark mode
Shorten FQ Names	✅

@androidx.compose.ui.tooling.preview.Preview(
    name = "Tablet Night Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES,
    heightDp = 1080,
    widthDp = 760,
)
@androidx.compose.ui.tooling.preview.Preview(
    name = "Tablet Day Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_NO,
    heightDp = 1080,
    widthDp = 760,
)

Desktop Preview Annotation

This series of @Preview annotation live templates is inspired by William Barbosa

Abbreviation	prevdesktop
Description	Create an `@Preview` annotation for a desktop in light/dark mode
Shorten FQ Names	✅

@androidx.compose.ui.tooling.preview.Preview(
    name = "Desktop Night Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES,
    heightDp = 760,
    widthDp = 1080,
)
@androidx.compose.ui.tooling.preview.Preview(
    name = "Desktop Day Mode",
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_NO,
    heightDp = 760,
    widthDp = 1080,
)

What's next?

Go play with and create some live templates! They are really fun to make and use in day to day development. If you need help with them or want to share what you've made reach out on Twitter! I'd love to see them (and add to my collection 😉)!

Header Photo by Tim Arterbury on Unsplash and modified by me.

Special thanks to Adam McNeilly for reviewing and proof reading this article.

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

Matt McKenna — Fri, 02 Apr 2021 13:37:57 +0000

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

Android Debug Bridge - Our good friend the Android Debug Bridge (adb). We will be using some commands here to perform our magic trick.
Search Engine - One of your choice, I recommend DuckDuckGo (go privacy!)
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
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).

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

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

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

You should see your device make this change immediately.

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

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

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

> adb shell wm density
Physical density: 560
Override density: 308

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

Alakazam!

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

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

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

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

Effective Naming of Booleans

Matt McKenna — Mon, 23 Nov 2020 00:56:41 +0000

"Do you have bananas?"

"Yes! We have no bananas."

This is the title of a song by Frank Silver and Irvine Cohn that my great grandfather used to play for me on his ukulele, but today we will be using it to better understand how to name boolean values.

This line is comedic in its confusion. Upon asking a yes or no question the inquisitor is met with both in response. How are they supposed to interpret this answer? After a moment of thought it can be fairly safe to determine the shopkeeper has no bananas. That extra moment of thought leading to this conclusion is what we will be discussing.

Lets translate this question into some Kotlin code. We can turn "Yes! We have no bananas into the below boolean declaration.

var hasNoBananas = true

and "No! We have no bananas" into the false equivalent

var hasNoBananas = false

This code is perfectly valid and won't cause any problems in its implementation.

if (hasNoBananas) {
  println("We have no bananas")
} else {
  println("We have bananas")
}

Let's take a step away from the bananas for a moment and look at a more practical example. Let's consider a feature flag that will determine whether or not our users have access to a new part of our app and name it with the same intention we have been looking at. We can do this in two ways depending on the words we are using. With the inclusion of 'not' or using a negated version of the word itself.

var isNotEnabled = true
var isDisabled = true

This looks just like the example with the bananas, but when applied to our context, it has the same effect as the reply from the shopkeeper. The 'not' in the boolean name creates a moment of mental processing needed to understand that true is actually the negative case and false is actually the positive case. Much like a double negative in grammar, the reader of this code needs to apply more thought to what will happen when presented with:

fun setFeatureEnabled(isEnabled: Boolean) {
  if (isEnabled) {
    // Enable Feature
  } else {
    // Disable Feature
  }
}


setFeatureEnabled(isNotEnabled) // setFeatureEnabled(true)
// or
setFeatureEnabled(isDisabled) // setFeatureEnabled(true)

We have added a negation into the name of our boolean. We are asking the reader of our code to care about the name as well as the current value to understand what we are intending. In the above example we are passing true to our function with the names isNotEnabled and isDisabled. This will lead to confusion as the function is expecting true to be the enabled case, but reading this code it looks like we want to disable our feature.

When naming a boolean it is best to omit any modifiers to the intention of the value in the name. We wouldn't write something like:

var isNotNOTEnabled = true

so we should also not write something like:

var isNotEnabled = true

This also applies to words that can have negated meaning as we could easily name a boolean like:

var isDisabled = true

But this has the same problem of needing to align the positive true with the negated naming and vice-versa. And just like above we wouldn't write:

var isNotDisabled = true

This would be clearer and logically equivalent if it was named isEnabled. Therefore, we should rely on the positive naming scheme to keep the true / false values aligned with the boolean that they represent.

Applying this understanding to our case

Making the changes to the above we can see how effective this is, both for the shopkeeper and our app!

var hasBananas = true

fun answerFruit(fruit: String, hasInventory: Boolean) {
    if (hasInventory) {
      println("We have $fruit")
    } else {
      println("We have no $fruits")
    }
}

answerFruit("bananas", hasBananas) // We have bananas

hasBananas = false

answerFruit("bananas", hasBananas) // We have no bananas

var isEnabled = false
setFeatureEnabled(isEnabled) // setFeatureEnabled(false)

isEnabled = true
setFeatureEnabled(isEnabled) // setFeatureEnabled(true)

By removing the negation in the name, we now understand and define the desired intent. Applying this practice prevents needing to make any mental jumps when working with the humble boolean.

DEV Community: Matt McKenna

Learning Live Templates for Jetpack Compose

Intro to Live Templates

In the follow parts of this post you'll learn:

How to use Live Templates

Creating a Custom Live Template

Live Template Variables

Defining Variables

There are two variables here:

Predefined Variables

Variable Functions

Live Template Pro tips

Options

Automatic Imports with Live Templates

Applicable Contexts

In a class:

In a comment:

Live Templates for Jetpack Compose

Private Composable

Remember mutableStateOf delegate

Make a Spacer

LazyColumn

Edit Variables Values

Day / Night Preview Composable

Phone Preview Annotation

Tablet Preview Annotation

Desktop Preview Annotation

What's next?

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

The Pledge

Tools of the Trick

The Turn

Introducing scrcpy

The Prestige

Effective Naming of Booleans

Applying this understanding to our case

Introducing `scrcpy`