Android CodeView: Create a code editor with Snippets

Hello everyone, I am Amr Hesham a Software Engineer, I am interested in Android Development and Compiler Design, in the last few articles I showed you some cool features on how to use the CodeView library to create your own code editor for your custom language or data format with syntax highlighter, autocomplete, error and warn highlighter, highlight search result …etc. and in this article I will show you how to implement code snippets in your editor easily using CodeView 1.1.0.

Snippets or Live Templates are very useful features and you can find them in most of the modern Code editors and IDE’s like Visual Studio Code and all of JetBrains IDE’s such as Android Studio, IntelliJ IDEA because it helps us to write repeating code patterns easily with few characters and help you write code faster, and this feature will be very needed in your Code Editor App to make the user write fast on the Mobile Device, when you type for and the IDE write for loop for you that’s what is called snippets.

Starting from version 1.1.0, CodeView help you to support snippets easily with few lines of code, Let’s start by implementing our example, in this example, we want to help our Java Developers users to start writing code fast, so our goal is when the user clicks on snippet with prefix ‘main’ we will insert the Hello World code for them.

To learn how to add CodeView in your project and how to create a highlighter for Java please check this Article and the official repository, so we can focus on the Code Snippets feature.

• Github Repository: AmrDeveloper/codeview.

After you implement Java Highlighter it’s time to add your keyword and snippets.

In the CodeView library keywords and snippets are classes that implementing the Code interface.

public interface Code {
    String getCodeTitle();
    String getCodePrefix();
    String getCodeBody();
}

This class has three attributes title, prefix and body, It’s important to know the difference between them

• The title is that text that you see on the autocomplete dropdown menu so it can be for example “Keyword Package”.

• The prefix is that text that we use it for filtering in the autocomplete adapter for example “package”

• The body is what we inserted in the code when the user types a string that is a subset of the prefix and then he clicks on the title for example “package main;”

You will understand the different Cleary when we write some examples, so lets start by the first example.

First, you need to create a list that contains all your keywords and snippets.

String mainPackageTitle = “Main Code”;
String mainPacakgePrefx = “main”;
String mainPackageBody = “package main;\n\npublic class Main {“ +
 “\n\tpublic static void main(String[] args){“ +
 “\n\t\tSystem.out.println(\”Hello, World!\”);\n\t}\n}”;
List<Code> codes = new ArrayList<>();
codes.add(new Snippet(mainPackageTitle, mainPacakgePrefx, mainPackageBody));

Then you need to create CodeViewAdapter and set it to CodeView object.

CodeViewAdapter codeAdapter = new CodeViewAdapter(this, codes);
codeview.setAdapter(codeAdapter);

Here we created our snippet with prefix ‘main’ so once the user input is a subset of ‘main’ the user will see “Main Code” option in the AutoComplete dropdown menu and once he chooses it the hello world example will be inserted in Code View editor and the final result will be like this.

You can add as many snippets as you want, but what if you want the autocomplete drop down menu to show snippets and keywords together, That’s easy because both classes are Code type soo you can add both of them to the list.

List<Code> codes = new ArrayList<>();
codes.add(new Keyword(.., .., ..));
codes.add(new Snippet(.., .., ..));

That’s easy and you can extend this example so you can give the user the power to define his keyword and snippets! and your work is just inserted them on the list and pass it to the CodeViewAdapter.

For users of Versions before 1.1.0, you still have the old option to create autocomplete feature with an array of strings using the normal ArrayAdapter, so your old code will not break.

In the end I hope that you loved this feature, you can check the full documentation and example of CodeView in the GitHub repository, if you love it give it a star and you are most welcome to suggest features, report bugs, write articles, contribute to the code.

You can find me on: GitHub, LinkedIn, Twitter.

Enjoy CodeView and Programming 😋