Collage de fotos similar a Twitter Android

Si se desea mostrar imágenes como lo hace twitter en su tweets, soporte de 1 sola foto, dos fotos, 3 fotos y 4 fotos con sus bordes redodeados y que las imágenes se ajusten bien a su contenedor.

Estilos

Conjunto de estilos que se usan respectivamente del collage a usar

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <style name="ShapeAppearance.Rounded" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">@dimen/round_corners</item>
    </style>
    
    <style name="ShapeAppearance.Rounded.Top" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">@dimen/round_corners</item>
        <item name="cornerSizeTopRight">@dimen/round_corners</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.Rounded.Bottom" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomLeft">@dimen/round_corners</item>
        <item name="cornerSizeBottomRight">@dimen/round_corners</item>
    </style>

    <style name="ShapeAppearance.Rounded.Left" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">@dimen/round_corners</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomLeft">@dimen/round_corners</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.Rounded.Right" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">@dimen/round_corners</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">@dimen/round_corners</item>
    </style>

    <style name="ShapeAppearance.Rounded.TopLeft" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">@dimen/round_corners</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.Rounded.TopRight" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">@dimen/round_corners</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.Rounded.BottomLeft" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomLeft">@dimen/round_corners</item>
        <item name="cornerSizeBottomRight">0dp</item>
    </style>

    <style name="ShapeAppearance.Rounded.BottomRight" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">0dp</item>
        <item name="cornerSizeTopRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="cornerSizeBottomRight">@dimen/round_corners</item>
    </style>


</resources>

Collage de una sola imágen

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded"
        app:srcCompat="@drawable/image_sample" />

</androidx.constraintlayout.widget.ConstraintLayout>

Collage de dos imagenes

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="2dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,8:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.Left"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,8:9"
        app:layout_constraintLeft_toRightOf="@+id/view1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view1"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.Right"
        app:srcCompat="@drawable/image_sample" />

</androidx.constraintlayout.widget.ConstraintLayout>

Collage de tres imagenes

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,8:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.Left"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="4dp"
        android:layout_marginEnd="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toRightOf="@+id/view1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view1"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.TopRight"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/view1"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintEnd_toEndOf="@+id/view2"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.BottomRight"
        app:srcCompat="@drawable/image_sample" />

</androidx.constraintlayout.widget.ConstraintLayout>

Collage de cuatro imagenes

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.TopLeft"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="4dp"
        android:layout_marginEnd="8dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toRightOf="@+id/view1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view1"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.TopRight"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/view1"
        app:layout_constraintRight_toLeftOf="@+id/view4"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.BottomLeft"
        app:srcCompat="@drawable/image_sample" />

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toRightOf="@+id/view3"
        app:layout_constraintRight_toRightOf="@+id/view2"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Rounded.BottomRight"
        app:srcCompat="@drawable/image_sample" />

</androidx.constraintlayout.widget.ConstraintLayout>

Deja una respuesta Cancelar la respuesta

Introduce aquí tu comentario...

Introduce tus datos o haz clic en un icono para iniciar sesión:

Correo electrónico (obligatorio) (La dirección no se hará pública)

Nombre (obligatorio)

Web

Estás comentando usando tu cuenta de WordPress.com. ( Salir / Cambiar )

Estás comentando usando tu cuenta de Twitter. ( Salir / Cambiar )

Estás comentando usando tu cuenta de Facebook. ( Salir / Cambiar )

Cancelar

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Estilos

Collage de una sola imágen

Collage de dos imagenes

Collage de tres imagenes

Collage de cuatro imagenes

Comparte:

Me gusta esto:

Relacionado

Publicado por Codelaby

Deja una respuesta Cancelar la respuesta