This is the 6th day of my participation in the August More Text Challenge

Add rounded corners to the View; For example, set the size of the rounded corners to 4dp, and also set the # CCCCCC background color to distinguish

Comparison before and after setting:

  • Set before
  • After setting

1. Set the background property in the XML file

1). First of allres/drawableCreate a new XML file, because it is set to 4DP and has a background color, so I named it asradius_4_bg_cccccc.xml, the code is as follows:


      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ccc" />
    <corners android:radius="4dp" />
</shape>
Copy the code

Shape:

Corners produce rounded corners for shapes. This is applicable only when the shape is rectangular.

Properties:

  • Android: Radius specifies the radius of all angles. The following Angle description will override the corresponding value.
  • Android: Top left corner radius of topLeftRadius.
  • Android :topRightRadius rounded radius in the upper right corner.
  • Android :bottomLeftRadius Rounded radius at the lower left corner.
  • Android: bottomRightRadius lower-right corner radius.

As for what a rounded radius is, look at the following image:

Solid is used to fill the shape with a solid color.

Properties:

  • Android :color The color applied to a shape, expressed as a hexadecimal value or color resource.

The stroke sets the border, which is the border in the front end

Properties:

  • Android :width Specifies the width of the border
  • Android :color Indicates the color of the border
  • Android :dashGap The space between each paragraph
  • Android :dashWidth Specifies the length of each segment

The last two attributes may not be obvious, and you won’t see any difference without setting dashGap, even if you set dashWidth to a large value, but you will see the difference once you set dashGap to a value greater than 1dp, as shown below:

Padding padding

It’s the same padding that we normally set;

Properties:

  • Android: Left Left inside margin
  • Android: Right inside margin to the right
  • Android: Top inside margin
  • Android :bottom Bottom inner margin

Gradient gradients

Properties:

  • Android: Angle gradient Angle, I tested only valid when type is Linear
  • Android :centerX Indicates the x direction of the center of the gradient. The value ranges from 0 to 1.0. Only when type is radial and sweep are valid
  • Android: Y direction of the center of the gradient. The value ranges from 0 to 1.0. Same as above
  • android:startColor
  • android:centerColor
  • Android :endColor gradient color, from start to finish
  • Android :gradientRadius gradientRadius. Only type is set to radial
  • Android: Type Type of the gradient. There are three types: Linear, radial, and sweep
  • Android :useLevel if this property is used asLevelListDrawable, the value is true.

There are three types of specific effects:

Here I just set android:startColor and Android :endColor.

2). Say what values you can set

Take the XML code above:


      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ccc" />
    <corners android:radius="4dp" />
</shape>
Copy the code

Here is the android:color color attribute, in addition to the above way, there are other ways:

  1. # RGB = red green blue
  2. # RRGGBB, ditto
  3. #aarrggbb, where AA stands for transparency
  4. incolors.xmlThe color defined in the<solid android:color="@color/teal_200" />

The android:radius=”4dp” attribute here can also use the value defined in the dimen.xml file, like this:
.

3). How to use the XML file defined above

Locate the View in the layout file as follows:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:padding="50dp"
        android:background="@drawable/reduis_4_bg_ccc" /> <! -- Here is used here -->
Copy the code

2. UseCardViewTo achieve rounded corners

To achieve the same rounded corners as above, just press the following code:

<! -- The key property is cardCornerRadius -->
<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#ccc"
    app:cardCornerRadius="@dimen/test_4dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:padding="50dp" />
</androidx.cardview.widget.CardView>
Copy the code

We found that this approach was also very simple, but nested a layer. Let’s look at what other properties CardView provides:

  • CardCornerRadius Sets the radius of the rounded corner
  • CardBackgroundColor Sets the background color
  • CardElevation sets the Z-axis shadow
  • CardMaxElevation Sets the maximum height of the Z axis
  • CardUseCompatPadding Whether to use CompadPadding. If set to true, there is an inside margin
  • CardPreventCornerOverlap Whether to use PreventCornerOverlap
  • ContentPadding Padding of the content
  • ContentPaddingLeft Left padding
  • ContentPaddingRight Right padding
  • ContentPaddingTop Direction padding
  • ContentPaddingBottom Bottom padding

CardUseCompatPadding and cardPreventCornerOverlap can be understood by referring to this article: App CardView attributes: cardUseCompatPadding and app: cardPreventCornerOverlap; As for the z-axis shadow and maximum height, it is equivalent to having a sun at the top of the screen. The closer the View is to the sun, the more obvious the shadow will be.

Rounded corners

Using the first method, you cannot add rounded corners to the image; You can only use the second option, but I’ve seen a lot online that the second option doesn’t work on some phones, so if you’re running into it, consider another option.

  1. In ConstraintLayout, there is an ImageFilterView that can help with this. I have used it in my project, and there is no incompatible feedback so far, except that ConstraintLayout-v2.0 provides this.
  2. You can use ShapeableImageView, which is also used in our project, and we haven’t found any incompatibilities yet.
  3. CardView is also a good choice.