Material Transitions conexión del item de la lista con la vista de detalle

Clase 47 de 58 • Curso de Kotlin para Android 2017

Adrian Ponce

student•

En que momento del video le asignaste la imagen a imgHeaderDetail con Kotlin? ya que envías los extras para los textos y los asignas a sus controles correspondientes pero con el ImageView no haces nada…

En el minuto 4:52 haces mención que si no envías la información a través del intent no vas a mostrar nada ya que se utilizo el tools para el contenido de los controles.

Kevin Meléndez Hernández

student•

Listo! botón agregado

Rubian Alonso Llanos Aguirre

student•

Esta clase si me pareció genial, solo que con la versión actual de android hay algunos inconvenientes de versión para el manejo de transiciones, sin embargo nada que no se pueda solucionar con un Alt + Enter.

JOSE ADRIAN TEZOYOTL MORALES

student•

flutter se puede combinar con java o kotlin?

Diego Forero

Team Platzi•

Si usas Flutter vas a usar Dart en lugar de lenguajes como Java o Kotlin, sin embargo si necesitas hacer cosas muy complicadas es posible que sea mejor hacer algunas partes de tu app con código nativo ya sea usando Java o Kotlin en el caso de Android y swift u objectiveC en el caso de iOS

Usuario anónimo

user•

Por eso es importante tener nociones de código nativo para Android e iOS.

José Luis Cobián Hermosillo

student•

¿Es posible hacer la llamada a la actividad de detalles con Anko?, como se haria para pasarle el Bundle y los extras

José Ramón Velázquez Mandujano

student•

Alguien me ayuda ?

Diego Forero

Team Platzi•

Qué error te sale, que no encuentra la clase o cual es el error?

José Ramón Velázquez Mandujano

student•

Que no puedo asignar ese valor al options como lo muestra en el video , tuve que cambiar los : por un = pero la app se rompe…

Jhon Henry Jimenez Castro

student•

Pueden ayudarme a solucionar este problema visual desaparece el detalle largo al llegar a top
pd: me serviria tambien si integro un toolbar

<<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:fitsSystemWindows="true"
        tools:context=".DetailActivity">

    <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarDetail"
            android:layout_width="match_parent"
            android:layout_height="@dimen/appbar_height"
            android:fitsSystemWindows="true">

        <android.support.design.widget.CoordinatorLayout
                android:id="@+id/collDetail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="exitUntilCollapsed|scroll"
                app:contentScrim="@color/colorAccent">

            <ImageView
                    android:id="@+id/imgHeaderDetail"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:src="@drawable/plato"
                    app:layout_collapseMode="parallax"
                    android:transitionName="transitionHeader"
                    android:scaleType="centerCrop"/>

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbarDetail"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CoordinatorLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:behavior_overlapTop="50dp">
        <include layout="@layout/content_desc"/>


    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Sebastian Tellez

teacher•

Hola! no entiendo muy bien tu problema, que es lo que desaparece??

Juan Guillermo Perez Cardozo

student•

tremenda transicion , la verdad no tenia idea de como hacerlo.

Edwin Rafael Pimienta Calderon

student•

Alguien sabe como solucionar estos errores me salen al ejecutar T: error: attribute contenScrim (aka es.edwinpimienta.pimistore:contenScrim) not found. y me pasa lo mismo con estos dos : AAPT: error: attribute behavior_overlaptop (aka es.edwinpimienta.pimistore:behavior_overlaptop) not found. AAPT: error: attribute behavior_overlaptop (aka es.edwinpimienta.pimistore:behavior_overlaptop) not found.

Luis Jorge Pablo Sartillo

student•

Excelente ejemplo

pablo calderon

student•

No me muestra la transición de la imagen… que puede ser

Sebastian Tellez

teacher•

Puedes mostrarnos tu código para ver si hay algún problema? 😃

pablo calderon

student•

en el adpaterLandig tengo esto:

