androidandroid-constraintlayoutmaterial-components-androidrounded-cornerscornerradius

Maximum possible for corner radius of a view in ConstraintLayout


Is there a standard way to set the corner radius of CardView and TextView to the maximum possible value in ConstraintLayout?

Suppose I have two horizontal guidelines H10 (10%) and H24 (24%) and I've created a TextView/CardView from H10 to H24. Now how can one make corners radius of this TextView/CardView to maximum radius possible? (here the max value is (24-10)/2 = 7%)

Once I've set the corner radius of a button of defined height 48dp to 30dp (instead of rational value 24dp) and it became very ugly. So I thought if there is a way to set corner radius automatically to maximum possible value? (in xml not in code)

I've tried to do this by setting background of the view with an appropriate shape but I think it is same as setting corner radius to TextView/CardView directly:

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

    <stroke android:width="1dp"
        android:color="#ff000000"
        />

    <corners 
        android:radius="100dp"/>
</shape>

I usually use the following for TextViews with wrap_content as its height: (I don't want to use wrap_content because I want to use app:autoSizeTextType="uniform" property`)

<com.google.android.material.textfield.TextInputLayout

style="@style/myTextInputLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/passwordInput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="number"
                android:maxLength="10"
                android:paddingVertical="0dp"
                android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>

where

<style name="myTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxCornerRadiusTopStart">24dp</item>
    <item name="boxCornerRadiusBottomStart">24dp</item>
    <item name="boxCornerRadiusBottomEnd">24dp</item>
    <item name="boxCornerRadiusTopEnd">24dp</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="hintAnimationEnabled">true</item>
</style>

Solution

  • I am not sure about all views but the following works like a charm for material components: just set app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full"

    Examle:

    <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCardView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintHeight_percent="0.2"/>
    

    enter image description here