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.
Related
I have a following issue with laying out text on Android. I'm basically trying to have two lines of text with minimal spacing and each should be styled differently. I've had quite good working solution with two singlelined TextViews one placed below the other, but I've been still getting a little bit cropped text on certain devices..
So I decided to switch to just one TextView an use Spannables instead which should be generally a better solution in all circumstances.
That means I needed to remove the single line property from my TextView -> in order to be able to wrap the line before starting the second Spannable..But there is an issue when is the text displayed at the first line actually longer than it..TextView wraps Automaticaly which is an unwanted behavior. Below you can see several screenshots, which should you better tell what I'm trying to achieve and where I'm now.
The first image shows new layout with spannables and you can see there the wrapped line as well.
The second image is the initial version of the layout woth two textviews layed out verically in a LinearLayout.
There is also a problem it's actually an appwidget, that means I do not have an access to that textview instance directly. I have been thinking about ditching textviews at all and instead use just ImageView and render all manually on canvas..That seems like an overkill to me, so I'm looking for a better solution. Unfortunately I'm kind of out of ideas and knowledge:)
Thank you
If you want to prevent a multi-word string from wrapping, you can replace the spaces with non-breaking spaces ('\u00A0'). TextView treats these as word characters, but renders them as spaces.
Folks,
In my social networking application, single-line messages come from various users. As the message comes in, I need to display them in our UI as a single line that shows the time, the user, and the message line. All 3 fields need to be colored differently.
I tried to use TextView but am running into a problem. As I need various colors, I thought of using SpannableString but the problem is that TextView.Append does not support SpannableString as a parameter.
The other thought I had was to build html style text as each line comes in.
I am wondering if I am overlooking something. Perhaps there is a better user control or a better way to achieve my objective.
Thank you in advance for your help.
Regards,
Peter
Use Html and with help of <font color><font/> tag, you can set single text with different color#
String result="<font color=color_code>First Textview</font> <font color=color_code>Second Textview</font><font color=color_code>Third TextView</font>";
textview.setText(Html.fromHtml(result));
You should use three different text fields, nest them in a table layout using columns, or a relative layout. That way they will automatically resize no matter what length.
You can also use the android:weight tag to control how much room each one takes up.
The reason is that usually its 1 label per field in data structure. As per MVC software design pattern.
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
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 =)