Background image with rounded bottom in XML android

Question

I wanted to add an image in the background of my linear layout and I know the attribute will be android: background="@drawable/login_bg" but now I have to create a drawable resource file and in that file, I want the bottom left and bottom right sides to be rounded and top left and right sides to be rectangular . Remember: I need an Image inside the background with rounded corners.

I have tried this link

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

 <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners
                android:bottomRightRadius="15dp"
                android:bottomLeftRadius="15dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
        </shape>
    </item>
    <item android:drawable="@drawable/login_bg" />
</layer-list>

@ViduraPrasangana I have already gone through this post and I had made this class in my project now how to integrate it with the XML file. — Paritosh purohit, Sep 30 '19 at 06:46
checkout this https://stackoverflow.com/questions/29342633/cardview-corner-radius — Ankit, Sep 30 '19 at 07:22
@Paritoshpurohit can you post a picture of what you want to implement? — Maitri, Sep 30 '19 at 09:12
@Maitri added an image. I want to know how to make the background of the layout containing Image go round both at same time. — Paritosh purohit, Sep 30 '19 at 09:51
You can use this library or can copy a class from it: https://android-arsenal.com/details/1/7549 — Maitri, Sep 30 '19 at 10:09

score 1 · Answer 1 · answered Sep 30 '19 at 08:23

Try to use this customview. But you must change from android: background to android: src

class RadiusImageView: AppCompatImageView {

private val clipPath = Path()

constructor(context: Context) : super(context) {}

constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}

constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {}

override fun onDraw(canvas: Canvas) {
    //float radius = 36.0f;

    val rect = RectF(0f, 0f, width.toFloat(), height.toFloat())

    // 4 Pair of radius : top-left, top -right, bottom-right, bottom left, each pair is radius 
    // for rx and ry for each corner
    clipPath.addRoundRect(rect, floatArrayOf(0f,0f,0f,0f,40f,40f,40f,40f) Path.Direction.CW)

    canvas.clipPath(clipPath)

    super.onDraw(canvas)
}

}

@HelloWorld it is not working in my case, I am not down marking your answer, anyways thanks! — Paritosh purohit, Sep 30 '19 at 09:53

score 0 · Accepted Answer · answered Dec 18 '19 at 06:54

I got a solution and I did it this in the following way: I am writing a part of my onCreate method

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_login);
    topbackground=(ImageView) findViewById(R.id.topbackground);
 Bitmap image1 = BitmapFactory.decodeResource(getResources(),R.drawable.login_bg)
 topbackground.setImageBitmap(roundedImage.getRoundedCornerBitmap(this,
 image1,200,image1.getWidth(),image1.getHeight(),true,true,false,false ));
 }
 RoundedImage roundedImage = new RoundedImage();

There is an image with the name "login_bg" , "topbackground" is the view of Image and I am calling a separate class named "RoundedImage" and performing this by passing its parameters and my class RoundedImage is as follows:

 public class RoundedImage  {




   public static Bitmap getRoundedCornerBitmap(Context context, Bitmap input, int 
   pixels , int w , int h , boolean squareTL, boolean squareTR, boolean squareBL, 
   boolean squareBR  ) {

    Bitmap output = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final float densityMultiplier = 
    context.getResources().getDisplayMetrics().density;

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, w, h);
    final RectF rectF = new RectF(rect);

    //make sure that our rounded corner is scaled appropriately
    final float roundPx = pixels*densityMultiplier;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);


    //draw rectangles over the corners we want to be square
    if (squareTL ){
        canvas.drawRect(0, 0, w/2, h/2, paint);
    }
    if (squareTR ){
        canvas.drawRect(w/2, 0, w, h/2, paint);
    }
    if (squareBL ){
        canvas.drawRect(0, h/2, w/2, h, paint);
    }
    if (squareBR ){
        canvas.drawRect(w/2, h/2, w, h, paint);
    }

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(input, 0,0, paint);

    return output;
    }
  }

This is how it goes and I am able to get what was needed.

Background image with rounded bottom in XML android

2 Answers2