I want to customize EditText's behavior like HandRite.
So I tried examing EditText's editing performance when there are many ImageSpan, but it was too slow when adding or deleting character on middle using touch screen and IME after below code.
How can I speed up this performance?
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 1000; i++) {
sb.append(' ');
}
SpannableString ss = new SpannableString(sb.toString());
Random random = new Random();
for (int i = 0; i < 1000; i++) {
Drawable d = new ColorDrawable(random.nextInt());
d.setBounds(0, 0, mEditText.getLineHeight(), mEditText.getLineHeight());
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, i, i+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
mEditText.setText(ss);
HandRite's behavior
Since the number of ImageSpan objects are very large almost 1000 in your SpannableString which is causing it getting slow.
Try to use HTML teext along with ImageGetter and check peformance :
ImageGetter imageGetter = new ImageGetter() {
public Drawable getDrawable(String source) {
StringTokenizer st = new StringTokenizer(index, ".");
Drawable d = new BitmapDrawable(getResources(),emoticons[Integer.parseInt(st.nextToken()) - 1]);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
Spanned cs = Html.fromHtml("<img src ='"+ index +"'/>", imageGetter, null);
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.
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
How can I align a bitmap to the text in a SpannableString?
SpannableStringBuilder ssb = new SpannableStringBuilder(arr_messages.get(position));
String msg1 = ssb.toString();
for (int i=0; i<smileys.length; i++)
{
if (msg1.indexOf(smileys[i]) > 0)
{
int t = msg1.indexOf(smileys[i]);
ssb.setSpan(new ImageSpan(bitmapArray.get(i)), t, t+2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
holder.txtName.setText(ssb, BufferType.SPANNABLE);
I would like to demonstrate the problem with these images:
What I want is to center both the text and the image vertically (the text is ok, but the image screws it up).
The result is:
Try ...new ImageSpan(bitmapArray.get(i), ImageSpan.ALIGN_BASELINE)...!
hello i am developing chat application in which i want to insert smiley
i have not much idea about it how to integrate and display in it
can u give me suggestion for doing the same ?
ImageGetter imageGetter = new ImageGetter() {
public Drawable getDrawable(String source) {
Drawable d = getResources().getDrawable(
R.drawable.happy);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
cs = Html.fromHtml(
"<img src='"
+ getResources()
.getDrawable(R.drawable.happy)
+ "'/>", imageGetter, null);
System.out.println("cs is:- " + cs);
edttxtemoji.setText(cs);
i found this code, in this it uses images, is this feasible ?
or there is another solutions ?
please give me better solution for this thanx in advance
Yes there is another way for showing smiley within the TextView or EditText. Build a Spannable text using ImageSpanand then setText the Spannable to TextView or EditText. Here is an post for the same.
To set Smiley in edittext
int value=R.id.ic_launcher;
Drawable Smiley = getResources().getDrawable(value);
Smiley.setBounds(0, 0, 15, 15);
SpannableStringBuilder builder = new SpannableStringBuilder();
String imgValue = "["+value+"]";
builder.append(imgValue);
builder.setSpan(new ImageSpan(Smiley), builder.length()-imgValue.length(), builder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
edit_text.getText().insert(txt.getSelectionStart(), builder);
now to fetch smiley in listview or textview
textview.setText(addSmileySpans(context,edit_text.getText()));
public CharSequence addSmileySpans(Context context, CharSequence msg) {
SpannableStringBuilder builder = new SpannableStringBuilder(your_recieved_message);
Pattern pattern = Pattern.compile("\\[([^\\[\\]]+)\\]");
if( pattern != null )
{
Matcher matcher = pattern.matcher( your_recieved_message );
int matchesSoFar = 0;
while( matcher.find() )
{
CharSequence cs =matcher.group().subSequence(1, matcher.group().length()-1);
int value = Integer.parseInt(cs.toString());
System.out.println("pattern is::"+matcher.group().subSequence(1, matcher.group().length()-1));
int start = matcher.start() - (matchesSoFar * 2);
int end = matcher.end() - (matchesSoFar * 2);
Drawable Smiley = context.getResources().getDrawable(value);
Smiley.setBounds(0, 0,15,15);
builder.setSpan(new ImageSpan(Smiley), start + 1, end - 1, 0 );
builder.delete(start, start + 1);
builder.delete(end - 2, end -1);
matchesSoFar++;
}
}
return builder;
}
I think it is little bit late.
public void addSmily() {
CharSequence text = myEditText.getText();
int resource = R.drawable.ic_menu_emoticons ;
myEditText.setText(getSpannableText(text,resource));
}
private Spannable getSpannableText(CharSequence text, int smilyToAppend) {
Spannable spannable = Factory.getInstance().newSpannable(text+" ");
ImageSpan smilySpan = new ImageSpan(getApplicationContext(),smilyToAppend);
spannable.setSpan(smilySpan, spannable.length()-1, spannable.length(), 0);
return spannable;
}
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);