Imitación del componente Update pendig de Google Play

Imitación del comonente que sale en la pantalla de actualizaciones de aplicaciones en la app Google play, con su desplegable para ver la novedades

Dependencias

Se usa el componente expansionPanel de florent37

allprojects {
    repositories {
        ...
        maven { url "http://jitpack.io/" }
    }
}

implementation 'com.github.florent37:expansionpanel:1.2.2'

Layout

<?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="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/appLogo"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="16dp"
            app:layout_constraintBottom_toBottomOf="@+id/expansionHeader"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/tvTitle"
            app:srcCompat="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:text="Application name"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
            app:layout_constraintEnd_toStartOf="@+id/btnAction"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnAction"
            style="@style/AppTheme.IconOnlyButton"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_marginEnd="16dp"
            app:icon="@drawable/ic_settings_black_24dp"
            app:layout_constraintBottom_toBottomOf="@+id/expansionHeader"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/tvTitle" />

        <com.github.florent37.expansionpanel.ExpansionHeader
            android:id="@+id/expansionHeader"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            app:expansion_headerIndicator="@id/headerIndicator"
            app:expansion_layout="@id/expansionLayout"
            app:expansion_toggleOnClick="true"
            app:layout_constraintEnd_toEndOf="@+id/tvTitle"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvTitle">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/tvSummary"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:text="4.0 MB"
                    android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                    android:textColor="?android:textColorSecondary" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/headerIndicator"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="16dp"
                    android:adjustViewBounds="true"
                    app:srcCompat="@drawable/ic_expansion_header_indicator_grey_24dp" />
            </RelativeLayout>
        </com.github.florent37.expansionpanel.ExpansionHeader>


        <com.github.florent37.expansionpanel.ExpansionLayout
            android:id="@+id/expansionLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="24dp"
            app:expansion_expanded="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/expansionHeader">

            <LinearLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#00FF00"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:gravity="center"
                    android:text="WHATS'S THE NEW\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent est nulla, tincidunt at risus lobortis, molestie vehicula sapien. Fusce convallis vestibulum metus imperdiet elementum." />

            </LinearLayout>

        </com.github.florent37.expansionpanel.ExpansionLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Identificadores:

appLogo ImageView: Logo de la aplicación
btnAction MaterialButton: Botón de la acción icono de la derecha
tvTitle TextView: Nombre de la aplicación
tvSummary TextView: Sumario de la aplicación
dentro de ExpansionLayout hay otro TextView donde se pondrá las novedades

Estilos

Estilo necesario para crear un botón con contorno y que solo contenga un icono, añadir en styles.xml

<style name="AppTheme.IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="android:minWidth">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconGravity">textStart</item>
    <item name="iconPadding">0dp</item>
    <item name="iconTint">?colorControlNormal</item>
    <item name="rippleColor">?colorAccent</item>
</style>

Anuncio publicitario