1

Tengo una galería en mi app, con un GridLayout y quiero que cuando el usuario le de clic a alguna imagen tenga este efecto , ¿Cómo puedo lograr eso? Si me pudieran decir que efecto seria ese o alguna librería que lo hace seria de gran ayuda muchas gracias

ADAPTER

public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.ViewHolder> 
{
    private ArrayList<Business> businessList;
    private FragmentActivity activity;
    private int layoutMolde,position;

    public ViewImageExtended viewImageExtended;
    public Bitmap bitmap = null;

    public GalleryAdapter(FragmentActivity activity, ArrayList<Business> list, int layout)
    {
        this.activity = activity;
        this.businessList = list;
        layoutMolde = layout;
    }

    @Override
    public GalleryAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
    {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_gallery_premium, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position)
    {

        if(businessList.size()==0){
            holder.Imggallerypremium.setVisibility(View.GONE);
        }else {
            Log.d("ARRAY", businessList.toString());
         Glide.with(activity).load(businessList.get(position).getImage())
                    .into(holder.Imggallerypremium);
        }



    }

    @Override

    public int getItemCount() {

        return (businessList == null) ? 0 : businessList.size();


    }



    public class ViewHolder extends RecyclerView.ViewHolder
    {

        public ImageView Imggallerypremium;

        public ViewHolder( View itemView)
        {
            super(itemView);
            Imggallerypremium = (ImageView) itemView.findViewById(R.id.imgGalleryPremium);
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    bitmap = ((BitmapDrawable)(Imggallerypremium.getDrawable()).getBitmap();
                    if(viewImageExtended == null || viewImageExtended.getDialog() == null || !viewImageExtended.getDialog().isShowing()){

                        FragmentManager fm = this.activity.getSupportFragmentManager();
                        Bundle arguments = new Bundle();

                        // Aqui le pasas el bitmap de la imagen
                        arguments.putParcelable("PROFILE_PICTURE", bitmap);
                        viewImageExtended = ViewImageExtended.newInstance(arguments);
                        viewImageExtended.show(fm, "ViewImageExtended");

                    }

                }
            });
        }
    }
}

ACTIVITY

public class BusinessPremiumGallery extends AppCompatActivity
{
GalleryAdapter galleryAdapter;
    Gson gson;
    public ViewImageExtended viewImageExtended;
    public Bitmap bitmap = null;
    private static final Type BUSINESS_TYPE = new TypeToken<ArrayList<Business>>() {}.getType();

    JsonObject images;
    GridLayoutManager layoutManager;
    ArrayList<Business> arrayGallery;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_business_premium_gallery);
        Bundle bundle = getIntent().getExtras();
        final int values = bundle.getInt("no");
        new PlifRequestBase(BusinessPremiumGallery.this) {

            @Override
            public JsonObject onHttpOk(JsonObject response) throws JSONException {
                JsonObject respuesta, details, location, geolocation, matrix, schedules_array;
                JsonArray data,branches, phones, schedules,extra_services,user_images;
                respuesta = response;
                int catalog_id;
                String catalog_descrip,catalog_name,catalog_image,image;

                Log.d("VALUES2",String.valueOf(values));
                arrayGallery=new ArrayList<Business>();
                gson=new Gson();
                user_images= respuesta.get("user_images").getAsJsonArray();


                if(user_images.size()<0){
                    arrayGallery=null;
                    images=null;

                }else {
                    arrayGallery=gson.fromJson(user_images,BUSINESS_TYPE);
                    for (int i = 0; i < user_images.size(); i++) {
                        images = user_images.get(i).getAsJsonObject();
                        image=images.get("image").getAsString();
                       Log.d("IMAGES",image);
                        Log.d("CATALOG",String.valueOf(images));

                    }


                }
                if (BusinessPremiumGallery.this == null)
                    return response;
                BusinessPremiumGallery.this.runOnUiThread(new Runnable() {
                    public void run() {
                        RecyclerView recycler = (RecyclerView) BusinessPremiumGallery.this.findViewById(R.id.recycler_gallery);
                        galleryAdapter = new GalleryAdapter(BusinessPremiumGallery.this, arrayGallery, R.layout.row_gallery_premium);
                        recycler.setNestedScrollingEnabled(false);
                        layoutManager = new GridLayoutManager(BusinessPremiumGallery.this, 2);
                        recycler.setLayoutManager(layoutManager);
                        recycler.setAdapter(galleryAdapter);
                    }

                });

                return respuesta;
            }

            @Override
            public void onHttpCreate(JsonObject response) throws JSONException
            {

            }
        }.execute("businesses/"+String.valueOf(values), "GET");
    }





}

