Develop Reference

Android Bitmap crop oval shape

Suppose I have a portrait bitmap that I have taken with my front facing camera.
How may I crop the bitmap to the shape of the oval-shaped overlay after I have taken the picture? The oval shape is centered to the screen. The oval shape has fixed height and width
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- camera viewfinder here which fits the whole screen-->
<RelativeLayout
android:id="#+id/cameraLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingTop="10dp">
<!--Custom buttons-->
</RelativeLayout>
<RelativeLayout
android:id="#+id/record_panel"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#android:color/transparent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<!--Capture button-->
</RelativeLayout>
</RelativeLayout>
<!--the oval-shaped overlay-->
<ImageView
android:layout_width="210dp"
android:layout_height="318dp"
android:id="#+id/overlay"
android:layout_gravity="center"
android:src="#mipmap/oval" />
</FrameLayout>
Screenshot:

You can base your solution on how to crop a circle from a bitmap:
#Override
public Bitmap crop(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}
Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader = new BitmapShader(squaredBitmap,
BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
paint.setShader(shader);
paint.setAntiAlias(true);
float r = size / 2f;
canvas.drawCircle(r, r, r, paint);
squaredBitmap.recycle();
return bitmap;
}
Now just change canvas.drawCircle to canvas.drawOval and give it appropriate values.

How to add dynamically circular image view with some specified background color

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()
}

android - How to remove black field on Widget ImageView

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"

insert imageview in android chat bubble adjustable

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?

Centerally aligned text over ImageView in android Linear Layout

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" />