# ShapeableImageView

{% embed url="<https://developer.android.com/reference/com/google/android/material/imageview/ShapeableImageView>" %}
Fuente: developer.android
{% endembed %}

## DEFINICIÓN

Hereda de:

<figure><img src="https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2FhxtT5UXNQCkuv9ol3eAR%2Fherencia_shapeableiv.png?alt=media&#x26;token=120686f3-81ac-415f-b803-aaeb38561fc6" alt=""><figcaption><p>Herencia ShapeableImageView</p></figcaption></figure>

Una `ImageView` que dibuja el **bitMap** con la forma que se halla definido.

## USO DESDE XML

```xml
<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/siv1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxWidth="150dp"
    android:maxHeight="150dp"
    android:padding="5dp"
    android:src="@drawable/shapeable_image" />
```

&#x20;                                             ![](https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2Fw3VhHi7ubBHHl5nQOOvy%2Fimage.png?alt=media\&token=23ee492b-034a-4dfb-895e-8c8d7f16522f)

## ATRIBUTOS

### app:shapeAppearanceOverlay

Define el estilo de la Imagen.

### app:StrokeColor

Define el color del contorno de la Imagen.

### app:StrokeWidth

Define la anchura del contorno.

## PERSONALIZACIÓN

### styles.xml

La personalización de las imagenes se hace directamente desde el recurso de estilos y quedaría una cosa tal que así:

{% code title="styles.xml" %}

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Circular">
        <item name="cornerSize">50%</item>
    </style>
    <style name="RoundedSquare">
        <item name="cornerSize">10%</item>
    </style>
    <style name="CornerCut">
        <item name="cornerSize">15dp</item>
        <item name="cornerFamily">cut</item>
    </style>
    <style name="DiamondCut">
        <item name="cornerSize">75dp</item>
        <item name="cornerFamily">cut</item>
    </style>
    <style name="SpecificCornerCut">
        <item name="cornerSizeTopRight">75dp</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerSizeBottomLeft">75dp</item>
        <item name="cornerFamilyBottomLeft">cut</item>
    </style>
    <style name="SpecificCornerRounded">
        <item name="cornerSizeTopRight">75dp</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeBottomLeft">75dp</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
    </style>
</resources>
```

{% endcode %}

En este caso tenemos 6 estilos diferentes.

Si vamos al layout XML, podremos aplicar dichos estilos:

{% code title="activity\_main.xml" %}

```xml
<?xml version="1.0" encoding="utf-8"?>

<ScrollView 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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="100dp">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv1"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/Circular"/>

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv2"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/Circular"
            app:strokeColor="#00BCD4"
            app:strokeWidth="5dp"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv3"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/SpecificCornerCut"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv4"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/SpecificCornerRounded"
            app:strokeColor="#00BCD4"
            app:strokeWidth="5dp" />
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv5"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/RoundedSquare"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv6"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/RoundedSquare"
            app:strokeColor="#00BCD4"
            app:strokeWidth="5dp"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv7"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="15dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/CornerCut"/>
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/siv8"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:maxWidth="150dp"
            android:maxHeight="150dp"
            android:padding="5dp"
            android:layout_marginBottom="150dp"
            android:src="@drawable/shapeable_image"
            app:shapeAppearanceOverlay="@style/DiamondCut"/>

    </LinearLayout>
</ScrollView>
```

{% endcode %}

![](https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2F31DycURwnPKs6F4znOem%2Fimage.png?alt=media\&token=32133549-5f00-4bf1-97e3-96a01596f1f3)                               ![](https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2FW08QVcAtfwyabAR7EnC5%2Fimage.png?alt=media\&token=b7c95321-28b8-4a11-9f44-536bb86a82ce)