Как сделать круглый imageview

ShapeableImageView — Material components for android

Как сделать круглый imageview

By using ShapeableImageView, you can change the shape of your image to circle, diamond, etc. Also, you can set corner radius to your imageview. You can do much more by using this ShapeableImageView with minimal code.

To work with ShapeableImageView in your android project, you need to add dependency material design 1.2.0 or higher.

Sliders — Material Components also introduced in material design 1.2.0.

Important attributes of ShapeableImageView

app:shapeAppearanceOverlay — This is working as a ThemeOverlay. ShapeAppearanceOverlay apply the defined changes without affecting the active theme.

The key to the overlay behavior is the empty parent attribute. This is what causes the overlay behavior. Lets create imageview in different shapes.

In the above style, cornerSize only affected by the overlay. remaining properties same as active theme.

cornerFamily — corner family to be used for all four corners

cornerFamilyTopLeft — corner family to be used for the top left corner

cornerFamilyTopRight — corner family to be used for the top right corner

cornerFamilyBottomRight — corner family to be used for the bottom right corner

cornerFamilyBottomLeft — corner family to be used for the bottom left corner

cornerFamily is a enum type and the supported values are rounded, cut.

cornerSize — corner size to be used for all four corners

cornerSizeTopLeft — corner size to be used for the top left corner

cornerSizeTopRight — corner size to be used for the top right corner

cornerSizeBottomRight — corner size to be used for the bottom right corner

cornerSizeBottomLeft — corner size to be used for the bottom left corner

Imageview in circle shape

Как сделать круглый imageview

as mentioned above, first we need to set the app:shapeAppearanceOverlay. In the overlay we need to mention the corner radius size to 50% to make the imageview as circle.

In your style.xml add,

If you want to add stroke to circle imageview, you can add stroke attributes in your ShapeableImageView.

Как сделать круглый imageview

Dynamically using Kotlin

set the corner radius in dimens.xml

Corner Radius Imageview

Как сделать круглый imageview

we need to set the app:shapeAppearanceOverlay. In the overlay we need to mention the corner radius size to 10% to set the corner radius.

In your style.xml add,

same way, If you want to add stroke to corner radius imageview, you can add stroke attributes in your ShapeableImageView.

Как сделать круглый imageview

Dynamically using Kotlin

set the corner radius in dimens.xml

Corner cut imageview

Как сделать круглый imageview

For the corner cut imageview, we are going to use cornerFamily attribute.

by default, cornerFamily will be rounded. In our case, we need it to be cut. So we are changes cornerFamily to cut.

By changing the cornerSize, we can make different shapes like diamond, hexagon, etc.

Dynamically using Kotlin

setAllCorners() used to set both cornerFamily and cornerRadius.

Selected Corner Radius / Cut imageview

Как сделать круглый imageview

To set corner radius for the selected position, we need to use both cornerSize and cornerFamily for the particular position.

For example, check the below example to set the corner radius for the right top position of the imageview.

for the cut corner radius in style.xml :

same way for the multiple corners, we need to add cornerRadius and cornerFamily.

Как сделать круглый imageview

Dynamically using Kotlin

Thanks for reading.

You can download the example in github.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *