need a round imagebutton which clips the image in a circle

Question

I need a round image-button which clips the image in a circle, but this is what I get->(see the bus image)->bus image

I have given the description of Imagebutton xml and shape xml. The image is not clipped in a round circle, but it appears that the circle is divided into 2 parts and image is added in the middle. My code is as below->
CODE:

layout/activity.xml:
<ImageButton
                android:id="@+id/imageButtonGenerateBulk"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="25dp"

                android:layout_gravity="center_vertical"
                android:ellipsize="end"
                android:scrollHorizontally="true"
                android:singleLine="true"
                android:text="Generate Qr Code"
                android:textStyle="bold"
                android:layout_alignEnd="@+id/tv_question"
                android:layout_alignRight="@+id/tv_question"
                android:background="@drawable/drawii2"
                android:src="@drawable/bus"
                android:layout_weight="1"/>

drawii2.xml:

    <?xml version ="1.0" encoding ="utf-8"?><!--  Learn More about how to use App Actions: https://developer.android.com/guide/actions/index.html -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <corners
    
            android:radius="40dp" />
    
        <gradient
            android:angle="45"
    
            android:endColor="#01f1fa"
            android:gradientRadius="41dp"
            android:startColor="#0189ff"
            android:type="linear" />
        <!--android:centerX="float"
        android:centerY="float"-->
    
        <!--If your shape requires only one solid color-->
        <!--<solid
            android:color="#FFFFFF" />-->
    
        <size
            android:width="30dp"
            android:height="30dp" />
    
        <!--Use android:dashWidth="2dp" and android:dashGap="2dp"
        to add dashes to your stroke-->
        <stroke
            android:width="2dp"
            android:color="#FFFFFF" />
    
        <!--If you want to add padding-->
        <!-- <padding
             android:left="10dp"
             android:top="20dp"
             android:right="40dp"
             android:bottom="8dp" />-->
    
    </shape>

used this also:

<?xml version ="1.0" encoding ="utf-8"?><!--  Learn More about how to use App Actions: https://developer.android.com/guide/actions/index.html -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#0000" />
    <corners android:radius="20dp" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

did you tried [this](https://stackoverflow.com/a/28067593/10182897) — Ashish, Dec 31 '20 at 04:36
maybe all yoyu need is ti change rectangle to oval in drawii2.xml? — Alex Rmcf, Dec 31 '20 at 08:22
You can read about PorterDuff modes.https://developer.android.com/reference/android/graphics/PorterDuff.Mode In order to achieve an oval shaped image button that will clip the image you'll need to create a drawable with the shape you want and you then you can set them to clip each other as needed. — Dan Baruch, Dec 31 '20 at 08:35

Alex Rmcf · Answer 1 · 2020-12-31T08:32:11.993

This code gives me a round button:

<item android:state_enabled="false">
    <layer-list>
        <item android:id="@android:id/background">
            <shape android:shape="oval">
                <solid android:color="@color/colorHint" />
            </shape>
        </item>
    </layer-list>
</item>

<item android:state_pressed="true">
    <layer-list>
        <item android:id="@android:id/background">
            <shape android:shape="oval">
                <solid android:color="@color/colorPrimary" />
            </shape>
        </item>
    </layer-list>
</item>

<item>
    <layer-list>
        <item android:id="@android:id/background">
            <shape android:shape="oval">
                <solid android:color="@color/colorPrimaryLight" />
            </shape>
        </item>
    </layer-list>
</item>

I think you can use it for image view also. This xml file used to handle button states (pressed, enabled...) but you can remove all you don't need. After you set that to your ImageView's background you can try to play with ImageView's android:scaleType to fit your photo the way you want it

score 0 · Answer 2 · answered Dec 31 '20 at 08:39

You can use PorterDuff:

Drawable bt = //Get your picture drawable
            Bitmap results = ((BitmapDrawable)bt).getBitmap();
            Bitmap results32bit = Bitmap.createBitmap(results.getWidth(),  results.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas tmpC = new Canvas(results32bit);
            tmpC.drawBitmap(results,0,0,null);
            Bitmap mutableBitmap = results32bit.copy(Bitmap.Config.ARGB_8888, true);
            Canvas canvas = new Canvas(mutableBitmap);
            Paint paint = new Paint();
            PorterDuff.Mode mode = PorterDuff.Mode.DST_ATOP;// choose a mode
            paint.setXfermode(new PorterDuffXfermode(mode));
            Bitmap bmAppBg = (((BitmapDrawable)(resizeImage(getResources().getDrawable( R.mipmap.round_corner_square_2),results.getWidth(),results.getHeight()))).getBitmap()); 
            paint.setAlpha(255);
            canvas.drawBitmap(bmAppBg, 0, 0, paint);

With your R.mipmap.round_corner_square_2 as a png that's basically circle with transparent inside it and fill on the outside

More info can be found at: https://developer.android.com/reference/android/graphics/PorterDuff.Mode

need a round imagebutton which clips the image in a circle

2 Answers2