class AdapterLanding(val data:List<ItemLnading>):RecyclerView.Adapter<AdapterLanding.Holder>() {

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder =
        Holder(parent?.inflate(R.layout.item_landing))

override fun onBindViewHolder(holder: Holder, position: Int) {
    holder?.bindView(data[position])
}

override fun getItemCount(): Int = data.size

class Holder(itemView: View?): RecyclerView.ViewHolder(itemView){
    fun bindView(itemLnading: ItemLnading){
        with(itemLnading){
            itemView.txtTitleItem.text= title
            itemView.txtDescItem.text = desc
            itemView.txtPriceItem.text = "${String.format("%.2f",price)}"

            itemView.setOnClickListener{
                val intent = Intent(itemView.context,DetailActivity::class.java)
                intent.putExtra("title",title)
                intent.putExtra("desc",desc)
                intent.putExtra("price",price)

                val p1:Pair<View,String> = Pair.create(itemView.imgItemHeader,"transitionHeader")
                val p2:Pair<View,String> = Pair.create(itemView.txtTitleItem,"transitionTitle")
                val p3:Pair<View,String> = Pair.create(itemView.txtDescItem,"transitionDesc")
                val p4:Pair<View,String> = Pair.create(itemView.txtPriceItem,"transitionPrice")
                val options:ActivityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(itemView.context as Activity,p1,p2,p3,p4)
                itemView.context.startActivity(intent,options.toBundle())
            }
        }
    }
}

en el item_landing html tengo esto:

Roberto Barrientos

student•

me da este error…

Diego Forero

Team Platzi•

Revisa que estés importando la versión correcta de Pair mira el video en este punto https://platzi.com/clases/kotlin/concepto/android-kotlin/material-transitions-conexion-del-item-de-la-lista/material/?time=489

Darwin Alvarez

student•

Hola, por favor alguien me podría ayudar con este problema?
estoy seguro que tiene que ver con las transiciones, aunque al principio me funcionaron las animaciones, no sé como arreglarlo!

05-11 23:06:58.003 7006-7401/com.darwinalvarez.bigstore W/OpenGLRenderer: Layer exceeds max. dimensions supported by the GPU (656x4855, max=4096x4096)
05-11 23:06:58.003 7006-7401/com.darwinalvarez.bigstore D/OpenGLRenderer: Current memory usage / total memory usage (bytes):
TextureCache 23310848 / 25165824
LayerCache 0 / 16777216 (numLayers = 0)
Layer size 768x512; isTextureLayer()=0; texid=4 fbo=1; refs=2
Layers total 1572864 (numLayers = 1)
RenderBufferCache 0 / 2097152
GradientCache 0 / 524288
PathCache 0 / 4194304
TessellationCache 1488 / 1048576
TextDropShadowCache 0 / 2097152
PatchCache 0 / 131072
FontRenderer 0 A8 524288 / 524288
FontRenderer 0 RGBA 0 / 0
FontRenderer 0 total 524288 / 524288
Other:
FboCache 0 / 0
Total memory usage:
25409488 bytes, 24.23 MB
05-11 23:06:58.083 7006-7006/com.darwinalvarez.bigstore A/art: art/runtime/java_vm_ext.cc:410] JNI DETECTED ERROR IN APPLICATION: JNI CallObjectMethod called with pending exception java.lang.IllegalStateException: Unable to create layer for CardView
art/runtime/java_vm_ext.cc:410] at void android.os.MessageQueue.nativePollOnce(long, int) (MessageQueue.java:-2)
art/runtime/java_vm_ext.cc:410] at android.os.Message android.os.MessageQueue.next() (MessageQueue.java:323)
art/runtime/java_vm_ext.cc:410] at void android.os.Looper.loop() (Looper.java:135)
art/runtime/java_vm_ext.cc:410] at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:7331)
art/runtime/java_vm_ext.cc:410] at java.lang.Object java.lang.reflect.Method.invoke!(java.lang.Object, java.lang.Object[]) (Method.java:-2)
art/runtime/java_vm_ext.cc:410] at void com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run() (ZygoteInit.java:1230)
art/runtime/java_vm_ext.cc:410] at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:1120)
art/runtime/java_vm_ext.cc:410]
art/runtime/java_vm_ext.cc:410] in call to CallObjectMethod
art/runtime/java_vm_ext.cc:410] from void android.os.MessageQueue.nativePollOnce(long, int)
art/runtime/java_vm_ext.cc:410] “main” prio=5 tid=1 Runnable
art/runtime/java_vm_ext.cc:410] | group=“main” sCount=0 dsCount=0 obj=0x75960598 self=0xb4724500
art/runtime/java_vm_ext.cc:410] | sysTid=7006 nice=-11 cgrp=default sched=0/0 handle=0xb6f11b3c
art/runtime/java_vm_ext.cc:410] | state=R schedstat=( 0 0 0 ) utm=182 stm=66 core=0 HZ=100
art/runtime/java_vm_ext.cc:410] | stack=0xbe72f000-0xbe731000 stackSize=8MB
art/runtime/java_vm_ext.cc:410] | held mutexes= “mutator lock”(shared held)
art/runtime/java_vm_ext.cc:410] native: #00 pc 0037161f /system/lib/libart.so (_ZN3art15DumpNativeStackERNSt3__113basic_ostreamIcNS0_11char_traitsIcEEEEiP12BacktraceMapPKcPNS_9ArtMethodEPv+142)
art/runtime/java_vm_ext.cc:410] native: #01 pc 00350c55 /system/lib/libart.so (_ZNK3art6Thread4DumpERNSt3__113basic_ostreamIcNS1_11char_traitsIcEEEEP12BacktraceMap+160)
art/runtime/java_vm_ext.cc:410] native: #02 pc 0025afbb /system/lib/libart.so (ZN3art9JavaVMExt8JniAbortEPKcS2+742)
art/runtime/java_vm_ext.cc:410] native: #03 pc 0025b695 /system/lib/libart.so (_ZN3art9JavaVMExt9JniAbortVEPKcS2_St9__va_list+64)
art/runtime/java_vm_ext.cc:410] native: #04 pc 000fd071 /system/lib/libart.so (_ZN3art11ScopedCheck6AbortFEPKcz+32)
art/runtime/java_vm_ext.cc:410] native: #05 pc 00102185 /system/lib/libart.so (_ZN3art11ScopedCheck5CheckERNS_18ScopedObjectAccessEbPKcPNS_12JniValueTypeE.constprop.95+5072)
art/runtime/java_vm_ext.cc:410] native: #06 pc 00110a13 /system/lib/libart.so (_ZN3art8CheckJNI11CallMethodVEPKcP7_JNIEnvP8_jobjectP7_jclassP10_jmethodIDSt9__va_listNS_9Primitive4TypeENS_10InvokeTypeE+534)
art/runtime/java_vm_ext.cc:410] native: #07 pc 00112391 /system/lib/libart.so (_ZN3art8CheckJNI16CallObjectMethodEP7_JNIEnvP8_jobjectP10_jmethodIDz+48)
art/runtime/java_vm_ext.cc:410] native: #08 pc 00002bbb /system/lib/libnativehelper.so (jniGetReferent+94)
art/runtime/java_vm_ext.cc:410] native: #09 pc 000797cb /system/lib/libandroid_runtime.so (_ZN7android26NativeDisplayEventReceiver13dispatchVsyncExij+26)
art/runtime/java_vm_ext.cc:410] native: #10 pc 000799ed /system/lib/libandroid_runtime.so (_ZN7android26NativeDisplayEventReceiver11handleEventEiiPv+80)
art/runtime/java_vm_ext.cc:410] native: #11 pc 00012e93 /system/lib/libutils.so (_ZN7android6Looper9pollInnerEi+530)
art/runtime/java_vm_ext.cc:410] native: #12 pc 00012f63 /system/lib/libutils.so (_ZN7android6Looper8pollOnceEiPiS1_PPv+130)
art/runtime/java_vm_ext.cc:410] native: #13 pc 00085e71 /system/lib/libandroid_runtime.so (_ZN7android18NativeMessageQueue8pollOnceEP7_JNIEnvP8_jobjecti+22)
art/runtime/java_vm_ext.cc:410] native: #14 pc 00000575 /system/framework/arm/boot.oat (Java_android_os_MessageQueue_nativePollOnce__JI+96)
art/runtime/java_vm_ext.cc:410] at android.os.MessageQueue.nativePollOnce(Native method)
art/runtime/java_vm_ext.cc:410] at android.os.MessageQueue.next(MessageQueue.java:323)
art/runtime/java_vm_ext.cc:410] at android.os.Looper.loop(Looper.java:135)
art/runtime/java_vm_ext.cc:410] at android.app.ActivityThread.main(ActivityThread.java:7331)
art/runtime/java_vm_ext.cc:410] at java.lang.reflect.Method.invoke!(Native method)
art/runtime/java_vm_ext.cc:410] at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
art/runtime/java_vm_ext.cc:410] at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
art/runtime/java_vm_ext.cc:410]
art/runtime/runtime.cc:368] Runtime aborting…
art/runtime/runtime.cc:368]
05-11 23:06:58.083 7006-7006/com.darwinalvarez.bigstore A/libc: Fatal signal 6 (SIGABRT), code -6 in tid 7006 (lvarez.bigstore)

