3

He estado leyendo en varias paginas como lograr esto:

introducir la descripción de la imagen aquí

Lo que he intentado hasta el momento:

onImageClickListener = new CardViewAdapter.IOnImageClickListener() {
            @Override
            public void onImageClickListener(int position) {

                infoImage.setImageResource(R.drawable.photomadrid);

                Fragment fragmentInfo = new InfoTripFragment();

                // Setup enter transition on second fragment
                fragmentInfo.setSharedElementEnterTransition(changeTransform);
                fragmentInfo.setEnterTransition(changeTransform);

                // Add second fragment by replacing first
                FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction()
                        .replace(R.id.containerHome, fragmentInfo)
                        .addToBackStack(null)
                        .addSharedElement(infoImage, getString(R.string.transition));
                // Apply the transaction
                ft.commit();
            }
        };

El problema esta en que el imageView que necesito esta en un cardView:

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cardView"
    style="@style/MyCardView"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_margin="8dp"
    android:layout_weight="1"
    card_view:cardCornerRadius="14dp"
    card_view:cardElevation="2dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageInfoPoster"
            android:transitionName="@string/transition"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:contentDescription="@string/info_photo"
            android:gravity="center"
            android:scaleType="centerCrop"
            card_view:layout_constraintBottom_toTopOf="@+id/guideline10"
            card_view:layout_constraintEnd_toEndOf="parent"
            card_view:layout_constraintHorizontal_bias="0.0"
            card_view:layout_constraintStart_toStartOf="parent"
            card_view:layout_constraintTop_toTopOf="parent"
            card_view:layout_constraintVertical_bias="0.0"
            card_view:srcCompat="@drawable/gradient_indigo" />
    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.cardview.widget.CardView>

Tengo un bottom navigation y en el homefragment es donde tengo el recycler view implementado. Quiero que al darle click a la foto haga el efecto de la foto hacia un nuevo fragment el cual ya esta definido en el panel de navegacion asi:

...
 <fragment
        android:id="@+id/navigation_home"
        android:name="com.everything.yuju.ui.home.HomeFragment"
        android:label="@string/init"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/action_navigation_home_to_navigation_info"
            app:destination="@id/navigation_info" />
    </fragment>

    <fragment
        android:id="@+id/navigation_info"
        android:name="com.everything.yuju.ui.info.InfoTripFragment"
        android:label="Información del viaje"
        tools:layout="@layout/fragment_info_trip" />
...

Como puedo hacer para lograrlo? Una de las dudas que me surgieron mientras lo intentaba era como obtener el recurso de la imagen dentro del cardview en el home fragment creo que ahi esta la clave.

EDIT: Logre que funcionara con uno de mis cardView y no funciona siempre y ademas no es una animacion suave y no siempre realiza la animación, es algo un poco rigido. Pero no logro hacer que funcione con los otros cardView no se xq solo funciona con el primero. Quiero lograr exactamente lo que está en esa foto pero que sea entre fragments. La infomarcion se esta pasando bien por el Bundle.

Transicion personalizada:

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform />
</transitionSet>

onBindViewHolder:

    ((CardInfo) holder).imageViewPosterInfo.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        final AppCompatActivity activity = (AppCompatActivity) context;

                        FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
                                .addSharedElement(((CardInfo) holder).imageViewPosterInfo, context.getString(R.string.transition)) // recuerda aquí debe ser igual a transitionName de los xml
                                .build();
                        Bundle bundle = new Bundle();  // para enviar datos al fragment info, ejemplo:
                        bundle.putString("description", ((CardInfo) holder).description.getText().toString());
                        bundle.putInt("imagen", infoCards.get(position).getPosterInt());

                        Navigation.findNavController(activity, R.id.nav_host_fragment).navigate(R.id.navigation_info, bundle, null, extras);
                    }
                });

InfoTripFragment:

if (getArguments() != null) {
            int imagenx = getArguments().getInt("imagen");
            String description = getArguments().getString("description");

            Picasso.get()
                    .load(imagenx)
                    .fit()
                    .noFade()
                    .centerCrop()
                    .into(imageViewInfoTrip, new Callback() {
                        @Override
                        public void onSuccess() {
                            startPostponedEnterTransition();
                        }

                        @Override
                        public void onError(Exception e) {
                            startPostponedEnterTransition();
                        }
                    });

            textViewInfo.setAnimation(new TranslateAnimation(imageViewInfoTrip.getHeight() + 25, imageViewInfoTrip.getHeight(), textViewInfo.getPivotY(), textViewInfo.getPivotY()));
            textViewInfo.animate();
            textViewInfo.setVisibility(View.VISIBLE);
            textViewInfo.setText(description);

        }

