I am wondering if there are any good options to implement a rich text editor in Android. Please note I am talking about a rich text editor that can be used in an Android application, not the one embedded in a web page using HTML and Javascript.
My requirements are:
Basic formatting (color, fonts, highlight, bold, italic, underline, etc.)
Hyperlinks
Inline images
Bullet lists and numbered lists
Inline table (only the contents inside a cell is editable, not the table structure)
As you can see, this is pretty much something quite similar to a typical RichEdit control on Windows.
Here are some efforts (investigation & prototyping) I have made so far:
Using WebView
I have tried using a WebView control to load an HTML fragment with one . The content becomes editable and as it is HTML, I suppose it can meet most of my requirements. But it has several issues:
(deadly) No text caret. The user will have no idea where his/her typed characters will be inserted.
The on-screen soft keyboard is not visible by default. There is a trick that the user has to long-press the Menu button to bring up the keyboard. But I think this is a very bad user experience. Besides, the screen layout is not properly rearranged and the text inserting point sometimes will be covered by the keyboard.
Using EditText
I have tried using the EditText control. It seems to support some level of rich text editing (color, fonts, bold, italic, underline, inline images, bullet lists). But I still cannot figure out how I can implement the following requirements:
Control the appereance of the bullet symbol (dot, circle, dash, arrow, star, etc.)
Numbered list (1., 2., 3., etc.)
Table
BTW, I have seen there are several *Span classes out there but I am not sure if they can be any help... And the http://developer.android.com does not provide much useful information about them.
So, how on earth can I implement a rich text editor on Android?
Can I extends the EditText and add my new functionalities? Or should I do something from scratch - extends the View and implement everything by myself? For later option (extending View), I actually even don't know how to show a text caret and blink it, not mentionging moving the caret with user typing.
I am desperate now... Any hints?
Thanks!
-Tony
(EDIT)
After some further investigation, it looks like extending EditText would be my best bet. I somehow figured out how to use those Span classes and guess I should be able to do most of the tricks by using (extending) them.
For example, extending the BulletSpan and overriding drawLeadingMargin should give me the control of the bullet appereances. Extending the LeadingMarginSpan should help me on the numbered list.
As to the table, my initial plan is to extend the LineBackgroundSpan and draw all the table borders in the drawBackground override. However, I still need to figure out how to layout all the text in the table cells and properly handle the caret movement and selection. Suggestions?
I just published my rich text editor component under the Apache 2.0 license:
https://github.com/1gravity/Android-RTEditor
You can make use of any of the following libraries:-
https://github.com/commonsguy/cwac-richedit
https://github.com/chinalwb/Android-Rich-text-Editor
https://github.com/wasabeef/richeditor-android
https://github.com/irshuLx/Android-WYSIWYG-Editor
I would probably extend both EditText and TableLayout or at least end up using most of their source if there were big enough changes I needed to make.
Can you do the following:
Manually hold the contents in the EditText as your own model (ie by seperating and maintaing the content document and the view attributes as seperate entities).
Override the render (or draw method) to do custom layout on parts of the content document (part of your model) that handle non text characters (say bullets with particular attribute).
To me seems like if you have to muck about with the layout, are you better off writing it from scratch on your own. From what I remember the Edit text (and the richt text editor) is great for anything where you the data is pure text.
There is an open source EditText rich text editor called android-richtexteditor but the code was inexplicably deleted in r5. The code is still there in r4; just use svn to check out r4 or earlier to access it. The code appears to support italics, underline, color picker, text size, and more.
Also answered in these questions: 1, 2
Extend from EditText is a best choice for you, it support CharacterSpan and
ParagraphSpan.
See my App on the Google Play:
https://play.google.com/store/apps/details?id=com.hly.notes
Check this open source Wordpress mobile application for android.It has very promising Richtexteditor based on Edittext.
You can download the source from here
Thanks
Related
This is quite hard to understand, but I'm trying to find out how to make a TextView adapt to change the text spacing between words on a line which allows the text to reach the very right side of the TextView.
Consider this as an example (this should get my point across):
This one is a line of text which fills the view itself
This is another that does the same thing
How would I go about making my text react like this? An example application which does this is Pocket, so I know it can be done - I just don't know how.
Any help is appreciated!
What you're referring to is called text justification and is something that has been discussed more than once here on SO in the context of Android.
The short answer is that, unfortunately, justification is currently not (natively) supported by the TextView widget. There are however workarounds that involve either:
Manipulating the text in the TextView in such a way that the result is visually close to that of justification. Example.
Using a WebView to render the text. Example.
Justifying text on a web page is trivial, but the WebView is a more heavyweight component than a TextView, and hence the feature will come with a performance penalty.
Note that I don't know what approach Pocket is using for their articles, but there are ways to figure that out, and they're not too complicated. That's a completely different can of worms though, so I'll leave it at that.
I am currently trying to make a Writing program. I would like the functionality of an Edit tool bar that contains things such as BOLD, ITALIC, UNDERLINE, etc. I see that it is under Typeface but I'm struggling to figure out how to make it function on just selected text or just for formatting text. I already have the GUI and button listeners in place. Thanks.
There is nothing really built into Android for this, except at a fairly low level. I have the beginnings of a RichEditText custom widget, as a drop-in EditText replacement, but it needs a fair bit of work, which I will get to later in June (I hope I hope I hope).
In a nutshell, you will need to get a Spannable object from your EditText via getText(), then call methods like setSpan() on it to apply your formatting.
Two words my friend, "creative commons". In my experience, mundane pieces of code like date/time pickers, RTF text boxes, etc.. they've all been coded and thought through more thoroughly than you'll ever have the time for. For something like this, don't reinvent the wheel, check out someone else's code, build on it, and check it back in.
I am looking to create something very similar to what Google has done in the Google+ app.
Its hard to describe but please take a look at this screenshot
Google+ app
I am looking to create something similar, of note is that the tags move to the proper line as they fit.
Is this a completely custom solution that Google wrote or is there a library for this somewhere.
It looks like they are decorating the text in the edit text by using spans. They probably have a listener on the edit text listening for modifications at which point they check to see if the most recently added word matches one of your circles. If it does, the create a span over the text and decorate it with a background drawable, font color change, and by adding an image next to it.
Its probably a pretty significant effort depending on how you want to function, but all that functionality is out there in the sdk.
To get a TextView to display (and act friendly with) Html strings my code looks something like:
// itemHtml is a String of HTML defined above
TextView itemContent = (TextView) findViewById(R.id.itemContent);
itemContent.setText(Html.fromHtml(itemHtml));
itemContent.setMovementMethod(LinkMovementMethod.getInstance());
If the Html string has a link, TextView results in links that are clickable and focusable. When the user focuses on a specific link (e.g. by using the d-pad), the link text changes in some significant way to show that focus was obtained.
The problem is that when I test this same pattern using devices with a d-pad using Honeycomb (e.g. a Google TV) or Ice Cream Sandwich flavors of Android, the link in the text shows no noticeable indication that the link has focus.
I know it is getting focus, because when you then hit enter it does the specified action. You can even move around between various links in the text; you're just left guessing which link you're currently at, which results in a very bad user experience.
Is there something I'm doing wrong? Is there some way to fix this or work around this?
Edit: After going a bit nuts, I finally thought I found a solution. However, this solution only works for Honeycomb. ICS is still not solved!
As of API 11, Android has a new setting on TextViews for defining whether the text is selectable.
You can set it using setTextIsSelectable(true) on a TextView, or define it in the XML layout android:textIsSelectable="true"
It's probably best to define it in XML, so that keeping the app backwards-compatible is trivial. Just make sure you're targeting version >= 11, or you'll probably get an error.
The way HTML.fromHTML operates is by creating "spans" with varying effects throughout the various characters of the string. One workaround for this would be to use ClickableSpan coupled with another of the CharacterStyles to colorize the text as clickable. The previous span will allow you to register a callback, and this callback could be to broadcast an intent to view a url (which would open a browser).
The text colour state lists for Honeycomb+ might not set the focused state to a different colour, or you override the colour to be constant.
Check the colors + styles in your_android_sdk_directory/android-14/data/res/
Setting the text to android:autoLink="web" might also help?
The best way to do that is to add CSS styling to your html. I know Android supports :hover selector. So you might right something like this:
String myLink = "your link"
Html.fromHtml(myLink);
and find a way to include CSS data to it: (I'm not sure how but I think it's possible)
a :hover {
color: red;
}
UPDATE:
I think the answer of your question is there.
I'm working on an 'IDE' for Android - it could be useful for editing short scripts / making quick adjustments to files. At the moment I'm just using a simple EditText, but I am wanting to add several features, for example Line Numbering down the left hand side of the EditText and Code Highlighting.
Does anyone have any suggestions about how to approach this? For the code highlighting, I'm guessing I'll need to write my own subclass of EditText. For the line numbering, could I have a thin vertical TextView that has the same text size as the EditText??
Yes, I'm aware editing code on a mobile sized screen is painful.
Thanks!
The stock Email application uses an html view (android.webkit.WebView) to wrap even text emails in html. Perhaps rendering the code into html and displaying in a WebView would be a good way to get syntax highlighting.
For line numbering, the thin TextView beside the EditText seems reasonable. You might want to encapsulate it into your own View class that handles both subviews - and allows line numbers to be turned on and off (and perhaps does other good things like keep text size of both equal)
I think an ide for Android is a good idea. Would be nice to be able to code on an airplane without having to get the tray table involved =)