View with round corners not smooth

Achieving Smooth Rounded Corners in Android Views

Learn how to overcome common issues with jagged or pixelated rounded corners in Android views using ShapeDrawables, CardView, and custom drawing techniques.

Creating visually appealing user interfaces in Android often involves using rounded corners for various UI elements. However, developers frequently encounter issues where these rounded corners appear jagged, pixelated, or simply not as smooth as desired. This article delves into the common causes of this problem and provides robust solutions using Android's built-in drawing capabilities and modern UI components.

Understanding the Problem: Why Corners Appear Jagged

The primary reason for jagged rounded corners often stems from how Android renders shapes and views. When a view's background is set using a simple color or a bitmap that doesn't account for anti-aliasing at the edges, or when clipping mechanisms are not perfectly aligned with the rendering pipeline, pixelation can occur. This is especially noticeable on high-density screens or when the corner radius is small. The Android rendering system needs explicit instructions or components that handle anti-aliasing to produce smooth curves.

flowchart TD
    A[View with Rounded Corners] --> B{Rendering Method?}
    B -->|Simple Color/Bitmap| C[No Anti-aliasing]
    C --> D[Jagged Corners]
    B -->|ShapeDrawable/CardView/Custom Draw| E[Anti-aliasing Applied]
    E --> F[Smooth Corners]

Flowchart illustrating how different rendering methods affect corner smoothness.

Solution 1: Leveraging ShapeDrawables for Custom Backgrounds

ShapeDrawables are a powerful and flexible way to define custom shapes, including rectangles with rounded corners, directly in XML. They inherently support anti-aliasing, making them an excellent choice for smooth corners. By defining a <shape> drawable with a <corners> tag, you can specify the radius for each corner. This drawable can then be set as the background of any View.

<!-- res/drawable/rounded_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FF6200EE" />
    <corners android:radius="16dp" />
</shape>

Example of a ShapeDrawable for a view with 16dp rounded corners.

<!-- In your layout XML -->
<View
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/rounded_background" />

Applying the ShapeDrawable as a background to a View.

Solution 2: Using CardView for Consistent Rounded Rectangles

For scenarios where you need a card-like appearance with elevation and rounded corners, CardView is the go-to component. It's part of the AndroidX Material Components library and handles rounded corners and shadows beautifully, ensuring smooth rendering across different Android versions and devices. CardView automatically clips its content to its rounded corners and applies anti-aliasing.

<!-- In your build.gradle (Module: app) -->
implementation 'com.google.android.material:material:1.x.x' <!-- Use the latest version -->

Adding the Material Components dependency to your project.

<!-- In your layout XML -->
<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="16dp"
    app:cardElevation="4dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Content inside a MaterialCardView with smooth rounded corners."
        android:textColor="@android:color/black" />

</com.google.android.material.card.MaterialCardView>

Implementing a MaterialCardView with a specified corner radius.