10

I have a image with sharp edges. enter image description here

the tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/background"
    android:tileMode="repeat">
</bitmap>

the back.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
       <item android:drawable="@drawable/tile_mode" />
    <item>
        <shape>
            <solid/>
            <stroke android:width="1dip" android:color="#225786" />
            <corners android:radius="10dip"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item> 

layout.xml

<LinearLayout
                android:id="@+id/frame1"
                android:background="@drawable/back"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </LinearLayout>

I am setting the image as a background to this layout and drawing a border to it but the problem is the image is square with sharp edges and the border which I am drawing in the xml is rounded corners. So how to make the image also with rounded corners?

8 Answers 8

20

This is one of solution in which you have to make round to your main layout background and inside keep your imageview with your desire image:

something like below:

back.xml

This will make your image to round corner

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
     <stroke android:width="1dp" android:color="#dd7b7a"/>
     <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
     <solid android:color="#dd7b7a"/>
 </shape>

tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background"
android:tileMode="repeat" />

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
<LinearLayout 
     android:padding="4dip"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    android:gravity="center_horizontal"
    >
<LinearLayout  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
   android:background="@drawable/tile_mode"
    />
</LinearLayout>  
</LinearLayout>

Updated

After digging lots, I came across on of solution which already posted on stackoverflow

Changing Image as Rounded Corner

How to make an ImageView to have rounded corners

step1@

main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context=".MainActivity" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"

          />

    </RelativeLayout>

Step2@

Make one function which make rounded to your bitmap using canvas.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .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, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        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;
    }

step3@

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView image=(ImageView)findViewById(R.id.image);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing);


    image.setImageBitmap(getRoundedCornerBitmap(bitmap, 20));
14
  • still the image is with sharp edges and there is no background for bitmap in xml\
    – Goofy
    Jan 23, 2013 at 5:51
  • ok,now where do i add the background image i mean the bitmap xml ?
    – Goofy
    Jan 23, 2013 at 6:02
  • i mean this <layer-list xmlns:android="schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tile_mode" />
    – Goofy
    Jan 23, 2013 at 6:04
  • @Goofy check now, you have add at same way, as you added before.
    – RobinHood
    Jan 23, 2013 at 6:09
  • please wait i will check that,please help me i am stuck from long time
    – Goofy
    Jan 23, 2013 at 6:12
3

Pass original bitmap to the following function and you will get a rounded bitmap as result :) . Hope this helps someone.

 public Bitmap getRoundedBitmap(Bitmap bitmap) {
        Bitmap resultBitmap;
        int originalWidth = bitmap.getWidth();
        int originalHeight = bitmap.getHeight();
        float r;

        if (originalWidth > originalHeight) {
            resultBitmap = Bitmap.createBitmap(originalHeight, originalHeight,
                    Bitmap.Config.ARGB_8888);
            r = originalHeight / 2;
        } else {
            resultBitmap = Bitmap.createBitmap(originalWidth, originalWidth,
                    Bitmap.Config.ARGB_8888);
            r = originalWidth / 2;
        }

        Canvas canvas = new Canvas(resultBitmap);

        final Paint paint = new Paint();
        final Rect rect = new Rect(ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, originalWidth, originalHeight);

        paint.setAntiAlias(true);
        canvas.drawARGB(ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE,
                ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE);
        canvas.drawCircle(r, r, r, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return resultBitmap;
    }
2

ok let's try in below way

     <?xml version="1.0" encoding="utf-8"?>
 <shape
    android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#000000"/>
</shape>

<LinearLayout
    android:id="@+id/frame1"
    android:background="@drawable/corner_background"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    >
    <ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/background" 
    />
</LinearLayout>
7
  • how will i refer to my bitmap xml ?
    – Goofy
    Jan 23, 2013 at 6:07
  • you do not need use your bitmap image just use my xml image file name it will handle it, you just put can you archive same bitmap that you have.let me know Jan 23, 2013 at 6:23
  • for edges changes change in below code that i did send you <stroke android:width="5dp" android:color="#000000"/> Jan 23, 2013 at 6:27
  • can you please help me on that i mean this <layer-list xmlns:android="schemas.android.com/apk/res/android">; <item android:drawable="@drawable/tile_mode" /> where shall i add this? in your code
    – Goofy
    Jan 23, 2013 at 6:29
  • ok let's try <?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="schemas.android.com/apk/res/android"> <corners android:radius="30dp"/> <stroke android:width="2dp" android:color="#000000"/> </shape> <LinearLayout android:id="@+id/frame1" android:background="@drawable/corner_background" android:layout_width="fill_parent" android:layout_height="wrap_content"> </LinearLayout> Jan 23, 2013 at 6:33
2

RobinHood's answer worked for me with one change due to an error I was receiving about variable assignment.

I had to change the line:

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

To this line:

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        

Making my complete code this:

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    TextView textViewTitle = (TextView) findViewById(R.id.MYTEXTIDHERE);
    textViewTitle.setText("Some Text");

    ImageButton imageButtonSetter = (ImageButton) findViewById(R.id.MYIMAGEIDHERE);
    Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.MYIMAGENAMEHERE);     
    imageButtonSetter.setImageBitmap(getRoundedCornerBitmap(myBitmap, 40));
}   

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .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, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));        
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}
2

Actually, there is a library that I made which meet your needs exactly, and you don't have to bother with those xml files.

https://github.com/pungrue26/SelectableRoundedImageView

With this open-source project, You can set different radii on each corners, and set borders(width and colors), and etc. like below. I hope it may help you.

Rounded ImageView inside CardView

0
0

try your back.xml something like this.

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
<solid android:color="#ffffffff"/>    

<stroke android:width="3dp"
        android:color="#ff000000"
        />

<padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
 android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>
1
  • where will add the bitmap xml which is tilemode repeat in this?
    – Goofy
    Jan 23, 2013 at 6:06
0

I had a similar problem today only my image was a Google map. you actually have to hide the corners and the way to do that is to create a 9Patch as the following one:

enter image description here

and apply it as a background over all your layout or another layout covering your layout. Take a look at the following link for more information:

Is there a way to implement rounded corners to a Mapfragment?

I have actully went to this site: http://www.sumopaint.com/app/
and painted it all by hand you can take my example and change the colors to your liking. you would probably need the next one:

enter image description here

you can get more information on how to create 9Patchs in the following links:

http://radleymarx.com/blog/simple-guide-to-9-patch/

http://android9patch.blogspot.co.il/

4
  • how to do it please guide me i am stuck from long time
    – Goofy
    Jan 23, 2013 at 6:09
  • hey how to do it i need to create a image like this and hide it with this image?
    – Goofy
    Jan 23, 2013 at 6:38
  • what will be the color around the corners?white?
    – Emil Adz
    Jan 23, 2013 at 6:53
  • then this way won't help you.
    – Emil Adz
    Jan 23, 2013 at 6:58
0
<?xml version="1.0" encoding="utf-8"?>

<item>
    <bitmap
        android:src="@drawable/bg_striped_img"
        android:tileMode="repeat" />
</item>
<item android:left="-20dp" android:top="-20dp" android:right="-20dp" android:bottom="-20dp">
    <shape android:shape="oval" >
        <stroke
            android:width="20dp"
            android:color="#ffffffff" />

        <solid android:color="#00000000" />

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

    <item >
    <shape android:shape="oval" >
        <stroke
            android:width="1dp"
            android:color="#ff999999" />

        <solid android:color="#00000000" />

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.