Live Template in Android Studio
When you are typing something in the Android Studio it shows you a bunch of suggestion which when selected writes certain code in your editor.
This reduces your time to write code manually and increases productivity. But there are only a certain number of code completion shortcuts that are available to you readily.
In this blog, I will show you how we can use the same feature to generate the code that we have to write too often or too long in no time and save time.
The feature is called Live Template in Android Studio but this feature can be used in any IntelliJ IDE and to any kind of file that it supports. To access the Live Template, Goto Preference/Settings (⌘ , in Mac and Ctrl+Alt+S in Windows/Linux) of Android Studio. In the Editor menu, there is a sub-menu called Live Templates. There you can see all the existing shortcuts that are available by default or through plugins.
This feature is available for other languages like .js, .ts, .java, .kt and more
When you press the plus button then it shows the option to create a Live Template or Template Group. You can first create a Template Group to distinguish yours from other templates. Let’s name it Custom. If there is already one you can reuse it or name it differently. Select the custom template you want to use, then press the + button. This time select a Live Template. A small form will show up at the bottom.
I will describe each field. The abbreviation field is the shortcut that when typed will write the code. In the above example, stless is the abbreviation. The description field is where you write what this shortcut does. This is especially helpful to distinguish if there are two similar abbreviations. The template text is where all the magical code generation is written. The Define section is where you write the type of file and the context in which the code completion option is shown. The Edit variable button is helpful to write custom variables which I will be discussing shortly. In the options, you can select which key will perform the code completion and if you want to reformat the code.
Let’s write our first Live template.
Here I have added an abbreviation for imm . In the template text, I have written the code to import the material from the flutter package. This might seem pretty useless and simple code to generate but it's easier to understand. ( We will be moving to advance stuff later). In the context field, I have selected the autocomplete to work only in dart files and in top-level meaning, not inside any class or functions.
As you can see, when we write imm and press the tab then the import statement is written automatically. If you do this inside class of function, nothing is shown as it is invalid to write an import statement inside class.
Let’s rewrite the stless shortcut from the plugin with some customization.
From here on I will only show you the template code as other are pretty much identical.
In the code above, there is $WidgetName$. In the live template, anything written between two $ signs is a variable. So here WidgetName is a variable that you can change when code generation writes the code. You can also see END. It is a pre-defined variable where the cursor is moved when the code generation is completed. Let’s see the action.
Well, that covers the basics of Live Template. Now, let’s take a look at the variable. In Live template, we can define the default value for the variable. This helps with pre-filling the variable with a class name or file name and many more. For example, you may need to import the generated file as part of the main file. In this case, you might need to type the name of the file manually. But you can generate this as well.
Here the template text is part '$filename$.g.dart'; When we define a variable and press edit variable we can define the expression we can use for that particular variable. There are lots of expressions that we can use which will work as the default values for that variable. In the above example, I have selected fileNameWithoutExtension() . As the name suggests, this will write the filename without .dart extension.
This way the code can be generated in any way desired. I will write some sample code that I used too frequently. If you use freezed library and this template will come in handy and if you are not using you should start using it.
Similarly, if you are using cubit as state management then the template to generate state and cubit might be fruitful. I am using dartz library here but you can modify it as per your use case.
These will help you to write your code quickly and efficiently by creating a template for the code you normally have to use repeatedly.
You can connect with me on Linkedin.
