Android Notes | ShapeableImageView

With the growth of age, the heart more and more feel the importance of home.

preface

Some time ago, I saw Google push an update about Material Design to 1.2.0, which has an update of ImageView feel quite interesting, this time just by the opportunity of General Reconstruction of han to combat a wave ~

Welcome to pat brick ~

Making address:

• Github.com/HLQ-Struggl…

Final effect:

Attach the corresponding dependencies:

Properties in

CornerSize:

• CornerSizeTopLeft/cornerSizeTopRight/cornerSizeBottomRight: left, right, up, down radian

CornerFamily:

• CornerFamilyTopLeft/cornerFamilyTopRight/cornerFamilyBottomRight/cornerFamilyBottomLeft: style

Shortcomings, welcome to communicate and learn ~

ShapeableImageView make up

This ImageView provides a more concise way to use Shape.

Introducing a dependency:

Implementation 'com. Google. Android. Material: material: 1.2.0'Copy the code

1. Rounded corners

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_round"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/roundedCornerStyle" />
Copy the code

The corresponding style:

<! <style name="roundedCornerStyle"> <item name="cornerFamily">rounded</item> <item name="cornerSize">8dp</item> </style>Copy the code

The Nuggets suggested that they could also add a color, border, and purposely try a wave:

• app:strokeColor
• app:strokeWidth

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_round"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:strokeColor="#ff9023"
        app:strokeWidth="20dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/roundedCornerStyle" />
Copy the code

Display effect:

Thanks to minganming and Knight Kangkang

2. Circular picture

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_circle"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/circleStyle" />
Copy the code

The corresponding style:

<! Rounded </item> <item name="cornerSize">50%</item> </style>Copy the code

3. Picture of corner cutting

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_cut"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/cutCornerStyle" />
Copy the code

The corresponding style:

<! --> <style name="cutCornerStyle"> <item name="cornerFamily">cut</item> <item name="cornerSize">12dp</item> </style>Copy the code

4. Diamond picture

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_diamond"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/diamondStyle" />
Copy the code

The corresponding style:

<! --> <style name="diamondStyle"> <item name="cornerFamily">cut</item> <item name="cornerSize">50%</item> </style>Copy the code

5. Rounded corner in the upper right corner

   <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_top_right"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/topRightCornerStyle" />
Copy the code

The corresponding style:

<! <style name="topRightCornerStyle"> <item name="cornerFamilyTopRight">rounded</item> <item name="cornerSizeTopRight">50dp</item> </style>Copy the code

6. Egg picture

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_egg"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/eggStyle" />
Copy the code

The corresponding style:

<! Rounded </item> <item name="cornerFamilyTopRight">rounded</item> <item name="cornerSizeTopRight">50dp</item> <item name="cornerSizeTopLeft">50dp</item> <item name="cornerFamilyTopLeft">rounded</item> </style>Copy the code

7. Combine radian pictures

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_com_corner"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/comCornerStyle" />
Copy the code

The corresponding style:

<! <style name="comCornerStyle"> <item name="cornerFamily">rounded</item> <item name="cornerSizeTopRight">50%</item> <item name="cornerSizeBottomLeft">50%</item> </style>Copy the code

8. Small Tips

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_tip"
        android:layout_width="100dp"
        android:layout_height="30dp" 
        android:scaleType="centerCrop"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/tipsCornerStyle" />
Copy the code

The corresponding style:

<! >rounded</item> <item name="cornerFamilyTopLeft" name="cornerSizeTopLeft">50%</item> <item name="cornerFamilyBottomLeft">rounded</item> <item name="cornerSizeBottomLeft">50%</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerSizeTopRight">50%</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSizeBottomRight">50%</item> </style>Copy the code

Content – through the source code knowledge

The R file allows you to view the properties of the ShapeableImageView:

<declare-styleable name="ShapeAppearance"> <! -- Corner size to be used in the ShapeAppearance. All corners default to this value --> <attr format="dimension|fraction" name="cornerSize"/> <! -- Top left corner size to be used in the ShapeAppearance. --> <attr format="dimension|fraction" name="cornerSizeTopLeft"/> <! -- Top right corner size to be used in the ShapeAppearance. --> <attr format="dimension|fraction" name="cornerSizeTopRight"/> <! -- Bottom right corner size to be used in the ShapeAppearance. --> <attr format="dimension|fraction" name="cornerSizeBottomRight"/> <! -- Bottom left corner size to be used in the ShapeAppearance. --> <attr format="dimension|fraction" name="cornerSizeBottomLeft"/> <! -- Corner family to be used in the ShapeAppearance. All corners default to this value --> <attr format="enum" name="cornerFamily"> <enum name="rounded" value="0"/> <enum name="cut" value="1"/> </attr> <! -- Top left corner family to be used in the ShapeAppearance. --> <attr format="enum" name="cornerFamilyTopLeft"> <enum name="rounded" value="0"/> <enum name="cut" value="1"/> </attr> <! -- Top right corner family to be used in the ShapeAppearance. --> <attr format="enum" name="cornerFamilyTopRight"> <enum  name="rounded" value="0"/> <enum name="cut" value="1"/> </attr> <! -- Bottom right corner family to be used in the ShapeAppearance. --> <attr format="enum" name="cornerFamilyBottomRight">  <enum name="rounded" value="0"/> <enum name="cut" value="1"/> </attr> <! -- Bottom left corner family to be used in the ShapeAppearance. --> <attr format="enum" name="cornerFamilyBottomLeft"> <enum name="rounded" value="0"/> <enum name="cut" value="1"/> </attr> </declare-styleable> <declare-styleable name="ShapeableImageView"> <attr name="strokeWidth"/> <attr name="strokeColor"/> <! -- Shape appearance style reference for ShapeableImageView. Attribute declaration is in the shape package. --> <attr name="shapeAppearance"/> <! -- Shape appearance overlay style reference for ShapeableImageView. To be used to augment attributes declared in the shapeAppearance. Attribute declaration is in the shape package. --> <attr name="shapeAppearanceOverlay"/> </declare-styleable>Copy the code

Google’s comments are clear, so refer to Google Translate and practice for a preliminary understanding.

Then get the styles provided by the current version by continuing to view the source code, for example:

    @IntDef({CornerFamily.ROUNDED, CornerFamily.CUT})
    @Retention(RetentionPolicy.SOURCE)
    public @interface CornerFamily {
      /** Corresponds to a {@link RoundedCornerTreatment}. */
      int ROUNDED = 0;
      /** Corresponds to a {@link CutCornerTreatment}. */
      int CUT = 1;
    }
Copy the code

Finally, also find the corresponding upper right, lower left acquisition method:

Welcome big guy to provide better way ~

The resources

• ShapeableImageView
• Material Components for Android 1.2.0 is now available
• About shape
• Shape Theming