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>
Related
this is my first question here.
I'm trying to develop a "book" with text and images and I'm having problems to show a text (loaded from a raw file) flowing around and image in a textview.
I have tried this and it works fine while the text is defined in a string resource. However, when the text comes from an external file (eg a .txt file which includes break lines) the TextView looks something like this:
--------- text text text text text
| | text text text text text
--------- text text text text text
text text text text
text text text text
text text text text
text text text text
That is to say, just after the image, each line leaves an empty space to the right which has the same size than the image.
I don't know why this happens, Am I missing something? this is the code:
ImageView page_im_iv = (ImageView) findViewById(R.id.page_image);
TextView page_text = (TextView) findViewById(R.id.page_text);
Drawable page_image getResources().getDrawable(R.drawable.anyname);
page_im_iv.setBackground(page_image);
float left_margin = page_image.getIntrinsicWidth() + 10;
float top_margin = page_image.getIntrinsicHeight() + 10;
float flines = top_margin/page_text.getTextSize();
int ilines = (int) flines;
StringBuilder raw_text = readRaw(this,res_id);//res_id changes dynamically, it is just the name of the .txt file
SpannableString ss = new SpannableString(raw_text.toString());
ss.setSpan(new MyLeadingMarginSpan2(ilines, left_margin), 0, ss.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
page_text.setText(ss);
And this is the layout:
<ScrollView xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="example.ActivityBookPage"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/page_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/page_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
<!-- Other stuff
...
-->
</LinearLayout>
</ScrollView >
Thats all.
In case the problem comes from the readRaw method, this is the code:
public static StringBuilder readRaw(Context ctx,int res_id) {
StringBuilder text = new StringBuilder();
InputStream is = ctx.getResources().openRawResource(res_id);
InputStreamReader isr = new InputStreamReader(is);
BufferedReader br = new BufferedReader(isr, 8192);
try {
String line;
while ((line = br.readLine()) != null) {
text.append(line);
text.append("\n");
}
isr.close();
is.close();
br.close();
} catch (IOException e) {
e.printStackTrace();
}
return text;
}
And this is the code for MyLeadingMarginSpan2 class, copy-pasted from the previous link
public class MyLeadingMarginSpan2 implements 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) {}
}
Finally I found a solution (thanks to this old reply). The problem was that the text coming from the raw file may include break lines (\n), which are not taken into account when calculating "ilines". Hence, we need to count the number of characters that fit just at the right of the image, then include a new break line and then the rest of the text. This is the code
int charCount = page_text_layout.getLineEnd(Math.min(ilines - 1, page_text_layout.getLineCount() - 1));//see below what page_text_layout is
//in case the image is big enough to have all
//the text at its right, just use ss.length as
//the third parameter for setSpan
if (charCount >= ss.length() || charCount <= 0 ) {
ss.setSpan(new MyLeadingMarginSpan2(ilines, left_margin), 0, ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
page_text.setText(ss);
}
else { //in case the text is longer, make three blocks
Spannable s1 = new SpannableStringBuilder(ss, 0, charCount);
s1.setSpan(new MyLeadingMarginSpan2(ilines, left_margin), 0, charCount, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
Spannable s2 = new SpannableStringBuilder(System.getProperty("line.separator"));
Spannable s3 = new SpannableStringBuilder(ss, charCount, ss.length());
page_text.setText(TextUtils.concat(s1, s2, s3));
}
where page_text_layout is defined previously inside an onGlobalLayout callback (in my case inside the onCreate() method):
ViewTreeObserver vto = page_text.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
page_text_layout = page_text.getLayout();
}
});
Of course this code can be refined (eg. checking whether s1 breaks the text in the middle of a word) but this would be the main structure.
Hope this helps someone!
Maybe I'm not entering the right keywords, but I'm not finding an answer. I want to know what the dimensions of a TextView would be if I were set it with a certain string. However, I want to know before everything gets laid out in the activity.
My TextView has a fixed width and a variable height. I can get the height like this:
myTextView.setText(myString);
// ... UI gets laid out ...
myTextView.getHeight()
I want to change the width of the TextView if the height gets past a certain point. (But not before then.) And rather than waiting until after the UI gets laid out, I want to know beforehand what the height would be if it had myString and then change the width if I needed to.
I looked at the Layout class but I couldn't figure out what to do. I wonder if it might have something to do with overriding the TextView's onMeasure but I really don't know how to attempt that. Any help is appreciated.
Update
Thanks to both #user3249477 and #0xDEADC0DE for their answers. I'm marking #user3249477's answer as the solution for now (although since I need multiple resizes of the view I'm not sure about repeatedly turning the visibility on and off) but also +1 to #0xDEADC0DE for giving me the keywords I needed to further look into this problem.
I need to do more research and testing on this. Here are some links that I have found helpful so far:
OnLayoutChangeListener:
View.OnLayoutChangeListener
Capture Layout resize before API 11
After changing a property on a LayoutParams object, do I need to call setLayoutParams again?
measureText() and getTextBounds():
Android Paint: .measureText() vs .getTextBounds()
Paint.getTextBounds() returns to big height
Gettextbounds in android
Overriding onSizeChanged of the parent view also looks intriguing: https://stackoverflow.com/a/14399163/3681880
Set your TextView to invisible:
android:visibility="invisible"
and measure it. Once you're done set it to visible:
TextView myTextView = (TextView) findViewById(R.id.text);
final int maxHeight = 500;
myTextView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
#Override
public void onLayoutChange(View v, int left, int top, int right, int bottom,
int oldLeft, int oldTop, int oldRight, int oldBottom) {
v.removeOnLayoutChangeListener(this);
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) v.getLayoutParams();
Log.e("TAG", "H: " + v.getHeight() + " W: " + v.getWidth());
if (v.getWidth() > maxHeight) {
params.width += 100;
v.setLayoutParams(params);
}
v.setVisibility(View.VISIBLE);
}
});
You could do it without overriding. If you get the TextViews Paint with getPaint(), you can use measureText(string) the get the minimal with of the TextView when it is drawn with that Paint. I looks like this:
TextView textView = new TextView(this);
float textWidth = textView.getPaint().measureText("Some Text");
Update
To get the height, you can call getTextBounds() on the Paint object like this:
String text = "Some Text";
Rect textBounds = new Rect();
textView.getPaint().getTextBounds(text, 0, text.length(), textBounds);
float height = textBounds.height();
float width = textBounds.width();
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'm trying to add multiple customo views (for now they are simple rectangles) using this code
//Defining the layout
HandLayout = new LinearLayout(this);
HandLayout.setOrientation(LinearLayout.HORIZONTAL);
HandLayout.setBackgroundColor(getResources().getColor(R.color.bg_hand));
HandLayout.setLayoutParams(new LayoutParams(getResources().getInteger(R.integer.dim_hand_width), getResources().getInteger(R.integer.dim_hand_height)));
//Some more code
int dx = getResources().getInteger(R.integer.dim_cardslot_width);
for (int i = 0; i < 6; i++){
Card c = new Card(this,i);
HandLayout.addView(c);
c.setX(i*dx);
}
The problem is that instead of getting 6 rectagles one next to the other I only see the first rectangle.
I think the rectangles are there but are "behind" the first drawn rectangle. How do I tell the view to "move" them dx to the right?
Thanks for any help
EDIT: The problem is with the Card Class code, I think. After a suggestion from one of the user I've tried adding TextViews and they worked. Here is the code for the card class (NOTE the only code not present are the declarations of a bunch of constant ints).
public Card(Context context, int id) {
super(context);
// TODO Auto-generated constructor stub
borders = new Rect(0,0,
getResources().getInteger(R.integer.dim_cardslot_width),
getResources().getInteger(R.integer.dim_cardslot_height));
offw = (getResources().getInteger(R.integer.dim_cardslot_width) - getResources().getInteger(R.integer.dim_card_width))/2;
offh = (getResources().getInteger(R.integer.dim_cardslot_height) - getResources().getInteger(R.integer.dim_card_height))/2;
cborders = new RectF((float)offw, (float)offh,
(float)getResources().getInteger(R.integer.dim_card_width),
(float)getResources().getInteger(R.integer.dim_card_height));
ntext = Typeface.create(Typeface.MONOSPACE,Typeface.NORMAL);
paint = new Paint();
}
protected void onDraw(Canvas canvas){
paint.setColor(getResources().getColor(R.color.bg_card));
canvas.drawRect(borders, paint);
paint.setColor(getResources().getColor(R.color.main_card));
canvas.drawRoundRect(cborders, rad, rad, paint);
paint.setColor(getResources().getColor(R.color.card_text));
paint.setTextSize(14);
canvas.drawText("Card: " + String.valueOf(ID),offw,TopOffset+CharHeight,paint);
}
They are not "behind", they are "next" to each other, the width of every view i think is fill_parent this is why you get only one view, try to put your parent layout inside a scrollView and check the difference
XML solution:
Let's say your card design is represented as follows
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
in your java code:
for (int i = 0; i < 6; i++){
View cardView = LayoutInflater.from(getActivity()).inflate(R.layout.xml_above, null);
TextView tv = cardView.findViewById(R.id.value));
tv.setText("your text");
//if you have click listeners
tv.setOnClickListener(...);
HandLayout.addView(cardView);
}
as simple as it looks
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.