I would like to do this on my android chat
but I can not get my picture fit my bubble.
-I have a LinearLayout, and his background is a bubble 9patch
-within this, I have a imageview, insert the image here
but not how to make this fit the background like we see on screen.
this is how my image is
could give me an idea of how I can do this?
thank.
UPDATE : 28/04/2013
this is my layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rtlImganen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:gravity="center_vertical" >
<LinearLayout
android:id="#+id/lnyGenImagenMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/bocadilloazulmio"
android:gravity="right"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imgImagenMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:maxHeight="#dimen/maximagen"
android:maxWidth="#dimen/maximagen"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imgPlayMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/play" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp" >
<ImageView
android:id="#+id/imgImagenEnvioRecibidoMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/enviadorecibido" />
<TextView
android:id="#+id/txtFechaImagenVideoMio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:textColor="#0000FF"
android:textSize="8sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
yet I still havenĀ“t the solution
this can only be done with a custom view. I had the same problem. Look for Custom ImageView and Paths and clipping Bitmaps. I wrote this snippet to clip a speech bubble shape out of a given bitmap:
public static Bitmap clipit(Bitmap bitmapimg,int direct) {
//1 = direction right
//0 = direction left
Bitmap output = Bitmap.createBitmap(bitmapimg.getWidth(),
bitmapimg.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmapimg.getWidth(),
bitmapimg.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
if(direct == 0) {
canvas.drawRect(0, 0, bitmapimg.getWidth()-15, bitmapimg.getHeight(), paint);
Path path = new Path();
path.moveTo(bitmapimg.getWidth()-15, 10);
path.lineTo(bitmapimg.getWidth(), 20);
path.lineTo(bitmapimg.getWidth()-15, 30);
path.lineTo(bitmapimg.getWidth()-15, 10);
canvas.drawPath(path,paint);
}
if(direct == 1) {
canvas.drawRect(15, 0, bitmapimg.getWidth(), bitmapimg.getHeight(), paint);
Path path = new Path();
path.moveTo(15, 10);
path.lineTo(0, 20);
path.lineTo(15, 30);
path.lineTo(15, 10);
canvas.drawPath(path,paint);
}
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmapimg, rect, rect, paint);
return output;
}
does this solve your problem?
Related
I have a sub-class of TextView and want to draw a horizontal line by making its height to be 1px. It is ok but i also want to make it center vertically by setting the top margin as half of the height.
However it turns out to be failed.
Any solution to it?
thank you
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
int h = getHeight();
lp.setMargins(0, h/2, 0, 0);
You can do it in your xml:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!.\nA second line test."/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
android:layout_centerVertical="true"/>
</RelativeLayout>
Regards.
If you come here with some screenshots what you want to do , i can help you easily. But i can suggest you to use FrameLayout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:background="#123456" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Horizontal Line" />
</FrameLayout>
There is one guide for FrameLayout here : Frame Layout
And the screenshot :
Without XML you could override onDraw(Canvas canvas) and draw the line in your subclassed TextView like so:
public final class TextViewEx extends TextView
{
private final Paint mPaint = new Paint();
protected final void onDraw(Canvas canvas)
{
super.onDraw(canvas);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(1);
mPaint.setColor(Color.GRAY);
float y = getHeight() / 2f;
canvas.drawLine(0, y, getWidth(), y, mPaint);
}
}
I am working on an instant chat application.I have to implement following screen.
In the screenshot you can see we have a circular image view where we are displaying the profile pic of the user.On profile pic we have a small circle having green color indicating that the user is online.I am implementing the screen using following xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding10">
<FrameLayout
android:id="#+id/frame"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="#dimen/margin10">
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/imgContact"
android:layout_width="80dp"
android:layout_height="80dp "
android:layout_gravity="bottom|left" />
<com.almabay.almachat.circularImageView.CircularImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="top|right"
android:background="#78dd63" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin10"
android:layout_toRightOf="#+id/frame"
android:orientation="vertical"
android:padding="#dimen/padding5">
<TextView
android:id="#+id/txtNam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Neeraj"
android:textSize="15sp" />
<TextView
android:id="#+id/stats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin10"
android:text="Welocme to Almachat" />
</LinearLayout>
</RelativeLayout>
But i am getting the screen as is given below:
Here you can see that green color is not displayed in circle .It is displayed in square.However I have set the color in the design ,in actual practice i want to set it as green using java code when the user will be online .I have taken a circular image view .Still the background color is shown in square.Please guide me how can i fix the issue.
Solved the Issue:
Create a drawable named circle_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:endColor="#color/green_color"
android:startColor="#color/green_color" />
<stroke
android:width="2dp"
android:color="#color/while_color"></stroke>
</shape>
Used it in the background of an imageview
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding10">
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/imgContact"
android:layout_width="80dp"
android:layout_height="80dp "
android:layout_alignParentLeft="true" />
<ImageView
android:id="#+id/online"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignRight="#+id/imgContact"
android:layout_alignTop="#+id/imgContact"
android:background="#drawable/circle_green" />
It is working for me now.
You need to create a CustomImageView like this...
public class CircularImageView extends ImageView {
public CircularImageView(Context context,AttributeSet attributeSet){
super(context,attributeSet);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
finalBitmap.getHeight() / 2 + 0.7f,
finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
And use the imageview class in your xml layout like this...
<com.xxxx.xxx.xxxx.CircularImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/std_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"/>
you can do something like this :
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgUserImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/user_temp" />
<ImageView
android:id="#+id/imgOnlineIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgUserImage"
android:layout_alignTop="#+id/imgUserImage"
android:layout_marginLeft="#dimen/margin_small"
android:src="#drawable/online_indicator" />
</RelativeLayout>
This is just an example from my app.You can modify it accordingly and it serves your purpose.
* i used a small green image to show as online indicator.
You can use the powerful Constraint Layout.
The advantages are:
Consistency in different layout sizes.
Simple to implement.
You can animate the dot =).
Create a drawable named circle_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:endColor="#color/green_color"
android:startColor="#color/green_color" />
<stroke
android:width="2dp"
android:color="#color/while_color"></stroke>
</shape>
Align the online dot on your ImageView within the Constraint Layout.
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="#dimen/avatar_profile_height"
android:layout_height="#dimen/avatar_profile_height"
android:layout_marginTop="#dimen/margin_medium"
android:src="#drawable/avatar_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/online"
android:layout_width="12dp"
android:layout_height="12dp"
android:background="#drawable/circle_green"
android:contentDescription="#string/online_status"
app:layout_constraintCircle="#id/profile_image"
app:layout_constraintCircleAngle="150"
app:layout_constraintCircleRadius="#dimen/avatar_profile_radius" />
Ignore the warning that the ImageView is not constrained.
Finally, in order to animate, do the following:
view.button_home.setOnClickListener {
//1
val layoutParams = view.online.layoutParams as ConstraintLayout.LayoutParams
val startAngle = layoutParams.circleAngle
val endAngle = startAngle + 360
//2
val anim = ValueAnimator.ofFloat(startAngle, endAngle)
anim.addUpdateListener { valueAnimator ->
//3
val animatedValue = valueAnimator.animatedValue as Float
val layoutParam = view.online.layoutParams as ConstraintLayout.LayoutParams
layoutParam.circleAngle = animatedValue
view.online.layoutParams = layoutParam
//4
view.online.rotation = (animatedValue % 360 - 150)
}
//5
anim.duration = 2000
//6
anim.interpolator = LinearInterpolator()
anim.start()
}
Thanks for helping me to solve the problem.
I use setImageViewBitmap to widget imageview from a bitmap by drawing round corners with canvas, but it has a black field in imageview's corners. I don't know why this only happens on Widget but didn't happens on my Activity view.
How to let my corners on Widget look like corners on Activity?
here is my situation
on Widget :
http://goo.gl/YpzhJh
on Activity :
http://goo.gl/bc09oL
here is my code of making round corners.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
//final int color = 0xff000000;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 60;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
here is the code of setting widget remoteviews
bitmap = getRoundedCornerBitmap(orgin_bitmap);
if(bitmap!=null)
views.setImageViewBitmap(R.id.main_imageview, bitmap);
here is widget xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/main_imageview"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/transparent"
android:visibility="visible"
android:src="#drawable/widget_back3" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="600dp"
android:layout_height="600dp"
android:visibility="visible"
android:layout_centerInParent="true"
android:src="#drawable/widget_back2" />
<ImageView
android:id="#+id/imageView_redheart"
android:layout_width="600dp"
android:layout_height="600dp"
android:layout_centerInParent="true"
android:background="#color/blue"
android:visibility="visible"
android:src="#drawable/widget_back1" />
<TextView
android:id="#+id/now"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#color/transparent"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:shadowColor="#color/black"
android:shadowRadius="3.0"
android:text="9999"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/trans"
android:textSize="25sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
setbackground(null);
will help
in xml
android:background="#null"
my imageview not fully show on imageview width see this image its show white space http://imgur.com/3fDXgij but i want to show mageview like this shape http://imgur.com/g8UeI4b and image show full in imageview no white space below is my code please help me
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>
android:adjustViewBounds="true"
Reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
this should fix your problems. In this case scaling is not your problem, because image is already scaled. Problem is that container is trying to get all possible space inside layout, but image cannot expand its width because its trying to keep its ratio.
<ImageView
android:id="#+id/test_button_image"
android:layout_width="80dp"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#drawable/border6"
android:src="#drawable/ic_launcher" >
</ImageView>
This attribute will "crop" the remaining not used space in ImageView.
Also you should check your background image if its properly 9patch image.
I would recommend you to put the imageview without any background inside FrameLayout, and set border image for this FrameLayout.
Imageview to fill a layout (in your xml):
android:scaleType="fitXY"
If you want to cut the corners you have to :
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
reference
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#Android:Color:white"
android:padding="1dp" >
<ImageView
android:id="#+id/test_button_image"
android:layout_width="wrapcontent"
android:layout_height="wrapcontent"
android:background="#drawable/border6"
>
</ImageView>
</LinearLayout>
How to display text on android ImageView with Linear Layout. I found many examples on stack overflow for this purpose but all are for Relative Layout, Frame Layout But I am not getting it in Linear Layout.
I have tried for android:text="My Text" But its not working.
Please suggest me if its possible to do so. If so how can it be done.
<ImageView
android:id="#+id/share_button"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:layout_weight="2"
android:text="text"
android:background="#drawable/iosbutton" />
This is the Image attached to this ImageView on which I want to display text in the center.
Try this
Use this method
public BitmapDrawable writeOnDrawable(int drawableId, String text){
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(20);
Canvas canvas = new Canvas(bm);
canvas.drawText(text, 0, bm.getHeight()/2, paint);
return new BitmapDrawable(bm);
}
call like this
ImageView image=(ImageView)findViewById(R.id.imageView1);
image.setImageDrawable(writeOnDrawable(R.drawable.ic_launcher,"Hello"));
Does it have to be an ImageView?
<TextView
android:id="#+id/share_button"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_margin="5dp"
android:layout_weight="2"
android:text="text"
android:gravity="center"
android:background="#drawable/iosbutton" />