Nota: Si me pudieran aclarar tambien como puedo hacer para que el textView no aparezca arriba de la foto y luego se arregle se los agradeceria. Algo asi como la animacion del gif que puse que se mueva a una posicion debajo de la foto.

10
  • el onImageClickListener donde lo tienes (adapter, fragment)?
    – armen
    Commented el 11 ene. 2020 a las 2:42
  • en el fragment lo que tengo en el adaptador es una interfaz con ese método que lo instancio en el fragment home
    – Alex Rivas
    Commented el 11 ene. 2020 a las 6:02
  • Hola @AlexRivas , deseas que esa animación se realice en cada elemento que des click ?
    – Jorgesys
    Commented el 13 ene. 2020 a las 14:54
  • @Jorgesys si eso es lo que deseo. que a cada cardview que se cree se le aplique ese efecto y no solo a la primera como me sucede actualmente
    – Alex Rivas
    Commented el 13 ene. 2020 a las 18:35
  • deberías mostrar el código de tu adapter, ya que a mi me funciona bien. Agrega la modificación que hice en el adapter: if (Build.VERSION ... y prueba cambiando el onClick con el itemView
    – armen
    Commented el 13 ene. 2020 a las 23:53

1 respuesta 1

3

En el ViewHolder del adapter declaras todos los recursos, ejemplo:

public class ViewHolder extends RecyclerView.ViewHolder {
    public ImageView imagen;
    public CardView card;
    public TextView ...

    public ViewHolder(View itemView ) {
        super(itemView);
        imagen = (ImageView) itemView.findViewById(R.id.imageInfoPoster);
        card = (CardView) itemView.findViewById(R.id.cardView);
    }
}

Para lograr lo que quieres, debes usar esta propiedad en ambos ImageView (del cardview y del fragment info)

 android:transitionName="imageView"  // o cualquier otro nombre pero debe ser el mismo en los ImageView y en el addSharedElement

En onBindViewHolder del adapter agregas el listener al recurso que desees, y así instancias por ejemplo el fragment info. Por cierto estas mezclando los 2 tipos de navegación (FragmentTransaction y Navigation). Veo que estas usando el nuevo, Navigation, con la gráfica, entonces en el adapter llamas al fragment info y con bundle le envias los datos. Usa FragmentNavigator.Extras para hacer transiciones con elementos comunes, en este caso con la imagen:

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            holder.imagen.setTransitionName("imageView" + position);
        }

 holder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(final View view) {
                 final AppCompatActivity activity = (AppCompatActivity) view.getContext();  // así obtienes el context 

                 FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder()
                 .addSharedElement(holder.imagen, "imageView") // recuerda aquí debe ser igual a transitionName de los xml
                 .build();       

                 Bundle bundle = new Bundle();  // para enviar datos al fragment info, ejemplo:
                 bundle.putString("id", tumodelo.get(position).getId());   
                 bundle.putString("imagen", tumodelo.get(position).getId());
                 ...
                 // de la siguiente forma es como se navega al fragment info, con sus datos y elementos comunes, nada de Fragment Transaction: 
                 Navigation.findNavController(activity, R.id.nav_host_fragment).navigate(R.id.action_navigation_home_to_navigation_info,bundle,null,extras);
  }

En el fragment info, dentro de onCreate, agregas la transicion de elementos comunes:

 @Override
public void onCreate(Bundle savedInstanceState) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {  // solo funciona en api +22
        setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));  // transicion por default en android
   // si quieres transiciones personalizadas, debes tener una carpeta transition en Recursos, y asi se agregan:
        setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(R.transition.tutransicion));
  }
    super.onCreate(savedInstanceState);
  }

Dentro de onCreateView del fragment info recibes el bundle. Lo ideal sería usar Glide o Picasso para mostrar las imágenes:

  if (getArguments() != null) {
        String imagenx = getArguments().getString("imagen");

        Picasso.with(getContext())
                .load(imagenx)
                .fit()
                .noFade()
                .centerCrop()
                .into(imageView, new Callback() {
                    @Override
                    public void onSuccess() {
                        startPostponedEnterTransition();
                    }

                    @Override
                    public void onError() {
                        startPostponedEnterTransition();
                    }
                });

  }
2
  • En tu respuesta pones un Activity para obtener el context funciona igual si lo hago de fragment a fragment? Voy a probar tu solución espero que me funcione. Otra duda que declares el setOnClickListener en el view holder es igual que lo haga con una interfaz y declararlo en el fragmento dónde está el recycler view o he de hacerlo en el view holder?
    – Alex Rivas
    Commented el 12 ene. 2020 a las 2:49
  • 1
    me funciona solo con el primer cardView y no siempre. con los otros solo me muestra la descripcion. que puede ser eso??? voy a editar la pregunta para que veas lo que estoy haciendo
    – Alex Rivas
    Commented el 12 ene. 2020 a las 17:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.