Search code examples
androidxmlandroid-layout

Why does my XML element not have rounded corners?


I am trying to create a rectangle with rounded corners to be the background of two elements in my XML. I have created a TextView for this background called prod1_bg and set its cornerRadius to 10dp.

Why don't the prodX_bg rectangles have rounded corners even though I specified a cornerRadius of 10dp?

XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SearchResultsScreen">

    <ScrollView
        android:layout_width="407dp"
        android:layout_height="422dp"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/search_results"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/searchbar">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/inner_constraint"
                android:layout_width="match_parent"
                android:layout_height="1100dp">

                **<TextView
                    android:id="@+id/prod1_bg"
                    android:layout_width="350dp"
                    android:layout_height="100dp"
                    android:background="#4A8BC34A"
                    android:visibility="invisible"
                    app:cornerRadius="10dp"
                    app:layout_constraintBottom_toBottomOf="@+id/product_img_test"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/product_img_test" />
                <TextView
                    android:id="@+id/prod2_bg"
                    android:layout_width="350dp"
                    android:layout_height="100dp"
                    android:background="#4A8BC34A"
                    android:visibility="invisible"
                    app:cornerRadius="10dp"
                    
</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • IIRC, in order to use the cornerRadius attribute directly in layout file, the minimum API level for your app must be 31+ (which means it will only support devices with Android 12 and above).

    You can also use some View/Layout that already support a rounded corners like CardView (will need to update Gradle dependencies).

    Or you can just simply create a drawable XML file with rectangle shape (and having corners' radiuses). Then set that drawable as your TextView's background.

    Sample drawable named rounded_corners_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
            <corners android:radius="5dp" /> <!-- corner radius -->
            <solid android:color="#ffffff" /> <!-- inner background colour -->
            <stroke android:color="#000000" /> <!-- border colour -->
    </shape>
    

    There are other attributes as well such as <gradient>, <padding>, ...

    Then, in your <TextView>:

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners_background" />