Create a Code Editor Android Application using CodeView Library





5.00/5 (1 vote)
How to create a Code Editor Android Application for Go Programming Langauge using CodeView Library
Features
Before we start creating the Code Editor app, for example, we will create it for Golang, We need to create a requirement list for this app, for example, we need our Code Editor to support the following:
- Syntax highlighter for GoLang
- Support multi-theme and the ability to change the theme in the runtime
- Error highlighter to highlight errors and warns
- Highlight TODO Comment with different colors like JetBrains IDEs
- AutoComplete based on our Language keywords
Implementation
So now, we can start working on the project feature by feature.
We will use CodeView
Library to help us create this CodeEditor
.
After we start a new project, we need to add the library to it.
In build.gradle file, we will add jitpack support to download CodeView
Library:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
In dependency file, we will add CodeView
, then sync the gradle to download it:
dependencies {
implementation 'com.github.AmrDeveloper:CodeView:1.0.0'
}
Now it's time to add CodeView
to the XML layout. For this example, we will use activity_main
:
<com.amrdeveloper.codeview.CodeView
android:id="@+id/codeView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/darkGrey"
android:dropDownWidth="@dimen/dimen150dp"
android:dropDownHorizontalOffset="0dp"
android:dropDownSelector="@color/darkGrey"
android:gravity="top|start" />
Now we need to configure the View
to work with GoLang so we will create a simple Java class that contains the configuration for CodeView
and set colors for every attribute on your language, for example, color for number and color for string
, etc.
public class GoSyntaxManager {
//Language Keywords
private static final Pattern PATTERN_KEYWORDS =
Pattern.compile("\\b(break|default|func|interface|case|defer|" +
"go|map|struct|chan|else|goto|package|switch|const" +
"|fallthrough|if|range|type|continue|for|import|return|var|" +
"string|true|false|new|nil|byte|bool|int|int8|int16|int32|int64)\\b");
//Brackets and Colons
private static final Pattern PATTERN_BUILTINS = Pattern.compile("[,:;[->]{}()]");
//Data
private static final Pattern PATTERN_NUMBERS = Pattern.compile("\\b(\\d*[.]?\\d+)\\b");
private static final Pattern PATTERN_CHAR = Pattern.compile("'[a-zA-Z]'");
private static final Pattern PATTERN_STRING = Pattern.compile("\".*\"");
private static final Pattern PATTERN_HEX = Pattern.compile("0x[0-9a-fA-F]+");
private static final Pattern PATTERN_TODO_COMMENT = Pattern.compile("//TODO[^\n]*");
private static final Pattern PATTERN_COMMENT =
Pattern.compile("//(?!TODO )[^\\n]*" + "|" + "/\\*(.|\\R)*?\\*/");
private static final Pattern PATTERN_ATTRIBUTE = Pattern.compile("\\.[a-zA-Z0-9_]+");
private static final Pattern PATTERN_OPERATION =
Pattern.compile( ":|==|>|<|!=|>=|<=|->|=|>|<|%|-|-=|%=|\\+|\\-|\\-=|
\\+=|\\^|\\&|\\|::|\\?|\\*");
public static void applyMonokaiTheme(Context context, CodeView codeView) {
codeView.resetSyntaxPatternList();
//View Background
codeView.setBackgroundColor
(codeView.getResources().getColor(R.color.monokia_pro_black));
//Syntax Colors
codeView.addSyntaxPattern
(PATTERN_HEX, context.getResources().getColor(R.color.monokia_pro_purple));
codeView.addSyntaxPattern
(PATTERN_CHAR, context.getResources().getColor(R.color.monokia_pro_green));
codeView.addSyntaxPattern
(PATTERN_STRING, context.getResources().getColor(R.color.monokia_pro_orange));
codeView.addSyntaxPattern
(PATTERN_NUMBERS, context.getResources().getColor(R.color.monokia_pro_purple));
codeView.addSyntaxPattern
(PATTERN_KEYWORDS, context.getResources().getColor(R.color.monokia_pro_pink));
codeView.addSyntaxPattern
(PATTERN_BUILTINS, context.getResources().getColor(R.color.monokia_pro_white));
codeView.addSyntaxPattern
(PATTERN_COMMENT, context.getResources().getColor(R.color.monokia_pro_grey));
codeView.addSyntaxPattern
(PATTERN_ATTRIBUTE, context.getResources().getColor(R.color.monokia_pro_sky));
codeView.addSyntaxPattern
(PATTERN_OPERATION, context.getResources().getColor(R.color.monokia_pro_pink));
//Default Color
codeView.setTextColor( context.getResources().getColor(R.color.monokia_pro_white));
codeView.addSyntaxPattern
(PATTERN_TODO_COMMENT, context.getResources().getColor(R.color.gold));
codeView.reHighlightSyntax();
}
}
In MainActivity
, now we need to initalize the CodeView
and set the configuration:
public class MainActivity extends AppCompatActivity {
private CodeView mCodeView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCodeView = findViewById(R.id.codeView);
GoSyntaxManager .applyMonokaiTheme(this, mCodeView);
configLanguageAutoComplete();
}
private void configLanguageAutoComplete() {
//Load current Programming Language
final String[] languageKeywords = getResources().getStringArray(R.array.go_keywords;
//Custom list item xml layout
final int layoutId = R.layout.suggestion_list_item;
//TextView id to put suggestion on it
final int viewId = R.id.suggestItemTextView;
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, layoutId, viewId,
languageKeywords);
//Add Custom Adapter to the CodeView
mCodeView.setAdapter(adapter);
}
}
Now our CodeEditor
is ready with all the features that we want.
We can also add hint, warn and error support easily, for example, to add error, hint, warn line highlighter, you can use this function to set the line number and color.
codeView.addErrorLine(lineNumber, color);
You can remove the syntax or error highlighter.
codeView.resetSyntaxPatternList();
codeView.removeAllErrorLines();
Result
And the library contains some other features that you may want to use.
Check the library repository to see the documentation and code examples for Java, Python.
History
- 4th November, 2020: Initial version