How to make an ImageView with rounded corners?

📸 How to Make an ImageView with Rounded Corners in Android 🌈

Are you tired of the same old rectangular image views in your Android app? Want to add some pizzazz to your UI by using rounded corners in your image views? 🤔 Fear not! In this guide, we'll explore different ways to achieve this effect and make your images stand out. Let's dive in! 🏊‍♀️

⚙️ Traditional Approach Using Bitmaps

The traditional way to achieve rounded corners in an ImageView is by using a Bitmap. By clipping off the corners of the Bitmap, we can create a rounded rectangle effect. Here's how you can do it: 🎨

1. Get an instance of your desired bitmap using BitmapFactory or any other method you prefer. 🖼️

2. Create a new Canvas object and pass your bitmap to it. 🖌️

3. Create a Path object and use its addRoundRect method to define the rounded rectangle shape. Specify the corner radii you desire. 👌

4. Create a new Paint object and set the Xfermode to PorterDuff.Mode.SRC_IN to apply the clipping effect. 🖌️

5. Finally, use the drawPath method of the canvas object to draw your rounded rectangle path onto the canvas. 🎨

Phew! That was a lot. But worry not, here's an example code snippet to help you visualize the process: 📝

Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
Bitmap roundedBitmap = Bitmap.createBitmap(originalBitmap.getWidth(), originalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(roundedBitmap);

Path path = new Path();
float radius = 50.0f; // Adjust the corner radius as per your preference
path.addRoundRect(new RectF(0, 0, originalBitmap.getWidth(), originalBitmap.getHeight()), radius, radius, Path.Direction.CW);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawPath(path, paint);

imageView.setImageBitmap(roundedBitmap);

📲 ShapeableImageView: The Modern Way

But wait! Before you dive headfirst into the traditional approach, let me introduce you to a much simpler and modern solution - ShapeableImageView. 🆕

Starting from 2021 onwards, Google introduced the ShapeableImageView, which makes it super easy to create rounded corners or any other custom shape for your ImageViews. No need to dive into the nitty-gritty of Bitmap manipulation anymore! 🎉

Here's how you can use ShapeableImageView to achieve the rounded corner effect: 🎨

1. Firstly, make sure your project has the required dependencies. In your app-level build.gradle file, add the following line:

implementation 'com.google.android.material:material:1.2.1'

1. In your layout XML file, replace your existing ImageView tag with com.google.android.material.imageview.ShapeableImageView. 🖥️

2. Update your ShapeableImageView with desired attributes. Set app:shapeAppearanceOverlay to define the shape appearance, and use shapeAppearanceModel to further customize it programatically if needed. 👇

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shapeAppearanceOverlay="@style/RoundedImageView"
/>

1. Define a style for your ShapeAppearanceOverlay in your styles.xml file:

<style name="RoundedImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item> <!-- Adjust the corner radius as per your preference -->
</style>

Voila! 💫 With just a few lines of code and utilizing the power of ShapeableImageView, you can easily create rounded corner image views without going through the hassle of manually manipulating Bitmaps.

📣 Time to Level Up Your UI Game!

Now that you know how to make an ImageView with rounded corners in Android, it's time to upgrade your UI and give your app a fresh new look. Experiment with different corner radii and see what fits best with your design. 🎨

Feel free to share your creations with us in the comments below or on social media using the hashtag #RoundedImageViewsRock. We can't wait to see the awesome UI transformations you'll create! 🚀

Happy coding! 🤓💻