If you are thinking or displaying long content in your app, for example a blog post, then you need to think and plan for how this content will be rendered. Even though it’s possible to use a textview, you will have a hard time customizing to account for features like links, colors, headings etc. TextView isn’t a very good route to go. That leaves us with two options: webview or markdown.

In this post we will look at markdown. Note that most Markdown libraries are actually built from WebView.

Contents hide
1 (a). tiagohm/MarkdownView
1.1 Step 1: Install It
1.2 Step 2: Add MarkdownView to Layout
1.3 Step 3: Load Markdown
1.4 Step 3: Additional Features
1.5 Example
1.6 Reference
2 (b). falnatsheh/MarkdownView
2.1 Step 1: Installation
2.2 Step 2: Add to Layout
2.3 Step 3: Write Code
2.4 Example
2.5 Demo
2.6 Reference
3 (c). mukeshsolanki/MarkdownView-Android
3.1 Step 1: Installation
3.2 Step 2: Add Layout
3.3 Step 3: Code
3.4 Example
3.5 Reference

(a). tiagohm/MarkdownView

Android library to display markdown text.

This library uses Flexmark and some of its extensions.

The library can:

  • render markdown from string.
  • Render markdown from assets.
  • render markdown from a URL.

In cases of URL it uses AsyncTask to download the markdown so your app won’t freeze. In all those cases all you need is pass the appropriate string, be it a URL, markdown text or file path.

Step 1: Install It

It’s hosted in jitpack, so you will need to add jitpack as a maven url in under allProjects closure in your root-level build.gradle file:

maven { url 'https://jitpack.io' }

Then add the dependency in your app-level build.gradle file:

implementation 'com.github.tiagohm.MarkdownView:library:0.19.0'

Then sync your project.

Step 2: Add MarkdownView to Layout

The next step is to go to your layout and add the MarkdownView there:

<br.tiagohm.markdownview.MarkdownView
    android:id="@+id/markdown_view"
    app:escapeHtml="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Step 3: Load Markdown

If you are using Java, start by referencing the MarkdownView:

mMarkdownView = (MarkdownView)findViewById(R.id.markdown_view);

If you are using Kotlin, no need to do that since you can import the view using Kotlin synthetics or even better by ViewBinding.

Then in either case we proceed. You can use the default CSS:

mMarkdownView.addStyleSheet(new Github());

or load an external css located in the assets:

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("my_css.css", null))

Then load string markdown:

mMarkdownView.loadMarkdown("**MarkdownView**");

Or load markdown from assets:

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

Or load markdown as a file object. This file for example can be loaded from the file system:

mMarkdownView.loadMarkdownFromFile(new File());

Or you can load the markdown from online:

mMarkdownView.loadMarkdownFromUrl("url");

That’s it.

Step 3: Additional Features

You can use custom css. Either build the CSS programmatically via Java/Kotlin:

//InternalStyleSheet css = new InternalStyleSheet();
InternalStyleSheet css = new Github();
css.addFontFace("MyFont", "condensed", "italic", "bold", "url('myfont.ttf')");
css.addMedia("screen and (min-width: 1281px)");
css.addRule("h1", "color: orange");
css.endMedia();
css.addRule("h1", "color: green", "font-family: MyFont");
mMarkdownView.addStyleSheet(css);

Or load the CSS from an external file:

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github.css", null);
mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github2.css", "screen and (min-width: 1281px)");

You can also load an external Javascript file:

JavaScript js = new ExternalJavaScript(url, async, defer);
mMarkdownView.addJavascript(js);

