How to create a circular bottom view?

Question

I am trying to create a view that is circular bottom, see image

I try to design differently, such as XML, programmatically, but I cannot succeed. I use XML code that makes a circle below, but when I use Any image or Banner slider as shown, then it holds the whole view.

I am using this XML code now

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@drawable/bottom_radius"
    android:orientation="vertical">

    <ss.com.bannerslider.views.BannerSlider
        android:id="@+id/bannerSlider"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

AND bottom_radius.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/colorPrimaryDark" />
    </shape>
</item>
<item
    android:bottom="4dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
    </shape>
</item>

The way out of this is in XML

The XML output looks good, as I expected, but when I run the program and see that a mobile or simulator is installed on it, then the output looks like

Please provide me with a solution so that I can design what I want to create. I will be very grateful to you.

Answer 1

android:background="@drawable/bottom_radius" linearlayout

Answer 2

.

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

    <stroke android:width="1dp"
        android:color="@color/colorPrimary"
        />
    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />
    <corners android:bottomRightRadius="150dp"
        android:bottomLeftRadius="150dp"
        />
</shape>

,

Answer 3

PorterDuff.Mode. . Porter-Duff PorterDuff.Mode.DST_IN .

, , . -, :

, , Porter-Duff PorterDuff.Mode.DST_IN. Porter-Duff ( ), , , .

, , , . ( , , . , 1.0.) , , . .

:

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView topImage = findViewById(R.id.bottomImage);
        topImage.setImageBitmap(cropAndOverlay(topImage, R.drawable.smile,
                                               R.drawable.smile_transparent));
    }

    private Bitmap cropAndOverlay(@NonNull ImageView imageView,
                                  @DrawableRes int cropId, @DrawableRes int overlayId) {
        // Get the bitmap for the current image.
        Bitmap dst = ((BitmapDrawable) imageView.getDrawable()).getBitmap();

        // Get the cropping image. This is the Porter-Duff source image.
        Bitmap src = Bitmap.createBitmap(dst.getWidth(), dst.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas resultCanvas = new Canvas(src);
        Drawable drawable = ResourcesCompat.getDrawable(getResources(), cropId, null);
        drawable.setBounds(0, 0, resultCanvas.getWidth(), resultCanvas.getHeight());
        drawable.draw(resultCanvas);

        // Combine the source with the destination bitmap while applying the Porter-Duff mode.
        Bitmap resultBitmap = getPorterDuffBitmap(dst, src, PorterDuff.Mode.DST_IN);
        resultCanvas.setBitmap(resultBitmap);

        // Place the overlay image on the bitmap.
        drawable = ResourcesCompat.getDrawable(getResources(), overlayId, null);
        drawable.setBounds(0, 0, resultBitmap.getWidth(), resultBitmap.getHeight());
        drawable.draw(resultCanvas);
        dst.recycle();
        return resultBitmap;
    }

    private Bitmap getPorterDuffBitmap(Bitmap dst, Bitmap src, PorterDuff.Mode mode) {
        Bitmap bitmap =
            Bitmap.createBitmap(dst.getWidth(), dst.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);

        // Draw the original bitmap (DST)
        canvas.drawBitmap(dst, 0, 0, null);

        // Draw the mask (SRC) with the specified Porter-Duff mode
        Paint maskPaint = new Paint();
        maskPaint.setXfermode(new PorterDuffXfermode(mode));
        canvas.drawBitmap(src, 0, 0, maskPaint);

        return bitmap;
    }
}

XML:

activity_main.xml

<LinearLayout 
    android:id="@+id/mainLayout"
    android:background="#b1a8a8"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/bottomImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/photo" />

</LinearLayout>

, , , .