Home > OS >  Why does my XML element not have rounded corners?
Why does my XML element not have rounded corners?

Time:12-16

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"
                    app:layout_constraintBottom_toBottomOf="@ id/product_img_test2"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@ id/product_img_test2" />**


               
                <ImageButton
                    android:id="@ id/product_img_test"
                    android:layout_width="94dp"
                    android:layout_height="91dp"
                    android:layout_marginTop="20dp"
                    android:contentDescription="@string/product_desc_test"
                    android:visibility="invisible"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.139"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    app:srcCompat="@drawable/strongbow"
                    tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />

                <Button
                    android:id="@ id/product_btn_test"
                    android:layout_width="220dp"
                    android:layout_height="50dp"
                    android:background="#00FFFFFF"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    app:layout_constraintBottom_toBottomOf="@ id/product_img_test"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.1"
                    app:layout_constraintStart_toEndOf="@ id/product_img_test"
                    app:layout_constraintTop_toTopOf="@ id/product_img_test"
                    tools:ignore="DuplicateSpeakableTextCheck,SpeakableTextPresentCheck" />

                <Button
                    android:id="@ id/product_btn_test2"
                    android:layout_width="220dp"
                    android:layout_height="50dp"
                    android:background="#00FFFFFF"
                    android:textAllCaps="false"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    app:layout_constraintBottom_toBottomOf="@ id/product_img_test2"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.1"
                    app:layout_constraintStart_toEndOf="@ id/product_img_test"
                    app:layout_constraintTop_toTopOf="@ id/product_img_test2"
                    tools:ignore="SpeakableTextPresentCheck" />

                <ImageButton
                    android:id="@ id/product_img_test2"
                    android:layout_width="94dp"
                    android:layout_height="91dp"
                    android:layout_marginTop="20dp"
                    android:contentDescription="@string/product_desc_test"
                    android:visibility="invisible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.141"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@ id/product_img_test"
                    app:srcCompat="@drawable/strongbow"
                    tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />



            </androidx.constraintlayout.widget.ConstraintLayout>
        </LinearLayout>
    </ScrollView>

    <TextView
        android:id="@ id/hor_line"
        android:layout_width="0dp"
        android:layout_height="4dp"
        android:layout_marginBottom="100dp"
        android:background="#C4C4C4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@ id/ver_line"
        android:layout_width="2dp"
        android:layout_height="0dp"
        android:background="#E3E6DA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@ id/hor_line" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@ id/imvCircularWithStroke"
        android:layout_width="86dp"
        android:layout_height="86dp"
        android:layout_marginBottom="56dp"
        android:background="#44A6D0"
        android:elevation="7dp"
        android:padding="0dp"
        app:layout_constraintBottom_toBottomOf="@ id/ver_line"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearanceOverlay="@style/Circular"
        app:strokeColor="#D0EAE6"
        app:strokeWidth="2dp"
        tools:ignore="ImageContrastCheck" />

    <ImageButton
        android:id="@ id/barcode_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="76dp"
        android:background="#0044A6D0"
        android:contentDescription="@string/barcode_icon_desc"
        android:elevation="7dp"
        app:layout_constraintBottom_toBottomOf="@ id/ver_line"
        app:layout_constraintEnd_toEndOf="@ id/hor_line"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="@ id/hor_line"
        app:srcCompat="@drawable/barcode_icon"
        tools:ignore="ImageContrastCheck"
        app:tint="#FFFFFF" />

    <ImageButton
        android:id="@ id/search_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:background="#00FFFFFF"
        android:contentDescription="@string/search_icon_desc"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.181"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/search_icon" />

    <TextView
        android:id="@ id/search_btn_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:text="@string/search_btn"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@ id/search_btn"
        app:layout_constraintStart_toStartOf="@ id/search_btn"
        app:layout_constraintTop_toBottomOf="@ id/search_btn"
        app:layout_constraintVertical_bias="0.0" />

    <ImageButton
        android:id="@ id/calendar_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:background="#00FFFFFF"
        android:contentDescription="@string/calendar_icon_desc"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.742"
        app:layout_constraintStart_toEndOf="@ id/search_btn"
        app:srcCompat="@drawable/calendar_icon" />

    <TextView
        android:id="@ id/calendar_btn_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:text="@string/calendar_btn"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@ id/calendar_btn"
        app:layout_constraintStart_toStartOf="@ id/calendar_btn" />

</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response:

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" />
  • Related