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.

Overview

MarkdownView screenshot Download

About

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.

Getting started

  • To add MarkdownView to your project, add the following to build.gradle file:
	dependencies { 
	    compile 'us.feras.mdv:markdownview:1.1.0'
	}

Usage

Add MarkdownView to your layout:

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

and reference it in your Activity/Fragment:

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

Note: You could also create the view by code. Below an example of how to set the whole activity to be a MarkdownView by Adding the following to your onCreate method:

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

Screenshots

Demo App and Code Sample

The above screenshots taking from the demo app which could be found here. The demo app include code to demonstrate:

  • Loading Local Markdown File.
  • Loading Remote Markdown File.
  • Loading Markdown text.
  • Live Preview sample code (similar to Marked Mac app)
  • Themes

Loading Markdown text or file:

  • loadMarkdown(String text): Using this method will result in loading md string to the MarkdownView and displaying it as HTML.

  • loadMarkdownFile(String url): You can use this method to load local or online files.

To load a local file, you have to add it to your assets folder and pass a url that start with "file:///android_asset/" :

markdownView.loadMarkdownFile("file:///android_asset/myFile.md");

To load a remote file you need to pass the full url :

markdownView.loadMarkdownFile("http://www.my-site.com/myFile.md");

Theming

You could apply custom CSS to the MarkdownView. Example:

markdownView.loadMarkdownFile("file:///android_asset/hello.md","file:///android_asset/MyCustomTheme.css");

You could take a look at CSS example here, you could also view them in the sample app.

ChangeLog:

  • MarkdownView 1.1.0:
    • Support Loading Markdown file from assets subfolders (Thanks @echodjb).
  • MarkdownView 1.0.0:
    • Convert to Gradle Project (Avillable now on jCenter).
    • Fix CSS Issue (Thanks @swanson & @echodjb).
    • Update demo app.

License

Apache 2.0