2 respuestas 2

2

Puedes crear un DialogFragment y cargar la imagen ahi:

public class ViewImageExtended extends AppCompatDialogFragment {

    public Bitmap PICTURE_SELECTED;
    public static ViewImageExtended newInstance(Bundle arguments) {
        Bundle args = arguments;
        ViewImageExtended fragment = new ViewImageExtended();
        fragment.setArguments(args);
        return fragment;
    }

    public ViewImageExtended() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Esta linea de código hace que tu DialogFragment sea Full screen
        setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_NoTitleBar);
        Bundle arguments = getArguments();
        PICTURE_SELECTED = arguments.getParcelable("PICTURE_SELECTED");
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_fragment_view_image, container, false);

        ImageView ivImage = (ImageView)view.findViewById(R.id.ivImage);

        if(PICTURE_SELECTED != null)
           ivImage.setImageBitmap(PICTURE_SELECTED);

        return view;
    }


    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = new Dialog(getActivity(), getTheme()){
            @Override
            public void onBackPressed() {
                // Aqui puedes capturar el OnBackPressed
                dismiss();
            }
        };
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        return dialog;
    }

}

dialog_fragment_view_image.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <ImageView
            android:id="@+id/ivImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"/>

</RelativeLayout>

Declara una variable global en tu actividad:

public ViewImageExtended viewImageExtended;
public Bitmap bitmap = null; // El bitmap de la imagen
public FragmentActivity activity; // En el constructor del fragment pasas el activity como referencia this.activity = activity;

Para inicializar el Dialog desde una actividad en tu OnClick (recuerda que a este paso, debes tener almacenado el bitmap de la imagen cuando des click en la variable bitmap):

// Esto es para evitar crear cuadros de diálogos varias veces 
if(viewImageExtended == null || viewImageExtended.getDialog() == null || !viewImageExtended.getDialog().isShowing()){

  // Si estas en un activity
  FragmentManager fm = this.getSupportFragmentManager();
  // Si estas en un fragment y pasaste el activity en el constructor
  FragmentManager fm = this.activity.getSupportFragmentManager();

  Bundle arguments = new Bundle();

  // Aqui le pasas el bitmap de la imagen
  arguments.putParcelable("PROFILE_PICTURE", bitmap);
  viewImageExtended = ViewImageExtended.newInstance(arguments);
  viewImageExtended.show(fm, "ViewImageExtended");
  }

}

Recuerda, puedes customizar el layout dialog_fragment_view_image.xml como quieras, agregar botones, etc...

Ese tipo de efecto Blur, suele venir en aplicaciones iOS, puedes buscar referencias de como hacer un efecto blur a una imagen y cargarla de fondo.

Espero te sirva de ayuda.

6
  • muchas gracias por tu respuesta y parece que si podria resolver mi problema, estaba tratando de implementarlo pero se me complica por que en mi app tengo un recycler y un adapter entonces no se que codigo va en que parte jaja no se si me pudieras orientar por favor :) Commented el 20 abr. 2017 a las 15:54
  • Claro, implementa el código que incluí en mi respuesta. En el adaptador implementa OnClickListener para los items (imágenes) de tu RecyclerView y en el OnClick agrega el código para mostrar el DialogFragment que te adjunté más arriba. Y en el mismo método OnClick, obténel bitmap de tu referencia al objeto del imageview quedaría asi: bitmap = ((BitmapDrawable) referenciaDeLaImagen.getDrawable()).getBitmap(); Commented el 20 abr. 2017 a las 18:29
  • Muchas gracias deja lo intento :) Commented el 20 abr. 2017 a las 21:40
  • Dejame saber como te va, saludos. Commented el 20 abr. 2017 a las 21:41
  • No pude :/ agregué mi codigo en mi pregunta, me marca error en getsupportFragment :/ no se si este haciendo algo mal, espero puedas ayudarme, muchas gracias Commented el 21 abr. 2017 a las 0:22
0

O podrias utilizar esta dependencia https://github.com/mzelzoghbi/ZGallery?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=4987

Para crear galerias con Zoom y todo ;)

3
  • ya lo implemente y si corre mi app pero cuando le doy clic a una imagen no hace nada :/ y en la pagina no viene muy explicado como lograr eso :( Commented el 20 abr. 2017 a las 17:06
  • Tienes razón , ya logre hacer que funcionara pero pero no es muy moldeable, utiliza la solución de arriba, es lo mas facil y practico. @HeberSolis Commented el 20 abr. 2017 a las 19:53
  • Muy bien, De todos modos muchas gracias por tu ayuda :D Commented el 20 abr. 2017 a las 21:41

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.