Android CodeView: How To Highlight Text And Where You Can Apply It

Hi, I am Amr Hesham a Software Engineer, I am interested in Android and Compiler Development.

In my Hacker Noon first article, I wrote about how to use the CodeView library to create a syntax highlighter for programming languages with many extra features like autocomplete, change theme, and syntax in the runtime. You can check out the article here.

The first idea is to use it in content-sharing applications. So for example like Twitter, you can highlight hashtags, website URLs and you can also highlight emails. This feature can easily be done by using CodeView in just 3 lines of code.

codeview.addSyntaxPattern(Pattern.compile("#[a-zA-z0-9]+"), Color.BLUE);
codeview.addSyntaxPattern(Patterns.WEB_URL, Color.BLUE);
codeview.addSyntaxPattern(Patterns.EMAIL_ADDRESS, Color.BLUE);

You can also add autocomplete for email providers like @gmail.com or @yahoo.com and the final result will be like this.

The second idea is to use CodeView with a searching feature to highlight all matched keywords in the content. You can easily highlight without searching in the positions in all of the content, and add for example some HTML tags or Spans to highlight one word each time a user looks it up.
This feature can easily be done using few methods.

First, you need to create a Pattern for your search keyword. It can be a normal string or you can enable the user to search with regex, not just string.

Pattern keywordPattern = Pattern.compile(keyword);

In Kotlin it will be:

val keywordPattern : Pattern = Pattern.compile(keyword)

Then you need to add this pattern to CodeView with the color you want to highlight with it.

codeview.addSyntaxPattern(keywordPattern, Color.BLUE);

Then you need to tell CodeView to highlight the new patterns.

codeview.reHighlightSyntax();

Once the user changes the search keyword you just need to replace the old pattern with a new one and there are 2 ways to do that.

codeview.removeSyntaxPattern(keywordPattern);

Or you can remove all the patterns from CodeView.

codeview.resetSyntaxPatternList();

Then you need to add the new pattern and highlight it.

codeview.addSyntaxPattern(newkeywordPattern, Color.BLUE);
codeview.reHighlightSyntax();

And when you have done it, the final result will look like this.

Keep in your mind that CodeView has many features and you can use it in many different ideas. I just gave you 2 examples but there are more and more.

You can use it in language apps, for example, an English app and with an error highlighter so you can highlight spelling mistakes, or create a note app with English words on autocomplete… Etc.

All you need is to use your imagination and creativity to create great features with CodeView.

It’s very easy to use, well documented, and you can find many examples on Github.

And I hope you will enjoy creating your editor with CodeView 😋.

You can find me on: Github, Linkedin, Twitter.

Enjoy Programming 😋

Previously published at https://itnext.io/android-codeview-the-easiest-way-to-highlight-patterns-53702e0e2164