Comments
  • Feature Request: Inline Markdown Editing

    Feature Request: Inline Markdown Editing

    Hi,

    it would be a really cool feature to be able to edit directly in the parsed markdown. As a reference, see ownCloud Notes, which is using mdEdit (Javascript Library)

    Best Regards

    Feature Request 
    opened by stefan-niedermann 7
  • Fixed minSdkVersion to 7.

    Fixed minSdkVersion to 7.

    I fixed version of the library to use it for my project whose minSdkVersion is 7. I confirmed it's launchable on API 7. Please accept this request and publish new release as soon as possible! :)

    image

    opened by BoxResin 3
  • How to make a table?

    How to make a table?

    I've tried

    String md = 
              "First Header   | Second Header\n" +
              "-------------  | -------------\n" +
              "*Content Cell* | Content Cell\n" +
              "Content Cell   | Content Cell";
    
    mMarkdownView.loadMarkdown(md);
    

    :boom: But it doesn't display a table

    What do I wrong? - Please help! :shipit:

    opened by SohnyBohny 3
  • Bump versionCode

    Bump versionCode

    You requested an update for the F-Droid version at https://f-droid.org/forums/topic/markdownview/, however your build.gradle file still says this is version "1.0" with versioncode "1". You have to bump at least the versioncode (an integer value), because that determines if it's an update or not. See: https://developer.android.com/studio/publish/versioning.html

    opened by ghost 3
  • Add installation process to main project page

    Add installation process to main project page

    I tried to use your library through compiling the project and including the jar file into my project, but either ways I was not able to use it.

    a) I tried adding the next lines to my settings.gradle def markdownView = file('../MarkdownView/MarkdownView' ) settings.createProjectDescriptor( rootProjectDescriptor, 'markdown-view', markdownView ) include ':markdown-view'

    and to my build.gradle compile project( ':markdown-view')

    The result is that the Android Studio (v.0.8.6) says: Error:Configuration with name 'default' not found.

    b) I tried adding the jar file markdownview-1.2.jar into the libs folder but for some reason when I want to use the MarkdownView class that is not in the classpath.

    Any suggestion? I think the library looks quite well, but could be really handy if you could add the installation process.

    I think the best way to include your project is through the first solution because I everyone can pull the repository and rebuild the project, getting the latest changes.

    opened by proverbface 3
  • Can MarkdownView provide loadDataWithBaseURL?

    Can MarkdownView provide loadDataWithBaseURL?

    I wonder if MarkdownView can provide a constructor like this that one could use to display unicode?

    loadDataWithBaseURL()

    For example, in WebView one can do:

    mywebView.loadDataWithBaseURL(null, "some unicode string", "text/html", "utf-8", null);

    I think we would have to replace "text/html" with something else in case of markdown but I'm not sure which...

    opened by bsaelim 3
  • Displaying an image from Assets

    Displaying an image from Assets

    Hi, I tried adding this line to my markdown text:

    ![Levels Meter](file:///android_asset/levels.PNG)
    

    It didn't display the image from the assets folder. Is there a way to do it?

    opened by Nurdok 3
  • How scale image (without horizontal scrolling)?

    How scale image (without horizontal scrolling)?

    My layout xml:

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

    My code:

    `public class MarkdownViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_view_activity);
    
        MarkdownView markdownViewFeras = (MarkdownView) findViewById(R.id.markdownView_Feras);
        markdownViewFeras.loadMarkdownFile("file:///android_asset/my.md" );
    }
    

    }`

    OK. It's work.

    But has problem only with image. The image is horizontal scrolling. But I need to scale image (without horizontal scrolling). Is it possible?

    opened by alexei28 2
  • How to show Bullet or numbered list

    How to show Bullet or numbered list

    I am not able to see the bullet or number list, how to show using MarkdownView

    Also if I try to set text from some string variable it is not rendered in markdown

    opened by rohan2817 2
  • MarkdownView Background

    MarkdownView Background

    MarkdownView's background seem to always be white, as opposed to TextView's default transparent. It also ignores any andoird:background definitions in the layout XML.

    opened by Nurdok 2
  • Cannot Embed images

    Cannot Embed images

    This is most likely an error on my part:

    I have several local image files linked in an MD file like so: ![AdvDisNeutral1](AdvDisNeutral1.png)

    However, they do not show up. What syntax should I use? This MD file is in the assets folder along with the images embedded in them.

    Just a note: text renders perfectly.

    opened by pujitm 1
  • removed attributes from Manifest

    removed attributes from Manifest

    these attributes should belong to the application project, not to the library project They cause problems in applications project using that library, e.g.:

    Attribute application@label value=(@string/appName) from [:features:base] AndroidManifest.xml:51:9-40 is also present at [us.feras.mdv:markdownview:1.1.0] AndroidManifest.xml:13:9-41 value=(@string/app_name). Suggestion: add 'tools:replace="android:label"' to element at AndroidManifest.xml:6:5-157:19 to override.

    It might be easily fixable with the tools:replace Attribute, but thats more a workaround than a real fix...

    opened by metinkale38 1
  • Strikethrough not working

    Strikethrough not working

    Markdown ~~strikethrough~~ syntax doesn't render properly unless done in HTML.

    ~~This doesn't work...~~
    <span style="text-decoration: line-through">...But this does</span>
    
    opened by wbrawner 0
  • Doesn't render image links properly

    Doesn't render image links properly

    Hey,

    I gave it the markdown for the readme of this repository markdownView.loadMarkdownFile("https://raw.githubusercontent.com/falnatsheh/MarkdownView/master/README.md");

    And it doesn't render the images in this readme properly.

    Below is not rendered. screen shot 2017-05-30 at 11 11 02 am

    Additionally, most of the text in the readme has the link to the icon and there is a lot of starting white space (at least 1 screen). screen shot 2017-05-30 at 11 07 37 am screen shot 2017-05-30 at 11 07 49 am screen shot 2017-05-30 at 11 08 17 am Thanks.

    opened by darvid7 2
  • Can not display table

    Can not display table

    Does MarkdownView support to display table? I tested that it only show plain text instead of a table, I use the markdown text presents at: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables

    opened by Khang-NT 1
Owner
Feras Alnatsheh
Feras Alnatsheh
Proof of concept Android WebView implementation based on Chromium code

Deprecation Notice This project is un-maintained. The recommended alternative is the Crosswalk Project. I did not have the time to keep the project up

Victor Costan 1.7k Dec 25, 2022
Android WebView wrapper based on chromium

ChromiumWebView Android WebView wrapper based on chromium Notice This is just a experimental project, don't use it in product. If you have problem whe

alex 511 Dec 1, 2022
An elegant context-care loading placeholder for Android

FiftyShadesOf An elegant context-care loading placeholder for Android Usage FiftyShadesOf.with(context) .on(view1, view2, view3)

Florent CHAMPIGNY 1.1k Nov 21, 2022
[] Android library that provides a file explorer to let users select files on external storage.

aFileChooser - Android File Chooser aFileChooser is an Android Library Project that simplifies the process of presenting a file chooser on Android 2.1

Paul Burke 1.8k Jan 5, 2023
A file/directory-picker for android. Implemented as a library project.

Note: avoid using as SD-card file picker on Kitkat+ In Kitkat or above, use Android's built-in file-picker instead. Google has restricted the ability

Jonas Kalderstam 711 Dec 27, 2022
Android Library to display your changelog

ChangeLog Library ChangeLog Library provides an easy way to display a change log in your Android app. Travis master: Travis dev: Examples Sample appli

Gabriele Mariotti 861 Nov 11, 2022
Android library to display a list of items for pick one

PickerUI Android library to display a list of items for pick one with blur effect (if you wish). Support for Android 3.0 and up. It supports portrait

David Pizarro 630 Nov 19, 2022
ckChangeLog - An Android Library to display a Change Log

ckChangeLog - An Android Library to display a Change Log This library provides an easy way to display a change log in your app. Features Displays chan

cketti 182 Dec 3, 2022
An Android custom view to display digits rendered as dots in a grid, with a style like a 1970s LED clock.

#DotMatrixView This is an Android library project providing a custom view that can display things on a grid of dots. When the displayed value changes,

Mark Roberts 48 Apr 21, 2022
Android App that communicates with a back-end server to display different One Piece characters

About This project is an Android App that communicates with a back-end server to display different One Piece characters. It's roughly based on this co

Sam Garcia 1 Feb 4, 2022
Implementation of the fragment with the ability to display indeterminate progress indicator when you are waiting for the initial data.

Android-ProgressFragment Implementation of the fragment with the ability to display indeterminate progress indicator when you are waiting for the init

Evgeny Shishkin 813 Nov 11, 2022
Display code with syntax highlighting :sparkles: in native way.

CodeView (Android) CodeView helps to show code content with syntax highlighting in native way. Description CodeView contains 3 core parts to implement

Kirill Biakov 827 Dec 22, 2022
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
Code Guide: How to create Snapchat-like image stickers and text stickers.

MotionViews-Android Code Guide : How to create Snapchat-like image stickers and text stickers After spending 2000+ hours and releasing 4+ successful a

Uptech 474 Dec 9, 2022
Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Rizki Maulana 118 Dec 14, 2022
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Mike Dunn 1.5k Dec 29, 2022
A nicer-looking, more intuitive and highly customizable alternative for radio buttons and dropdowns for Android.

SwipeSelector Undergoing for some API changes for a 2.0 major version, see example usage in the sample module! What and why? Bored of dull looking rad

Iiro Krankka 1.1k Dec 30, 2022
Android View for displaying and selecting values in a circle-shaped View, with animations and touch gestures.

CircleDisplay Android View for displaying and selecting (by touch) values / percentages in a circle-shaped View, with animations. Features Core featur

Philipp Jahoda 287 Nov 18, 2022
Dynamic Speedometer and Gauge for Android. amazing, powerful, and multi shape :zap:

SpeedView Dynamic Speedometer, Gauge for Android. amazing, powerful, and multi shape ⚡ , you can change (colors, bar width, shape, text, font ...every

Anas Altair 1.2k Jan 3, 2023