CODEWITHSUNDEEP
javaandroidxml
Tausif Shahbaz
Tausif Shahbaz

Reputation: 174

Custom shaped layout with bottom line curved in Android

I want to make a layout like the one in the picture with the bottom curved.

I tried doing using some examples in stackoverflow but cannot get the exact idea how to do this.

Right now i was trying to do using a drawable xml and including that in the layout:

`<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />
    <padding
        android:bottom="5dp"
        android:left="20dp"
        android:right="0dp"
        android:top="0dp" />
    <stroke
        android:width="0.5dp"
        android:color="@color/colorPrimary" />
    <solid android:color="@color/colorPrimary" />
</shape>`

screen image

Upvotes: 2

Views: 1959

Answers (1)

Sanjay Kumar
Sanjay Kumar

Reputation: 1185

You can do it as -
create as Custom View as -

public class CustomDrawableView extends View {
  Paint paint;
  void init(){
    paint =  new Paint();
  }
}

Now in onDraw() Method you can draw as -
first draw a rectangle having height = getHeight()/2
width = getWidth()

onDraw(Canvas canvas){
  Rect r = new Rect(0, 0, width , height );
  paint.setStyle(Paint.Style.FILL);
  paint.setColor(Color.RED);
  canvas.drawRect(r, paint);
  int centerX=widht;
  int centerY = -50;
  int radius = Math.sqrt((0-centerX)*(0-centerX) + (height-centerY )*(height-centerY)); 
  canvas.drawCircle(width, height -50 , radius, paint); // for big circle

}

Set height and width of CustomDrawableView to match parent and you can also adjust center as you want.

Upvotes: 1

Related Questions