This is a feature rich library. Here are it’s features:

  • Bold **Text** or __Text__
  • Italic *Text* or _Text_
  • Strikethrough ~~Text~~
  • Horizontal Rules ---
  • Headings #
  • Links [alt](url)
  • Images ![alt](url)
  • Code
  • Blockquote
  • Nested Blockquote
  • Lists
  • Tables
  • TaskList
  • AutoLink
  • Abbreviation
  • Mark ==Text==
  • Subscript H~2~O
  • Superscript 10^-10^
  • Keystroke @ctrl+alt+del@
  • MathJax Inline $x = {-b pm sqrt{b^2-4ac} over 2a}$
  • MathJax $$x = {-b pm sqrt{b^2-4ac} over 2a}$$
  • Footnotes
  • Image Resizing ![alt](url@100px|auto)
  • Syntax Highlighting (using Highlight.js)
  • Emoji (EmojiOne v2) :smile:
  • Custom CSS
  • Youtube @[youtube](fM-J08X6l_Q)
  • Twitter
  • JavaScripts
  • Label --DEFAULT-- ---SUCCESS--- ----WARNING---- -----DANGER-----
  • Bean {{fieldName}}
  • Custom Attributes { #id .class name=value name='value'}
  • Text Align, Text Size and Text Colors using Custom Attributes

Example

Here’s a MarkdownView Example using this library:

activity_main.xml

We start by creating the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="br.tiagohm.markdownview.app.MainActivity">

    <br.tiagohm.markdownview.MarkdownView
        android:id="@+id/mark_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:escapeHtml="false" />
</LinearLayout>

MainActivity.java

Then we write our code, either in kotlin or java:

package br.tiagohm.markdownview.app;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

import br.tiagohm.markdownview.MarkdownView;
import br.tiagohm.markdownview.css.InternalStyleSheet;
import br.tiagohm.markdownview.css.styles.Github;

public class MainActivity extends AppCompatActivity {

    private MarkdownView mMarkdownView;
    private InternalStyleSheet mStyle = new Github();

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.change_theme_action:
                break;
        }

        return true;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Cria o bean.
        MyBean myBean = new MyBean();
        myBean.setHello("Olá");
        myBean.setDiasDaSemana(MyBean.DiasDaSemana.DOMINGO);

        mMarkdownView = findViewById(R.id.mark_view);
        mMarkdownView.addStyleSheet(mStyle);
        //http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
        mStyle.addMedia("screen and (min-width: 320px)");
        mStyle.addRule("h1", "color: green");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 481px)");
        mStyle.addRule("h1", "color: red");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 641px)");
        mStyle.addRule("h1", "color: blue");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 961px)");
        mStyle.addRule("h1", "color: yellow");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1025px)");
        mStyle.addRule("h1", "color: gray");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1281px)");
        mStyle.addRule("h1", "color: orange");
        mStyle.endMedia();
        mMarkdownView.setBean(myBean);
        mMarkdownView.loadMarkdownFromAsset("markdown1.md");
    }

    public static class MyBean {

        public enum DiasDaSemana {
            DOMINGO,
            SEGUNDA,
            TERCA,
            QUARTA,
            QUINTA,
            SEXTA,
            SABADO
        }

        private String hello;
        private DiasDaSemana diasDaSemana;

        public String getHello() {
            return hello;
        }

        public void setHello(String hello) {
            this.hello = hello;
        }

        public DiasDaSemana getDiasDaSemana() {
            return diasDaSemana;
        }

        public void setDiasDaSemana(DiasDaSemana diasDaSemana) {
            this.diasDaSemana = diasDaSemana;
        }
    }
}

Here is the source code reference.

Reference

Read more about this library here

(b). falnatsheh/MarkdownView

MarkdownView is an Android webview with the capablity of loading Markdown text or file and display it as HTML, it uses MarkdownJ and extends Android webview.

MarkdownView (Markdown For Android) is an Android library that helps you display Markdown text or files (local/remote) as formatted HTML, and style the output using CSS.

The MarkdownView itself extends Android Webview and adds the necessary logic to parse Markdown (using MarkdownJ) and display the output HTML on the view.

Step 1: Installation

Install MarkdownView from jcenter:

implementation 'us.feras.mdv:markdownview:1.1.0'

Step 2: Add to Layout

Add MarkdownView to your XML layout:

   <us.feras.mdv.MarkdownView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/markdownView" />

Step 3: Write Code

If you are using Java reference the MarkdownView from our layout:

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdownView);
markdownView.loadMarkdown("## Hello Markdown");

You can also use view Binding or data binding whether your are using java or kotlin. If you are using Kotlin you can use Kotlin Synthetics.