Sebastian Tellez

teacher•

Checa el tamaño de la imagen que estas cargando en tu proyecto, si es mayor a 2mb trata de cambiarla o de comprimirla, este error pasa por que te estas acabando la memoria SOLO en cargar esa imagen. A veces funcionara, otras veces no, todo depende del dispositivo en que estes cargando la app. Pero en general trata de usar imágenes no muy grandes.

Darwin Alvarez

student•

Tal parece que el tamaño de la imagen no es el problema, lo he reducido e incluso he quitado las imágenes, pero aún persiste! debe haber otro motivo?

<<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:fitsSystemWindows="true"
        tools:context=".DetailActivity">

    <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarDetail"
            android:layout_width="match_parent"
            android:layout_height="@dimen/appbar_height"
            android:fitsSystemWindows="true">

        <android.support.design.widget.CoordinatorLayout
                android:id="@+id/collDetail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="exitUntilCollapsed|scroll"
                app:contentScrim="@color/colorAccent">

            <ImageView
                    android:id="@+id/imgHeaderDetail"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:src="@drawable/plato"
                    app:layout_collapseMode="parallax"
                    android:transitionName="transitionHeader"
                    android:scaleType="centerCrop"/>

            <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbarDetail"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CoordinatorLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:behavior_overlapTop="50dp">
        <include layout="@layout/content_desc"/>


    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder =
        Holder(parent?.inflate(R.layout.item_landing))

