I'm working on creating my own MarkdownTextView.
In this particular instance, I'm sifting through a body of text parsing out italic tags example:
Here is text, and *here is italic text*, and maybe *more* italic text
I have a regex function that does the sifting for me:
(\*[^*])(.*?)([^*]\*)
Below is the code that I am using to replace all of the italic snippets:
val commentBody = "Here is text, and *here is italic text*, and maybe *more* italic text"
val check = "(\*[^*])(.*?)([^*]\*)".toRegex()
val newSpan = SpannableString(commentBody.replace(check, { result ->
val innerSpan = SpannableString(result.value.substring(1, result.value.length - 1))
innerSpan.setSpan(StyleSpan(Typeface.ITALIC), 0, innerSpan.length, spanFlag)
return#replace innerSpan
}))
My regex is working properly, and
Here is text, and *here is italic text*, and maybe *more* italic text
is correctly converted to show
Here is text, and here is italic text, and maybe more italic text
But nothing is italicized. I debugged this, and it confirms my fear that when setting the italics span inside of that transform, and using that to setup my new spannable string, that I'm losing all of those spans.
Any ideas?
In case anyone is interested this is my answer:
val commentBody = "Here is text, and *here is italic text*, and maybe *more* italic text"
val check = "(\\*[^*])(.*?)([^*]\\*)".toRegex()
val spannableStringBuilder = SpannableStringBuilder(commentBody.replace("*", ""))
check.findAll(commentBody).map { it.value.substring(1, it.value.length - 1) }.forEach {
val start = spannableStringBuilder.indexOf(it)
val end = start + it.length
spannableStringBuilder.setSpan(StyleSpan(Typeface.ITALIC), 0, innerSpan.length, spanFlag)
}
return spannableStringBuilder
If you have a look at String.replace, you'll find, that the SpannableString you return is actually used as a CharSequence for transform: (MatchResult) -> CharSequence.
Also you're creating the outer SpannableString from a pure String only.
Thus you never had the information available. You could have a look into SpannableStringBuilder and use it with a different approach like using a tokenizer or a custom Markdown span which removes the markup syntax on the fly.
Is there a way to enable a TextView to detect markdown tags and render the text accordingly? More specifically, my app contains a TextView in which the users can provide a description, and often they will use markdown to format their description. Unfortunately the text doesn't render, and instead we see all the tags written out in the textview.
There's no built-in support for Markdown in the Android SDK. You'll have to use a lib like markdown4j or CommonMark.
I understand you want to convert a String containing Markdown markup to a formatted CharSequence that you can use in a TextView. The two options I know of are :
Bypass : Use a native C library to parse the text. Unfortunately the project seems dead.
commonmark-spannable-android : Pure java, based on the very good commonmark-java
library.
I used both and in my opinion, the second one is better : no need to deal with native architectures, smaller APK, and the performance is quite good (something like 2 times slower in my case, with is more than good enough)
Update : Found another option (it's the one I'm using now) :
Markwon : Pure java, also using commonmark-java as parser, with optional support for images and tables
There is no inherit support for markdown in textview, however if you only need simple markdown-lite implementation via simple "regexp" matching, this section from my "load readme from project root folder" in https://github.com/mofosyne/instantReadmeApp would help.
Note that this does not remove the markup in the text, only styles the lines differently. This may be a good or bad thing, depending on your application.
Oh and the nice thing? It styles in native textview, so the text is still selectable like normal text.
Specifically this line: https://github.com/mofosyne/instantReadmeApp/blob/master/app/src/main/java/com/github/mofosyne/instantreadme/ReadMe.java#L137
Slightly modified below: private void updateMainDisplay(String text) to private void style_psudomarkdown_TextView(String text, TextView textview_input), so you could use the same function for different textviews
```
/*
Text Styler
A crappy psudo markdown styler. Could do with a total revamp.
*/
/*
* Styling the textview for easier readability
* */
private void style_psudomarkdown_TextView(String text, TextView textview_input) {
//TextView mTextView = (TextView) findViewById(R.id.readme_info);
TextView mTextView = textview_input;
// Let's update the main display
// Needs to set as spannable otherwise http://stackoverflow.com/questions/16340681/fatal-exception-string-cant-be-cast-to-spannable
mTextView.setText(text, TextView.BufferType.SPANNABLE);
// Let's prettify it!
changeLineinView_TITLESTYLE(mTextView, "# ", 0xfff4585d, 2f); // Primary Header
changeLineinView(mTextView, "\n# ", 0xFFF4A158, 1.5f); // Secondary Header
changeLineinView(mTextView, "\n## ", 0xFFF4A158, 1.2f); // Secondary Header
changeLineinView(mTextView, "\n---", 0xFFF4A158, 1.2f); // Horizontal Rule
changeLineinView(mTextView, "\n>", 0xFF89e24d, 0.9f); // Block Quotes
changeLineinView(mTextView, "\n - ", 0xFFA74DE3, 1f); // Classic Markdown List
changeLineinView(mTextView, "\n- ", 0xFFA74DE3, 1f); // NonStandard List
//spanSetterInView(String startTarget, String endTarget, int typefaceStyle, String fontFamily,TextView tv, int colour, float size)
// Limitation of spanSetterInView. Well its not a regular expression... so can't exactly have * list, and *bold* at the same time.
spanSetterInView(mTextView, "\n```\n", "\n```\n", Typeface.BOLD, "monospace", 0xFF45c152, 0.8f, false); // fenced code Blocks ( endAtLineBreak=false since this is a multiline block operator)
spanSetterInView(mTextView, " **" , "** ", Typeface.BOLD, "", 0xFF89e24d, 1f, true); // Bolding
spanSetterInView(mTextView, " *" , "* ", Typeface.ITALIC, "", 0xFF4dd8e2, 1f, true); // Italic
spanSetterInView(mTextView, " ***" , "*** ", Typeface.BOLD_ITALIC, "", 0xFF4de25c, 1f, true); // Bold and Italic
spanSetterInView(mTextView, " `" , "` ", Typeface.BOLD, "monospace", 0xFF45c152, 0.8f, true); // inline code
spanSetterInView(mTextView, "\n " , "\n", Typeface.BOLD, "monospace", 0xFF45c152, 0.7f, true); // classic indented code
}
private void changeLineinView(TextView tv, String target, int colour, float size) {
String vString = (String) tv.getText().toString();
int startSpan = 0, endSpan = 0;
//Spannable spanRange = new SpannableString(vString);
Spannable spanRange = (Spannable) tv.getText();
while (true) {
startSpan = vString.indexOf(target, endSpan-1); // (!##$%) I want to check a character behind in case it is a newline
endSpan = vString.indexOf("\n", startSpan+1); // But at the same time, I do not want to read the point found by startSpan. This is since startSpan may point to a initial newline.
ForegroundColorSpan foreColour = new ForegroundColorSpan(colour);
// Need a NEW span object every loop, else it just moves the span
// Fix: -1 in startSpan or endSpan, indicates that the indexOf has already searched the entire string with not valid match (Lack of endspan check, occoured because of the inclusion of endTarget, which added extra complications)
if ( (startSpan < 0) || ( endSpan < 0 ) ) break;// Need a NEW span object every loop, else it just moves the span
// Need to make sure that start range is always smaller than end range. (Solved! Refer to few lines above with (!##$%) )
if (endSpan > startSpan) {
//endSpan = startSpan + target.length();
spanRange.setSpan(foreColour, startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// Also wannna bold the span too
spanRange.setSpan(new RelativeSizeSpan(size), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spanRange.setSpan(new StyleSpan(Typeface.BOLD), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
tv.setText(spanRange);
}
private void changeLineinView_TITLESTYLE(TextView tv, String target, int colour, float size) {
String vString = (String) tv.getText().toString();
int startSpan = 0, endSpan = 0;
//Spannable spanRange = new SpannableString(vString);
Spannable spanRange = (Spannable) tv.getText();
/*
* Had to do this, since there is something wrong with this overlapping the "##" detection routine
* Plus you only really need one title.
*/
//while (true) {
startSpan = vString.substring(0,target.length()).indexOf(target, endSpan-1); //substring(target.length()) since we only want the first line
endSpan = vString.indexOf("\n", startSpan+1);
ForegroundColorSpan foreColour = new ForegroundColorSpan(colour);
// Need a NEW span object every loop, else it just moves the span
/*
if (startSpan < 0)
break;
*/
if ( !(startSpan < 0) ) { // hacky I know, but its to cater to the case where there is no header text
// Need to make sure that start range is always smaller than end range.
if (endSpan > startSpan) {
//endSpan = startSpan + target.length();
spanRange.setSpan(foreColour, startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// Also wannna bold the span too
spanRange.setSpan(new RelativeSizeSpan(size), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spanRange.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
//}
tv.setText(spanRange);
}
private void spanSetterInView(TextView tv, String startTarget, String endTarget, int typefaceStyle, String fontFamily, int colour, float size, boolean endAtLineBreak) {
String vString = (String) tv.getText().toString();
int startSpan = 0, endSpan = 0;
//Spannable spanRange = new SpannableString(vString);
Spannable spanRange = (Spannable) tv.getText();
while (true) {
startSpan = vString.indexOf(startTarget, endSpan-1); // (!##$%) I want to check a character behind in case it is a newline
endSpan = vString.indexOf(endTarget, startSpan+1+startTarget.length()); // But at the same time, I do not want to read the point found by startSpan. This is since startSpan may point to a initial newline. We also need to avoid the first patten matching a token from the second pattern.
// Since this is pretty powerful, we really want to avoid overmatching it, and limit any problems to a single line. Especially if people forget to type in the closing symbol (e.g. * in bold)
if (endAtLineBreak){
int endSpan_linebreak = vString.indexOf("\n", startSpan+1+startTarget.length());
if ( endSpan_linebreak < endSpan ) { endSpan = endSpan_linebreak; }
}
// Fix: -1 in startSpan or endSpan, indicates that the indexOf has already searched the entire string with not valid match (Lack of endspan check, occoured because of the inclusion of endTarget, which added extra complications)
if ( (startSpan < 0) || ( endSpan < 0 ) ) break;// Need a NEW span object every loop, else it just moves the span
// We want to also include the end "** " characters
endSpan += endTarget.length();
// If all is well, we shall set the styles and etc...
if (endSpan > startSpan) {// Need to make sure that start range is always smaller than end range. (Solved! Refer to few lines above with (!##$%) )
spanRange.setSpan(new ForegroundColorSpan(colour), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spanRange.setSpan(new RelativeSizeSpan(size), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spanRange.setSpan(new StyleSpan(typefaceStyle), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// Default to normal font family if settings is empty
if( !fontFamily.equals("") ) spanRange.setSpan(new TypefaceSpan(fontFamily), startSpan, endSpan, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
tv.setText(spanRange);
}
```
The above implementation supports only up to 2 headers (but you can easily modify the regexp to support more than 2 level headers).
It is a series of regexp based text view consisting of two functions for regexp that matches always a line changeLineinView() and changeLineinView_TITLESTYLE()
For multiline spanning spanSetterInView() function deals with it.
So extending it to fit your purpose as long as you have a regexp that doesn't clash with any other syntax would be possible.
Markdownish Syntax:
This is the supported syntax. Can't support full markdown, since this is only a lite hacky implementation. But kind handy for a no frills display that is easy to type on a mobile phone keypad.
# H1 only in first line (Due to technical hacks used)
## H2 headers as usual
## Styling
Like: *italic* **bold** ***bold_italic***
## Classic List
- list item 1
- list item 2
## Nonstandard List Syntax
- list item 1
- list item 2
## Block Quotes
> Quoted stuff
## codes
here is inline `literal` codes. Must have space around it.
```
codeblocks
Good for ascii art
```
Or 4 space code indent like classic markdown.
I can recommend MarkdownView. I use it for loading markdown files from the assets folder.
In case it helps anyone, here's my implementation...
In my layout:
<us.feras.mdv.MarkdownView
android:id="#+id/descriptionMarkdownView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#id/thumbnailImageView"
app:layout_constraintStart_toEndOf="#id/guidelineStart"
app:layout_constraintEnd_toEndOf="#id/guidelineEnd"
app:layout_constraintBottom_toTopOf="#id/parent"/>
In my Activity:
val cssPath = "file:///android_asset/markdown.css"
val markdownPath = "file:///android_asset/markdown/filename.md"
descriptionMarkdownView.loadMarkdownFile(markdownPath, cssPath)
Take a look at the commonmark-java library.
I haven't tried that myself but I think you might be able to make it work in your case
I followed this post since last Friday and tested many of the Markdown libraries suggested here - this question and these answers were basically the best source about the topic I could find online.
Two of them caught my attention the most, MarkdownView and Markwon, but the former was easier to deal with than the latter and so I used it to empower a Room note taking app by Markdown formatting (which was my main personal goal).
If you want to have a Markdown live preview, you could just use this sample activity provided by the library itself and, among other options, if you need to adapt your own activity to it, I suggest you add the following pieces of code to your project:
build.gradle
implementation 'us.feras.mdv:markdownview:1.1.0'
private MarkdownView markdownView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.markdownView = findViewById(R.id.markdownView);
this.udateMarkdownView();
}
private void updateMarkdownView() {
markdownView.loadMarkdown(note_content.getText().toString());
}
Here you find the sample I put available on GitHub in which you can see a working project apart from the samples the library itself gives us as examples.
If you want to render HTML you can use Html.fromHtml("your string"), for more resources on Strings in Android check this link
I'm using a SpannableString to underline certain words, however, I realized the code I have only highlights the first word if there are multiple words. Not exactly sure how to accomplish highlighting multiple words:
String keyword = "test";
String text = "This is a test to underline the three test words in this test";
SpannableString output = new SpannableString(text);
if (text.indexOf(keyword) > -1)
{
int keywordIndex = text.indexOf(keyword);
int keywordLength = keyword.length();
int start = keywordIndex;
int end = keywordIndex + (keywordLength);
output.setSpan(new UnderlineSpan(), start, end, 0);
}
I was thinking I could split the text at every space and loop through it, but wasn't sure if there was a better way.
I do have this code to highlight multiple words using a regular expression, however, I'm try to avoid regular expressions since it's in an Android app and I'm using it in a ListView and I'm told they are very expensive. Also this code I have only highlight whole words, so using the example text above, if the word "protest" was in the sentence, it wouldn't get highlighted using this code:
Matcher matcher = Pattern.compile("\\b(?:test")\\b").matcher(text);
while (matcher.find())
{
output.setSpan(new UnderlineSpan(), matcher.start(), matcher.end(), 0);
}
Is is possible to change TextView text after using Linkify to create links? I have something where I want the url to have two fields, a name and id, but then I just want the text to display the name.
So I start off with a textview with text that includes both name and id, and linkify to create the appropriate links with both fields. But for the display, I don't want to show the id.
Is this possible?
It's kind of a pain but yes. So Linkify basically does a few things. First it scans the contents of the textview for strings that match that of a url. Next it creates UrlSpan's and ForegroundColorSpan's for those sections that match it. Then it sets the MovementMethod of the TextView.
The important part here are the UrlSpan's. If you take your TextView and call getText(), notice it returns a CharSequence. It's most likely some sort of Spanned. From the Spanned you can ask, getSpans() and specifcally the UrlSpans. Once you know all those spans you can than loop through the list and find and replace the old span objects with your new span objects.
mTextView.setText(someString, TextView.BufferType.SPANNABLE);
if(Linkify.addLinks(mTextView, Linkify.ALL)) {
//You can use a SpannableStringBuilder here if you are going to
// manipulate the displayable text too. However if not this should be fine.
Spannable spannable = (Spannable) mTextView.getText();
// Now we go through all the urls that were setup and recreate them with
// with the custom data on the url.
URLSpan[] spans = spannable.getSpans(0, spannable.length, URLSpan.class);
for (URLSpan span : spans) {
// If you do manipulate the displayable text, like by removing the id
// from it or what not, be sure to keep track of the start and ends
// because they will obviously change.
// In which case you may have to update the ForegroundColorSpan's as well
// depending on the flags used
int start = spannable.getSpanStart(span);
int end = spannable.getSpanEnd(span);
int flags = spannable.getSpanFlags(span);
spannable.removeSpan(span);
// Create your new real url with the parameter you want on it.
URLSpan myUrlSpan = new URLSpan(Uri.parse(span.getUrl).addQueryParam("foo", "bar");
spannable.setSpan(myUrlSpan, start, end, flags);
}
mTextView.setText(spannable);
}
Hopefully that makes sense. Linkify is just a nice tool to setup the correct Spans. Spans just get interpreted when rendering text.
Greg's answer doesn't really answer the original question. But it does contain some insight as to where to start. Here's a function that you can use. It assumes that you have Linkified your textview prior to this call. It's in Kotlin, but you can get the gist of it if you are using Java.
In short, it builds a new Spannable with your new text. During the build, it copies over the url/flags of the URLSpans that the Linkify call created previously.
fun TextView.replaceLinkedText(pattern: String) { // whatever pattern you used to Linkify textview
if(this.text !is Spannable) return // no need to process since there are no URLSpans
val pattern = Pattern.compile(pattern, Pattern.CASE_INSENSITIVE)
val matcher = pattern.matcher(this.text)
val linkifiedText = SpannableStringBuilder()
var cursorPos = 0
val spannable = this.text as Spannable
while (matcher.find()) {
linkifiedText.append(this.text.subSequence(cursorPos, matcher.start()))
cursorPos = matcher.end()
val span = spannable.getSpans(matcher.start(), matcher.end(), URLSpan::class.java).first()
val spanFlags = spannable.getSpanFlags(span)
val tag = matcher.group(2) // whatever you want to display
linkifiedText.append(tag)
linkifiedText.setSpan(URLSpan(span.url), linkifiedText.length - tag.length, linkifiedText.length, spanFlags)
}
this.text = linkifiedText
}