You can also create MarkdownView programmatically:

  MarkdownView markdownView = new MarkdownView(this);
  setContentView(markdownView);
  markdownView.loadMarkdown("## Hello Markdown");

Example

Let’s now look at a full example of how to use MarkdownView library to load markdown locally:

MainActivity.java

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;

public class LocalMarkdownActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView webView = new MarkdownView(this);
        setContentView(webView);
        webView.loadMarkdownFile("file:///android_asset/hello.md");
    }
}

How to Apply themes to MarkdownView

Let’s say you have themes and you want to display theme. User chooses a theme from a spinner and we apply that theme to markdownview:

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MarkdownThemesActivity extends AppCompatActivity implements
        OnItemSelectedListener {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_themes);
        Spinner themesSpinner = (Spinner) findViewById(R.id.themes_spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                this, R.array.md_themes, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        themesSpinner.setAdapter(adapter);
        themesSpinner.setSelection(0);
        themesSpinner.setOnItemSelectedListener(this);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int pos,
            long id) {
        MarkdownView mdv = (MarkdownView) findViewById(R.id.markdownView);
        mdv.loadMarkdownFile("file:///android_asset/hello.md",
                "file:///android_asset/markdown_css_themes/"
                        + parent.getItemAtPosition(pos).toString() + ".css");
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // no-op
    }
}

How to Load Markdown from a string

If you ahev your markdown in memory as a string, this example shows how you can load it:

public class MarkdownDataActivity extends AppCompatActivity {

    private EditText markdownEditText;
    private MarkdownView markdownView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_view);
        markdownEditText = (EditText) findViewById(R.id.markdownText);
        markdownView = (MarkdownView) findViewById(R.id.markdownView);
        String text = getResources().getString(R.string.md_sample_data);
        markdownEditText.setText(text);
        updateMarkdownView();

        markdownEditText.addTextChangedListener(new TextWatcher() {

            @Override
            public void afterTextChanged(Editable s) {}

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                updateMarkdownView();
            }
        });

    }

    private void updateMarkdownView() {
        markdownView.loadMarkdown(markdownEditText.getText().toString());
    }
}

How to Render Markdowb from online

If you ahev the markdown file hosted remotely and you want to download and render it, here’s how you do that:

public class RemoteMarkdownActivity extends AppCompatActivity {
    @Override 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView markdownView = new MarkdownView(this); 
        setContentView(markdownView);
        markdownView.loadMarkdownFile("https://raw.github.com/falnatsheh/MarkdownView/master/README.md");
    }
}

Access this examples here

Demo

Here’s demo:

Reference

Find complete reference here

(c). mukeshsolanki/MarkdownView-Android

MarkdownView is a simple library that helps you display Markdown text or files on Android as a html page just like Github.

Step 1: Installation

Add jitpack in your root level build.gradle file:

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

Then install the library;

implementation 'com.github.mukeshsolanki:MarkdownView-Android:1.1.1'

Step 2: Add Layout

Next you need to add MarkdowView to you layout:

<com.mukesh.MarkdownView
    android:id="@+id/markdown_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Step 3: Code

Then write java or kotlin code:

Reference the MarkdownView:

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);

Here’s how you set Markdowb from a string:

markdownView.setMarkDownText("# Hello WorldnThis is a simple markdown"); //Displays markdown text
...

Here’s howyou load markdown from assets:

markdownView.loadMarkdownFromAssets("README.md"); //Loads the markdown file from the assets folder
...

And here’s how you load markdown from file system or path:

File markdownFile=new File("filePath");
markdownView.loadMarkdownFromFile(markdownFile); //Loads the markdown file.

Example

Here’s a complete example:

MainActivity.java

package com.mukesh.markdownview.example;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.mukesh.MarkdownView;

public class MainActivity extends AppCompatActivity {

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);
    markdownView.setMarkDownText("# Hello WorldnThis is a simple markdownn"
        + "https://github.com/mukeshsolanki/MarkdownView-Android/");
    //markdownView.loadMarkdownFromAssets("README.md");
    markdownView.setOpenUrlInBrowser(true); // default false

  }
}

Find source code here.

Reference

Find complete reference here.