I am using list view to show image and text i want to show like above image, can anyone suggest me how to wrap text around image with out webview. I am using following code:
Drawable dIcon = getResources().getDrawable(R.drawable.video_icon);
int leftMargin = dIcon.getIntrinsicWidth() + 10;
ImageView icon = (ImageView) findViewById(R.id.icon);
icon.setBackgroundDrawable(dIcon);
SpannableString ss = new SpannableString(text);
ss.setSpan(new MyLeadingMarginSpan2(3, leftMargin), 0, ss.length(), 0);
TextView messageView = (TextView) findViewById(R.id.message_view);
messageView.setText(ss);
class
class MyLeadingMarginSpan2 implements LeadingMarginSpan2 {
private int margin;
private int lines;
MyLeadingMarginSpan2(int lines, int margin) {
this.margin = margin;
this.lines = lines;
}
#Override
public int getLeadingMargin(boolean first) {
if (first) {
return margin;
} else {
return 0;
}
}
#Override
public void drawLeadingMargin(Canvas c, Paint p, int x, int dir,
int top, int baseline, int bottom, CharSequence text,
int start, int end, boolean first, Layout layout) {}
#Override
public int getLeadingMarginLineCount() {
return lines;
}
};
by using this code iam getting below image pls suggest to how to get first means correct wrapping text around image without more empty spaces
Older post, but since there is no accepted answer and I have just found solution for same problem in my app, I will post a solution.
I have discovered that text without any line break works well.
Text with a line break that splits the text into 2 parts in a way that the part before line break ends to the right of the image, and the part after line break starts already on next line bellow the image, this also works well.
So what I do is I set left margin of the wrapping TextView's LayoutParams to the desired indent, and I set the text into TextView. Then I add OnGlobalLayoutListener, and inside onGlobalLayout callback, I count the position of the last character on the last line to the right of the image
//lines - number of lines to be affected by the leadingMargin
int charCount = textView.getLayout().getLineEnd(Math.min(lines - 1, textView.getLayout().getLineCount() - 1));
If the text does not have more lines than the number of lines that should have the left margin (or if the last character is already line break), I just set the LeadingMarginSpan2 on the whole length of the text.
// s - original Spannable containing the whole text
if (charCount >= s.length() || charCount <= 0 || s.charAt(charCount - 1) == '\n') {
s.setSpan(new MyLeadingMarginSpan(lines, w), 0, charCount, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(s);
}
If the text is longer, I split it into 2 parts (first one ending at the charCount position), insert line break between them, merge them and set the LeadingMarginSpan2 only on the first part.
else {
Spannable s1 = new SpannableStringBuilder(s, 0, charCount);
s1.setSpan(new MyLeadingMarginSpan(lines, w), 0, charCount, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
Spannable s2 = new SpannableStringBuilder(System.getProperty("line.separator"));
Spannable s3 = new SpannableStringBuilder(s, charCount, s.length());
textView.setText(TextUtils.concat(s1, s2, s3));
}
At the end, do not forget to remove the left margin of the TextView's LayoutParams.
Related
In android we have constraints so we can put Views to start-of another Views and to end-of another Views
Specifically TextView when you set it's end to start of another view it will be look like:-
Tex | Another View
tVi |
ew |
Is there any layout to help me getting dynamic TextView for example the above one would be look like:-
Tex | Another View
tView | Parent device border
Here is a visual example:-
Maybe FlowTextView can solve your problem. FlowTextView is based on a RelativeLayout with added TextView features that wraps its text around its children.
Alternatively, if it's ok for you if the TextView is at the right and the image is at the left, like this:
---------
| Image | Text that is so
--------- long that it's
wrapping around the image
you could try the LeadingMarginSpan2:
Implement it like this:
public class MyLeadingMarginSpan2 implements LeadingMarginSpan.LeadingMarginSpan2 {
int lines;
int offset;
public MyLeadingMarginSpan2(int lines, int offset) {
this.lines = lines;
this.offset = offset;
}
#Override
public int getLeadingMarginLineCount() {
return lines;
}
#Override
public int getLeadingMargin(boolean first) {
return first ? offset : 0;
}
#Override
public void drawLeadingMargin(Canvas c, Paint p, int x, int dir, int top, int baseline, int bottom, CharSequence text, int start, int end, boolean first, Layout layout) {
}
}
and use it like this in your code:
float textLineHeight = textView.getPaint().getTextSize();
int lines = (int) (imageView.getMeasuredHeight() / textLineHeight) + 1;
int offset = imageView.getMeasuredWidth();
SpannableString text = new SpannableString("Text that is so long that it's wrapping around the image");
text.setSpan(new MyLeadingMarginSpan2(lines, offset), 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(text);
In case you want to provide an additonal fallback for very old versions of Android (< 2.2), you can have a look at this answer to a similar question: https://stackoverflow.com/a/8463221/13792619
There is a great answer provided here : stackoverflow.com/a/27064368/3696500
I hope this helps ,
Also have a look at https://github.com/deano2390/FlowTextView
A github library.
<uk.co.deanwild.flowtextview.FlowTextView
android:id="#+id/ftv"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:padding="10dip"
android:src="#drawable/android"/>
</uk.co.deanwild.flowtextview.FlowTextView>
I have multiline TextView, I need to format only single line of it. Since font size and style is dynamic I need it to format "first line" automatically.
This TextView is displaying a string without linefeed, it is wrapped automatically, I need to format first wrapped line.
Please check attached image:
I found the solution that uses StaticLayout.
private TextView tvTitle; //bold title with maxLines = 1
private TextView tvText; //the rest of the text
//initialize views, etc...
private void showText(#Nonnull String text) {
tvTitle.setText(text);
tvTitle.post(() -> {
String ellipsizedText = getEllipsizedText(text, tvTitle);
tvText.setText(ellipsizedText);
});
}
private static String getEllipsizedText(String text, TextView textView) {
StaticLayout staticLayout = getStaticLayout(text,
textView.getPaint(),
textView.getWidth(),
1,
null);
return text.substring(staticLayout.getLineEnd(0));
}
private static StaticLayout getStaticLayout(CharSequence text,
TextPaint paint,
int width,
int maxLines,
TextUtils.TruncateAt ellipsize) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
return StaticLayout.Builder.obtain(text, 0, text.length(), paint, width)
.setTextDirection(TextDirectionHeuristics.FIRSTSTRONG_LTR)
.setAlignment(Layout.Alignment.ALIGN_NORMAL)
.setLineSpacing(0f, 1f)
.setIncludePad(false)
.setEllipsize(ellipsize)
.setEllipsizedWidth(width)
.setMaxLines(maxLines)
.build();
} else {
return new StaticLayout(text,
paint,
width,
Layout.Alignment.ALIGN_NORMAL,
1f,
0f,
false);
}
}
from #HiteshGehlot's answer:
myTextView.setText(Html.fromHtml("<b>This is a normal</b><br>second line<br>third line"));
but as your system is dynamic, this is not a good way to do it. This code generates the appropriate HTML:
String lines[] = string.split("\\n");
String fl = String.format(Locale.ENGLISH, "<b>%s</b><br>", lines[0]);
StringBuilder sb = new StringBuilder();
sb.append(fl);
for(int i = 1; i < lines.length; i++){
sb.append(lines[i] + "<br>");
}
String finalProduct = sb.toString();
then:
myTextView.setText(Html.fromHtml(finalProduct));
This should dynamically create the HTML tags for the first line
EXPLANATION
This is an improvement from a previous answer. Using HTML, the first line is formatted as bold.
Using regex, we split all the lines by newline(\n). The first String in the array is the first line, while the rest aren't important to format. So first we append the first line, and add the rest after that. The for-loop starts at 1 since 0 is the first line.
NOTE
If you do break the text dynamically, you pass that String into the method above. The method I have presented here uses those linebreaks to figure out which line is where, to be able to set the first line to be bold
try this:
myTextView.setText(Html.fromHtml("<b>This is a normal</b><br>second line<br>third line"));
Just use another TextView.
TextView1, TextView2, TextView3.
And set TextView1 to bold.
By following this question, I was able to have text around an image. However, I have the following problem.
As you can see, the space for the image on top is displayed in every paragraph at the right. In the question someone had this problem and suggested to change 'ss.length()' for 'lines'. This seemed to work except if the first paragraph was too short, the next paragraph would overlap the image.
I modified the FlowTextHelper class slightly to use text from Html. This is the code I'm using:
public class FlowTextHelper {
private static boolean mNewClassAvailable;
/* class initialization fails when this throws an exception */
static {
try {
Class.forName("android.text.style.LeadingMarginSpan$LeadingMarginSpan2");
mNewClassAvailable = true;
} catch (Exception ex) {
mNewClassAvailable = false;
}
}
public static void tryFlowText(String text, View thumbnailView, TextView messageView, Display display, int addPadding){
// There is nothing I can do for older versions, so just return
if(!mNewClassAvailable) return;
// Get height and width of the image and height of the text line
thumbnailView.measure(display.getWidth(), display.getHeight());
int height = thumbnailView.getMeasuredHeight();
int width = thumbnailView.getMeasuredWidth() + addPadding;
messageView.measure(width, height); //to allow getTotalPaddingTop
int padding = messageView.getTotalPaddingTop();
float textLineHeight = messageView.getPaint().getTextSize();
// Set the span according to the number of lines and width of the image
int lines = (int)Math.round((height - padding) / textLineHeight);
//SpannableString ss = new SpannableString(text);
//For an html text you can use this line:
if(!text.equals("")) {
SpannableStringBuilder ss = (SpannableStringBuilder) Html.fromHtml(text);
ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, ss.length(), 0);
messageView.setText(ss);
messageView.setMovementMethod(LinkMovementMethod.getInstance()); // links
// Align the text with the image by removing the rule that the text is to the right of the image
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) messageView.getLayoutParams();
int[] rules = params.getRules();
rules[RelativeLayout.RIGHT_OF] = 0;
}
}
}
public class MyLeadingMarginSpan2 implements LeadingMarginSpan.LeadingMarginSpan2 {
private int margin;
private int lines;
public MyLeadingMarginSpan2(int lines, int margin) {
this.margin = margin;
this.lines = lines;
}
#Override
public int getLeadingMargin(boolean first) {
return first ? margin : 0;
}
#Override
public int getLeadingMarginLineCount() {
return lines;
}
#Override
public void drawLeadingMargin(Canvas c, Paint p, int x, int dir,
int top, int baseline, int bottom, CharSequence text,
int start, int end, boolean first, Layout layout) {}
}
What is causing the space being repeated every paragraph and how can I get rid of it? Any help is appreciated.
I've spend hours to solve this issue, but solved it with thanks to the answer found here:
text wrapping around image in android
Basically as follows:
First add a margin to your textview and set the text
final RelativeLayout.LayoutParams params = RelativeLayout.LayoutParams)messageView.getLayoutParams();
params.setMargins(marginWidth, 0, 0, 0);
messageView.setText(Html.fromHtml(text));
Then add an OnGlobalLayoutListener and in the onGlobalLayout() call you calculate how many lines actually need the margin. You split the lines in 2 separate spannables and add the Margin only to the first one:
messageView.getViewTreeObserver().addOnGlobalLayoutListener( new OnGlobalLayoutListener() {
#SuppressLint("NewApi")
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
int linesCount = messageView.getLayout().getLineCount();
// restore the margin
params.setMargins(0, 0, 0, 0);
SpannableString spanS = new SpannableString ( Html.fromHtml(text) );
if (linesCount <= lines) {
spanS.setSpan(new MyLeadingMarginSpan2(lines, width), 0, spanS.length(), 0);
messageView.setText(spanS);
} else {
// find the breakpoint where to break the String.
int breakpoint = messageView.getLayout().getLineEnd(lines-1);
Spannable s1 = new SpannableStringBuilder(spanS, 0, breakpoint);
s1.setSpan(new MyLeadingMarginSpan2(lines, width), 0, s1.length(), 0);
Spannable s2 = new SpannableStringBuilder(System.getProperty("line.separator"));
Spannable s3 = new SpannableStringBuilder(spanS, breakpoint, spanS.length());
// It is needed to set a zero-margin span on for the text under the image to prevent the space on the right!
s3.setSpan(new MyLeadingMarginSpan2(0, 0), 0, s3.length(), 0);
messageView.setText(TextUtils.concat(s1, s2, s3));
}
// remove the GlobalLayoutListener
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
messageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
messageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
}
});
If you need to wrap text around an image, use this library FlowTextView.
The library performs well, and it can be used with a couple lines. However, it does not support screen pixel size for fonts. I found a workaround with this answer, so that you can convert pixel size to sp.
I hope this helps anyone and you don't waste as much time as me using the question from my original post.
I should split a long text for being shown within as much column as needed. For instance i've got a 80 lines text and i want to show it within two textview longer then larger one next to the other one, each one with a maxlines of 60. Any suggestions for doing that?
I know this is an old question, but even though ...
maybe have a look here :
http://www.accella.net/multi-column-text-displays-in-android/
you need to display your text into a first textview, then get what does not appear in that first textview, then display it in a second textview and so on.
To get the "invisible" text from your textview, here is some code:
private String getInvisibleText(final TextView textView) {
String invisible = null;
int height = textView.getHeight();
int scrollY = textView.getScrollY();
Layout staticLayout = textView.getLayout();
int lastVisibleLineNumber = staticLayout.getLineForVertical(scrollY+height);
int start = staticLayout.getLineEnd(lastVisibleLineNumber);
int end = staticLayout.getLineEnd(textView.getLineCount()-1);
if (textView.getText().toString() != null
&& !textView.getText().toString().isEmpty()
&& end > 0
&& textView.getText().toString().length() >= end) {
invisible = textView.getText().toString().substring(start, end);
}
return invisible;
}
I can set max line in my TextView in layout xml file.
In my code, after I call setText() to the TextView, how can I find out if the text content has been cut off (i.e. the text is longer than the max line)?
Thank you.
So while I haven't tested this yet (sorry no sdk setup in front of me)
Your TextView should have a Paint object created for it. Now I would assume that TextPaint has been constructed with the correct padding and offset for the background image of the text view. So you should be able to do something like
TextView a = getViewById(R.id.textview);
TextPaint paint = a.getPaint();
Rect rect = new Rect();
String text = String.valueOf(a.getText());
paint.getTextBounds(text, 0, text.length(), rect);
if(rect.height() > a.getHeight() || rect.width() > a.getWidth()) {
Log.i("TEST", "Your text is too large");
}
I know this is an old question, but I came across it in my search for a similar answer and wanted to offer the solution that I found, in case anyone else is wondering.
This worked for me:
TextView myTextView = rootView.getViewById(R.id.my_text_view);
if (myTextView.getLineCount() > myTextView.getMaxLines()) {
// your code here
}
Try this:
mTextView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
ViewTreeObserver obs = mTextView.getViewTreeObserver();
obs.removeOnGlobalLayoutListener(this);
int height = mTextView.getHeight();
int scrollY = mTextView.getScrollY();
Layout layout = mTextView.getLayout();
int firstVisibleLineNumber = layout.getLineForVertical(scrollY);
int lastVisibleLineNumber = layout.getLineForVertical(height + scrollY);
//check is latest line fully visible
if (mTextView.getHeight() < layout.getLineBottom(lastVisibleLineNumber)) {
// TODO you text is cut
}
}
});