Rujul Gandhi Rujul Gandhi - 10 days ago 5
Android Question

want perfect circle for notification count

I have implemented code for notification count on option menu with the help of below code

@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.main_activity_navigation, menu);

MenuItem menuItem = menu.findItem(R.id.action_settings);
menuItem.setIcon(buildCounterDrawable(4, android.R.color.transparent));


return true;
}

private Drawable buildCounterDrawable(int count, int backgroundImageId) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.noitification_count, null);
view.setBackgroundResource(backgroundImageId);

if (count == 0) {
View counterTextPanel = view.findViewById(R.id.badge_layout1);
counterTextPanel.setVisibility(View.GONE);
} else {
TextView textView = (TextView) view.findViewById(R.id.badge_notification_1);
textView.setText("" + count);
}

view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);

return new BitmapDrawable(getResources(), bitmap);
}


here is my xml file (notification_count.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@android:style/Widget.ActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">

<RelativeLayout
android:id="@+id/badge_layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<RelativeLayout
android:id="@+id/relative_layout_item_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<Button
android:id="@+id/button1"
android:layout_width="@dimen/_100sdp"
android:layout_height="@dimen/_100sdp"
android:background="@drawable/ic_dollar" />
</RelativeLayout>

<TextView
android:id="@+id/badge_notification_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@id/relative_layout_item_count"
android:background="@drawable/circle_bg"
android:gravity="center"
android:text="12"
android:textColor="#FFF"
android:padding="@dimen/_10sdp"
android:textSize="@dimen/_30sdp"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>


here is my circle_bg.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid
android:color="@color/green"/>

<size
android:width="20dp"
android:height="20dp"/>
</shape>


But i am not getting perfect circle on notification count. I am getting like below
getting this.

but i want perfectly circle for notification count. so please help me.

Answer

set fixed width and height for your badge View

<TextView
        android:id="@+id/badge_notification_1"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignRight="@id/relative_layout_item_count"
        android:background="@drawable/circle_bg"
        android:gravity="center"
        android:text="12"
        android:textColor="#FFF"
        android:padding="@dimen/_10sdp"
        android:textSize="@dimen/_30sdp"
        android:textStyle="bold" />

and remove from your shape, its uncessary in this case

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@color/green"/>
</shape>
Comments