codeview-android

Additional

Language
Kotlin
Version
1.3.1 (Sep 9, 2017)
Created
Aug 23, 2016
Updated
Sep 16, 2018
Owner
Kirill Biakov (kbiakov)
Contributors
Kirill Biakov (kbiakov)
e16din
JamieKalloe
3
Activity
Badge
Generate
Download
Source code
APK file

Show card

CodeView (Android)

CodeView helps to show code content with syntax highlighting in native way.

Description

CodeView contains 3 core parts to implement necessary logic:

  1. CodeView & related abstract adapter to provide options & customization (see below).

  2. For highlighting it uses CodeHighlighter, it highlights your code & returns formatted content. It's based on Google Prettify and their Java implementation & fork.

  3. CodeClassifier is trying to define what language is presented in the code snippet. It's built using Naive Bayes classifier upon found open-source implementation, which I rewrote in Kotlin. There is no need to work with this class directly & you must just follow instructions below. (Experimental module, may not work properly!)

Download

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Add the dependency:

compile 'com.github.kbiakov:CodeView-android:1.3.1'

Usage

If you want to use code classifier to auto language recognizing just add to your Application.java:

// train classifier on app start
CodeProcessor.init(this);

Having done ones on app start you can classify language for different snippets even faster, because the algorithm needs time for training on sets for the presented listings of the languages which the library has.

Add view to your layout & bind as usual:

<io.github.kbiakov.codeview.CodeView
 android:id="@+id/code_view"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>
CodeView codeView = (CodeView) findViewById(R.id.code_view);

So now you can set code using implicit form:

// auto language recognition
codeView.setCode(getString(R.string.listing_js));

Or explicit (see available extensions below):

// will work faster!
codeView.setCode(getString(R.string.listing_py), "py");

Customization

When you call setCode(...) the view will be prepared with the default params if the view was not initialized before. So if you want some customization, it can be done using the options and/or adapter.

Initialization

You can initialize the view with options:

codeView.setOptions(Options.Default.get(this)
    .withLanguage("python")
    .withCode(R.string.listing_py)
    .withTheme(ColorTheme.MONOKAI));

Or using adapter (see Adapter or example for more details):

final CustomAdapter myAdapter = new CustomAdapter(this, getString(R.string.listing_md));
codeView.setAdapter(myAdapter);

Note: Each CodeView has a adapter and each adapter has options. When calling setOptions(...) or setAdapter(...) the current adapter is "flushed" with the current options. If you want to save the state and just update options saving adapter or set adapter saving options you must call updateOptions(...) or updateAdapter(...) accordingly.

Options

Options helps to easily set necessary params, such as code & language, color theme, font, format, shortcut params (max lines, note) and code line click listener. Some params are unnecessary.

When the view is initialized (options or adapter are set) you can manipulate the options in various ways:

codeView.getOptions()
    .withCode(R.string.listing_java)
    .withLanguage("java")
    .withTheme(ColorTheme.MONOKAI);

Color theme

There are some default themes (see full list below):

codeView.getOptions().setTheme(ColorTheme.SOLARIZED_LIGHT);

But you can build your own from a existing one:

ColorThemeData myTheme = ColorTheme.SOLARIZED_LIGHT.theme()
    .withBgContent(android.R.color.black)
    .withNoteColor(android.R.color.white);

codeView.getOptions().setTheme(myTheme);

Or create your own from scratch (don't forget to open PR with this stuff!):

ColorThemeData customTheme = new ColorThemeData(new SyntaxColors(...), ...);
codeView.getOptions().setTheme(customTheme);

Font

Set font for your code content:

codeView.getOptions().withFont(Font.Consolas);

Font.Consolas is a font preset (see the list of available below). To use your own font you can use similar method by providing Typeface or font path. Fonts are internally cached.

Format

Manage the space that code line take. There are 3 types: Compact, ExtraCompact and Medium. Setup is similar:

// Kotlin
codeView.getOptions().withFont(Font.Compact)
// Java
codeView.getOptions().withFont(Format.Default.getCompact());

Also you can create custom Format by providing params such as scaleFactor, lineHeight, borderHeight (above first line and below last) and fontSize.

Adapter

Sometimes you may want to take code lines under your control, and that's why you need a Adapter.

You can create your own implementation as follows:

  1. Create your model to store data, for example some MyModel class.
  2. Extend AbstractCodeAdapter<MyModel> typed by your model class.
  3. Implement necessary methods in obtained MyCodeAdapter:
// Kotlin
class MyCodeAdapter : AbstractCodeAdapter<MyModel> {
    constructor(context: Context, content: String) : super(context, content)

    override fun createFooter(context: Context, entity: MyModel, isFirst: Boolean) =
        /* init & return your view here */
}
// Java
public class MyCodeAdapter extends AbstractCodeAdapter<MyModel> {
    public CustomAdapter(@NotNull Context context, @NotNull String content) {
     // @see params in AbstractCodeAdapter
        super(context, content, true, 10, context.getString(R.string.show_all), null);
    }

    @NotNull
    @Override
    public View createFooter(@NotNull Context context, CustomModel entity, boolean isFirst) {
        return /* your initialized view here */;
    }
}
  1. Set custom adapter to your code view:
    finalMyCodeAdapter adapter =newMyCodeAdapter(this, getString(R.string.listing_py));
    codeView.setAdapter(diffsAdapter);


  1. Init footer entities to provide mapper from your model to view:
    // it will add an addition diff to code line adapter.addFooterEntity(16, newMyModel(getString(R.string.py_addition_16), true)); // and this a deletion diff adapter.addFooterEntity(11, newMyModel(getString(R.string.py_deletion_11), false));
    1. You can also add a multiple diff entities:
      AbstractCodeAdapter<MyModel>.addFooterEntities(HashMap<Int, List<MyModel>> myEntities)

      Here you must provide a map from code line numbers (started from 0) to list of line entities. It will be mapped by adapter to specified footer views.

      See Github diff as example of my "best practice" implementation.