Reputation: 1299
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.
Upvotes: 2
Views: 12639
Reputation: 2355
You can use the powerful Constraint Layout.
The advantages are:
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()
}
Upvotes: 1
Reputation: 257
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"/>
Upvotes: 5
Reputation: 7974
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.
Upvotes: 1