override fun onBindViewHolder(holder: Holder, position: Int) {
    holder?.bindView(data[position])
}

override fun getItemCount(): Int = data.size

class Holder(itemView: View?): RecyclerView.ViewHolder(itemView){
    fun bindView(itemLnading: ItemLnading){
        with(itemLnading){
            itemView.txtTitleItem.text= title
            itemView.txtDescItem.text = desc
            itemView.txtPriceItem.text = "${String.format("%.2f",price)}"

            itemView.setOnClickListener{
                val intent = Intent(itemView.context,DetailActivity::class.java)
                intent.putExtra("title",title)
                intent.putExtra("desc",desc)
                intent.putExtra("price",price)

                val p1:Pair<View,String> = Pair.create(itemView.imgItemHeader,"transitionHeader")
                val p2:Pair<View,String> = Pair.create(itemView.txtTitleItem,"transitionTitle")
                val p3:Pair<View,String> = Pair.create(itemView.txtDescItem,"transitionDesc")
                val p4:Pair<View,String> = Pair.create(itemView.txtPriceItem,"transitionPrice")
                val options:ActivityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(itemView.context as Activity,p1,p2,p3,p4)
                itemView.context.startActivity(intent,options.toBundle())
            }
        }
    }
}

Material Transitions conexión del item de la lista con la vista de detalle

Introducción al Curso de Kotlin

¿Qué vamos a construir con Kotlin?

Kotlin: qué es

Preparando el entorno de desarrollo para trabajar con Kotlin

Instalando y probando Kotlin en Mac

Instalando y probando Kotlin en Windows

Instalando y probando IntelliJ IDEA

Descubriendo Kotlin

Variables y tipos en Kotlin

String templates

Funciones en Kotlin

Clases en Kotlin

Data Class en Kotlin

Default values en Kotlin

Arreglos en Kotlin

Extension Functions en Kotlin

if/if-else en Kotlin

For y While en Kotlin

When en Kotlin

Rangos en Kotlin

Null Safety o !NPE en Kotlin

Destructuring Declarations en Kotlin

Expresion Object y Singletons en Kotlin

Conceptos avanzados de Kotlin

Diferencias entre Kotlin y Java

Simplificando procesos con Kotlin

Qué son las lambdas

Lambdas y cómo se usan

Funciones de orden mayor

Inline functions

Sealed Class

Operadores sobrecargados

Try, catch y manejo de excepciones en Kotlin

Interoperabilidad entre Java y Kotlin

Java vs Kotlin

Cómo configurar Kotlin en Android Studio

Creación del proyecto Interoperabilidad de Java con Kotlin

Kotlin en Java: implementando Funciones

Kotlin en Java: implementando Clases

Java en Kotlin: Implementación de un RecyclerView

Java en Kotlin: implementación de Shared preferences

Finalización del proyecto de interoperabilidad de Java con Kotlin

Android Kotlin

Qué son y cómo se usan las Android Extensions

Extension Functions en Android

Anko

RecyclerView construcción de la estructura de la vista de principal de PlatziStore

RecyclerView finalización de la construcción de la estructura de la vista de principal de PlatziStore

Anko Layouts

Reto

Material Transitions construcción de la vista

Material Transitions conexión del item de la lista con la vista de detalle

SQLite

Implementando la base de datos SQLite de PlatziStore

RETO : Investiga como es que funcionan las Coroutines en kotlin generando una lista de datos muy grande y asignándola a una lista en Android

Kotlin en el servidor

Kotlin Frameworks

Configuración de un proyecto con Ktor

Hello Ktor

Enviando respuestas desde el servidor - GET y POST

Generando la lista para PlatziStorev

Consumir endpoints en Android con Retrofit

Creando el cliente de retrofit para consumir el servicio

Consumiendo el listado de productos en PlatziStore

Conclusiones del curso de lo que aprendimos en el curso de Kotlin