How to make a larger imageview by clicking on it

1

I have a gallery in my app, with a GridLayout and I want that when the user clicks on some image have this effect, how can I achieve that? If you could tell me what effect it would be that or a library that does it would be very helpful, thank you very much

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");
    }





}
    
asked by Heber Solis 20.04.2017 в 03:25
source

2 answers

2

You can create a DialogFragment and upload the image there:

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>

Declare a global variable in your activity:

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;

To initialize the Dialog from an activity in your OnClick (remember that at this step, you must have the bitmap of the image stored when you click on the 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");
  }

}

Remember, you can customize the layout dialog_fragment_view_image.xml as you like, add buttons, etc ...

That type of Blur effect, usually comes in iOS applications, you can search references on how to blur a picture and load it in the background.

I hope it helps you.

    
answered by 20.04.2017 / 03:46
source
0

Or you could use this dependency link

To create galleries with Zoom and everything;)

    
answered by 20.04.2017 в 13:41