I just do a chat app, and want add bubble to every conversation image like this bubble effect , and I use Fresco to download image. How to use Fresco to add image bubble?
Asked
Active
Viewed 106 times
1 Answers
0
To create a chat bubble, you must make the bubble image in some image editor and then create a 9Patch out of it. You can also create the bubble using shapes and then saving it as a drawable which can be then used. An example of a chat bubble using shapes is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="50dp">
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#e57605" />
</shape>
</rotate>
</item>
<item android:left="20dp">
<shape android:shape="rectangle" >
<solid android:color="#e57605" />
<corners android:radius="20dp" />
</shape>
</item>
</layer-list>
The outcome image will be:

Abhi
- 3,431
- 1
- 17
- 35
-
Thx a lot.But use this way, the shape's color is same.I want the sharp's color to similar the image.How to cut 20px on the left of image, meanwhile keep the shape's part? – lostland Aug 28 '17 at 01:51
-
Can you please elaborate, I didn't understand. The image will be loaded in the shape and you can set the paddings for the image. – Abhi Aug 28 '17 at 05:57
-
I use this lib [BubbleImageView.java](https://github.com/lguipeng/BubbleView) and Picasso instead of Fresco to download image, and this work. – lostland Aug 29 '17 at 01:35
-
I mean the arrow has different color while the image is different . – lostland Aug 29 '17 at 01:37
-
You are still not clear about your problem. Do you mean that the image should be transparent and similar to the shape's image? If that is the question, then you must get transparent images(PNGs). Normal images are not transparent. If this is not your question, please explain in detail what your issue is? – Abhi Aug 29 '17 at 05:46