CODEWITHSUNDEEP
androidbackgrounddrawable
Nitesh Mishra
Nitesh Mishra

Reputation: 41

How to draw border for circular image view?

I am using drawable as image background for giving border but its not working as required (circle is not perfect).

here is the screen shot of my app

Recycler view item layout 

<data>

    <variable
        name="news"
        type="com.android.mvvm.model.NewsItem" />

    <variable
        name="clickListener"
        type="com.android.common.util.RecyclerViewOnItemClickHandler"></variable>
</data>

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circular_image_selected"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:onClick="@{clickListener.onClick}"
        android:src="@{news.thumb}" />

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circular_image_unselected"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:onClick="@{clickListener.onClick}"
        android:src="@{news.thumb}"
        android:visibility="gone" />

</FrameLayout>

Adapter's onBindViewHolder method where i am setting background to the image view on item selected

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (holder instanceof RecyclerViewHolder) {
        NewsItem item = list.get(position);

        RecyclerViewHolder newsViewHolder = (RecyclerViewHolder) holder;
        if (item.isSelected) {
            CircleImageView img = (CircleImageView) newsViewHolder.getBinding().getRoot().findViewById(R.id.circular_image_unselected);
            newsViewHolder.getBinding().getRoot().findViewById(R.id.circular_image_unselected).setVisibility(View.VISIBLE);
            img.setBackground(context.getResources().getDrawable(R.drawable.selected_img_bg));

        } else {
            CircleImageView img = (CircleImageView) newsViewHolder.getBinding().getRoot().findViewById(R.id.circular_image_selected);
            img.setColorFilter(Color.argb(150, 155, 155, 155), PorterDuff.Mode.SRC_ATOP);
            newsViewHolder.getBinding().getRoot().findViewById(R.id.circular_image_unselected).setVisibility(View.INVISIBLE);
        }
        newsViewHolder.getBinding().setVariable(BR.clickListener,
                new RecyclerViewOnItemClickHandler<>(item, position, listener));
        newsViewHolder.getBinding().setVariable(BR.news, item);
        newsViewHolder.getBinding().executePendingBindings();

    }
}

Drawable for image background

<?xml version="1.0" encoding="utf-8"?><shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/transparent" />
<stroke android:color="@android:color/holo_red_dark" android:width="3dp"/>
<size
    android:width="100dp"
    android:height="100dp"/>

Upvotes: 0

Views: 3448

Answers (2)

gaurav gupta
gaurav gupta

Reputation: 573

i solve this by placing imageview into relativelayout

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:layout_margin="5dp"
            android:padding="2dp"
            android:background="@drawable/imageborder"
            android:src="@drawable/placeholder"
            android:id="@+id/notificator_image"/>

        </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >


<stroke android:width="2dp"
    android:color="#cc195d" />

</shape>

Upvotes: 0

Moulesh
Moulesh

Reputation: 2810

   <?xml version="1.0" encoding="utf-8"?>

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="7.8dp"
android:innerRadius="0dp"
>

<solid
    android:color="#F00"
    />
<stroke
    android:width="1dip"
    android:color="#FFF" />

use this as background to you image... increase thickness accordingly.. or if this doesn't work retain the previous background xml and add android:padding around 10 to 15 dp in your imageview

Upvotes: 1

Related Questions