I am trying to create spannable textview and showing it in EditText. So user can type something in EditText and if user pressed enter button of keyboard then i am converting this text in to spannable textview after this user can start typing again and press enter button of keyboard then again second spannable textview will create ans will show it in edittext but.
Where i stuck?
when i create two spannable textview then this two textview slightly overlapping on each other. And i want to set margin between this two textview.
I also tried to set margin between textview using LayoutParam but not success.
Here is image which showing textview overlapping on each other in EditText.
y of spicy is hidden below tasty
Here is my code.
txtDishTags.setOnEditorActionListener(new OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH
|| actionId == EditorInfo.IME_ACTION_NEXT
|| actionId == EditorInfo.IME_ACTION_DONE
|| actionId == EditorInfo.IME_ACTION_GO) {
txtDishTags.dismissDropDown();
if(txtDishTags.getText().toString().trim().length()>=1){
isEntered = true;
String[] separated = tags.split(",");
tags = separated[separated.length-1];
if(tags.trim().length()>=1){
TextView tv = createContactTextView(tags);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(-20, 0, bd.getIntrinsicWidth(),
bd.getIntrinsicHeight());
sb.append(tags + ",");
sb1 = new SpannableStringBuilder();
sb1.append(tags + ",");
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length(), sb.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(clickSpan, sb.length() - tags.length(),
sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
txtDishTags.setText("");
txtDishTags.setText(sb);
int length = sb.length();
txtDishTags.setSelection(length, length);
}
}
}
return false;
}
});
public TextView createContactTextView(String text) {
//llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 44);
//llp.setMargins(5, 0, 20, 0);
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(30);
Typeface faceBook = Typeface.createFromAsset(getAssets(),
"fonts/eau_sans_book.otf");
tv.setTypeface(faceBook);
tv.setTextColor(getResources().getColor(R.color.backgroundcolor));
tv.setBackgroundResource(R.color.textviewbubble);
//tv.setLayoutParams(llp);
Resources r = getResources();
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
44, r.getDisplayMetrics());
tv.setHeight(px);
return tv;
}
public static Object convertViewToDrawable(View view) {
int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
view.measure(spec, spec);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(),
view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate(-view.getScrollX(), -view.getScrollY());
view.draw(c);
view.setDrawingCacheEnabled(true);
Bitmap cacheBmp = view.getDrawingCache();
Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
view.destroyDrawingCache();
return new BitmapDrawable(viewBmp);
}
I tried to set margin between textview using following code
llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 44);
llp.setMargins(5, 0, 20, 0);
tv.setLayoutParams(llp);
I also set LeftPadding for Textview but seems first textview not getting it.Even i set height to textview but seems textview not getting layout parameter at all. Like
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
44, r.getDisplayMetrics());
tv.setHeight(px);
Please give reference or hint.
Thanks in advance
There are a few problems that I have identified. You need to make the specified changes and everything should work.
Step 1) Update setBounds parameters
In the following line, update the setBounds parameters from -20 to 0 as follows:
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());
This is important because you are setting the wrong bounds, which causes tags to overlap.
Step 2) Fix bug in sb.setSpan
If you followed step 1, and you run the code, you will realize that when you attempt to replace text with ImageSpan, you are passing the wrong values (you are not taking into account the ","(comma) character in the end). Update the following line to include -1:
sb.setSpan(new ImageSpan(bd), sb.length() - tags.length() - 1, sb.length() - 1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Now you output will appear correct and with comma in the middle.
Step 3) Add spacing between Tags
To answer your original question, how to add spacing, I would recommend that you modify your code to include ", " between different spans. You can also modify it to use just " " space. Define a contentBetweenTags variable and set it to your desired value. Here is how you can do that:
String contentBetweenTags = ", ";
sb.append(tags + contentBetweenTags);
sb1 = new SpannableStringBuilder();
sb1.append(tags + contentBetweenTags);
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length() - contentBetweenTags.length(),
sb.length() - contentBetweenTags.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Step 4) Picking the right "space" character
Just in case you are not happy with the "margin/spacing" between two tags, you could use one of the many unicode space characters available. They have different widths and you could use any one of them based on your desire / liking.
Here is the final code and sample screenshot using unicode \u2002:
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());
String contentBetweenTags = ",\u2002";
sb.append(tags + contentBetweenTags);
sb1 = new SpannableStringBuilder();
sb1.append(tags + contentBetweenTags);
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length() - contentBetweenTags.length(),
sb.length() - contentBetweenTags.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Related
I want to create a SpannableString with some emotions and text like this image.
Below is the method that I have used so for but it just attach emotions with text. Please suggest me how can I create such types of view.
private SpannableStringBuilder getLikeCountString(UserFeedData feedData, Context mContext) {
SpannableStringBuilder builder = new SpannableStringBuilder();
int emotionSize = (int) mContext.getResources().getDimension(R.dimen.emotion_size);
if (feedData.getEmotionTypes() != null) {
String[] emotions = feedData.getEmotionTypes().split(",");
for (String emotion : emotions) {
SpannableString emojSpan = new SpannableString(" ");
// Getting image based on emotion id
Drawable icon = ContextCompat.getDrawable(mContext, ContentDetailFragment.getLikeEmotionResource(Integer.valueOf(emotion.trim())));
//icon.setBounds(0, 0, (icon.getIntrinsicWidth() / 2) + 5, (icon.getIntrinsicHeight() / 2) + 5);
icon.setBounds(0, 0, emotionSize, emotionSize);
ImageSpan imageSpan = new ImageSpan(icon, ImageSpan.ALIGN_BOTTOM);
emojSpan.setSpan(imageSpan, 0, emojSpan.length() - 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
builder.append(emojSpan);
}
}
if (feedData.getContentLikes() > 0) {
builder.append(feedData.getContentLikes() + " ");
}
return builder;
}
Instead of using individual ImageSpans for each emoji, use one ImageSpan with LayerDrawable inside, one emoji per layer. You can do all kinds of overlaps with LayerDrawable.
Inside android SearchView i made a TextView and added "This Site" to it then converted the view to bitmap and added span using a shape drawable.
I dont want my cursor to type before the Span and setSelection doesn't seems to work for me
final SearchView sv = new SearchView(getActivity());
final String tokenName = "This Site";
final SpannableStringBuilder sb = new SpannableStringBuilder();
TextView tv = createSearchTokenTextView(tokenName);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());
sb.append(tokenName + " ");
sb.setSpan(new ImageSpan(bd), sb.length() - (tokenName.length() + 1), sb.length() - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Selection.setSelection(sb, 0, sb.toString().length());
sv.setQuery(sb, false);
I am developing an application in which selected contacts are added to EditText with aclose mark image and when I click on that close mark image the contact should be removed. I have completed code upto showing close mark image but I don't know how to handle those close mark images. Please suggest me how.
My code:
for (int i = 0; i < selectedItems.size(); i++) {
String na = selectedItems.get(i);
TextView tv = createContactTextView(na);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(),
bd.getIntrinsicHeight());
sb.append(na + ",");
sb.setSpan(new ImageSpan(bd), sb.length()
- (na.length() + 1), sb.length() - 1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
txt.setText(sb);
private Object convertViewToDrawable(TextView view) {
int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
view.measure(spec, spec);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(),
view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate(-view.getScrollX(), -view.getScrollY());
view.draw(c);
view.setDrawingCacheEnabled(true);
Bitmap cacheBmp = view.getDrawingCache();
Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
view.destroyDrawingCache();
return new BitmapDrawable(viewBmp);
}
private TextView createContactTextView(String text) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(25);
tv.setBackgroundResource(R.drawable.oval_small);
tv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.close, 0);
return tv;
}
ClickableSpan is what you want:
for (int i = 0; i < selectedItems.size(); i++) {
String na = selectedItems.get(i);
TextView tv = createContactTextView(na);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(),bd.getIntrinsicHeight());
sb.append(na + ",");
sb.setSpan(new ImageSpan(bd), sb.length()
- (na.length() + 1), sb.length() - 1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
final int index = i;
sb.setSpan(new ClickableSpan() {
#Override
public void onClick(View widget) {
// here add your code
// delete your selectedItems[index]
// recreate your SpannedString and set to txt
}
}, sb.length()
- (na.length() + 1), sb.length() - 1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
txt.setText(sb);
txt.setMovementMethod(LinkMovementMethod.getInstance()); // important
Do not forget the last line
The best way to do what you are trying to do is to use the AOSP* "official" Chips library.
For instance, when you start entering a number in the default sms app, this will show a list of possible matching contacts. Once you select a contact or the number matches one, then it will turn into a "chip", with an 'x' button to remove it from the receiver list.
To obtain this behaviour, use this library, directly from the AOSP:
https://android.googlesource.com/platform/frameworks/opt/chips/+/master
A brief explanation can be found here, by Roman Nurik, an Android Developer Advocate working at Google:
https://plus.google.com/+RomanNurik/posts/WUd7GrfZfiZ
*AOSP stands for Android Open Source Project
i want to add ImageSpan in textview and every thing is ok with this code :
final SpannableStringBuilder sb = new SpannableStringBuilder();
MyAyehNumber Tag1 = new MyAyehNumber(My_Context, null);
Tag1.set_tagtitle(Title);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(Tag1);
int dWidth = bd.getIntrinsicWidth();
int dHeight = bd.getIntrinsicHeight();
bd.setBounds(0,0, dWidth,dHeight);
ImageSpan mImageSpan= new ImageSpan(bd);
sb.append(contactName);
sb.setSpan(mImageSpan, sb.length()-(contactName.length()), sb.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Txt_Ayeh.append(sb);
but when i set android:lineSpacingExtra for Textview... ImageSpan is located below of text !
how can set bounds to center ???
tnx
I am looking for an example of how to build and display Android SpannableString with ImageSpan. Something like inline display of smileys.
Thanks a lot.
Found the following and it seems to do the job:
public class TestActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView textView = (TextView) findViewById(R.id.textview);
SpannableString ss = new SpannableString("abc");
Drawable d = ContextCompat.getDrawable(this, R.drawable.icon32);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 0, 3, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(ss);
}
SpannableString + ImageSpan don't work in Android API 21 & 22 (I tested in Android Studio 1.2.1.1 in emulator), but if you do this:
TextView textView = (TextView) findViewById(R.id.textview);
textView.setTransformationMethod(null);
...
textView.setText(ss);
SpannableString + ImageSpan will work.
I was inspired by this post: https://stackoverflow.com/a/26959656/3706042
If anyone is still interested, I've created the a Java method to allow adding recursively a listed drawables to a text (set at the end to a textView) based on a "string to replace".
public void appendImages(#NonNull TextView textView,
#NonNull String text,
#NonNull String toReplace,
Drawable... drawables){
if(drawables != null && drawables.length > 0){
//list of matching positions, if any
List<Integer> positions = new ArrayList<>();
int index = text.indexOf(toReplace);
while (index >= 0) {
//add position
positions.add(index);
index = text.indexOf(toReplace, index + toReplace.length());
}
if(positions.size() > 0 && drawables.length >= positions.size()){
textView.setTransformationMethod(null);
SpannableString ss = new SpannableString(text);
int drawablesIndex = 0;
for(int position : positions){
Drawable drawable = drawables[drawablesIndex++];
//mandatory for Drawables
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
ss.setSpan(new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE), position, position+toReplace.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}
textView.setText(ss);
}
else Timber.w("The amount of matches to replace is %s and the number of drawables to apply is %s", positions.size(), drawables.length);
}
else Timber.w("The drawables array is null or empty.");
}
Usage:
appendImages(myTextView, "This is a ^ simple ^ test", "^", drawable1, drawable2);