CODEWITHSUNDEEP
androidmaterial-design
Akshay komarla
Akshay komarla

Reputation: 744

how to implement long press image preview like instagram

I'm trying to implement long press image preview like in instagram. My application is like a catalogue which contains images where when I long press on any images its preview should appear and close after releasing like in instagram.

Upvotes: 2

Views: 5010

Answers (3)

HendraWD
HendraWD

Reputation: 3043

METHOD 1

I made an android library to do that. You can use it directly from here.

demo1 demo2

To use it, you just need to provide contentDescription, as easy as this:

<hendrawd.library.customview.HintedImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_xxx"
    android:contentDescription="Put your hint here!"
    android:background="@drawable/optional_selector"
    />

If you don't want to use ImageButton background, you can change the background directly or make it as @null to remove the background.

It will not only show hint when long-clicked but also on mouse cursor hover if you plug external mouse to your Android device.

METHOD 2

Starting from Android Oreo, if your requirement is just to show simple tooltip to any View, you can use android:tooltipText attribute directly without the above library in order to display a simple Toast-like tooltip when user long-presses or mouse hover on a View

<View
    android:id="@+id/yourView"
    android:tooltipText="@string/view_tooltip"/>

Although it has a limitation with minimum API 26, you can still use it through the Support Library's TooltipCompat helper class

TooltipCompat.setTooltipText(yourView, getString(R.string.view_tooltip))

Upvotes: 0

Eduardo Nunes
Eduardo Nunes

Reputation: 71

Well I'm using recycler view with images.

To show the image I use the long press listener calling this method:

public void publicationQuickView(Post post){
    View view = getLayoutInflater().inflate( R.layout.quick_view, null);

    ImageView postImage = (ImageView) view.findViewById(R.id.ivFeedCenter);
    ImageView profileImage = (ImageView) view.findViewById(R.id.ivUserProfile);
    TextView tvUsername = (TextView) view.findViewById(R.id.txtUsername);
    tvUsername.setText(post.user.name);

    Picasso.with(this).load(post.picture).priority(Picasso.Priority.HIGH).noPlaceholder().into(postImage);
    Picasso.with(this).load(post.user.picture).noPlaceholder().into(profileImage);

    builder = new Dialog(this);
    builder.requestWindowFeature(Window.FEATURE_NO_TITLE);
    builder.getWindow().setBackgroundDrawable(
            new ColorDrawable(Color.TRANSPARENT));
    builder.setContentView(view);
    builder.show();
}

I inflate the layout and inject into a Dialog.

To dismiss the dialog I'm using the RecyclerView.OnItemTouchListener() like this:

rvUserProfile.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
        @Override
        public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
            if(e.getAction() == MotionEvent.ACTION_UP)
                hideQuickView();
            return false;
        }

        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent event) {
        }

        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
        }});

And finally:

public void hideQuickView(){
    if(builder != null) builder.dismiss();
}

Upvotes: 3

user5248371
user5248371

Reputation:

Use this code for long press 

public class HintedImageButton extends ImageButton implements OnLongClickListener
{
    private OnLongClickListener mOnLongClickListener;

    public HintedImageButton(Context context)
    {
        super(context);

        setOnLongClickListener(this);
    }

    public HintedImageButton(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        setOnLongClickListener(this);
    }

    @Override public void setOnLongClickListener(OnLongClickListener l)
    {
        if (l == this)
        {
            super.setOnLongClickListener(l);
            return;
        }

        mOnLongClickListener = l;
    }

    @Override public boolean onLongClick(View v)
    {
        if (mOnLongClickListener != null)
        {
            if (!mOnLongClickListener.onLongClick(v))
            {
                handleLongClick();
                return true;
            }
        }
        else
        {
            handleLongClick();
            return true;
        }

        return false;
    }

    private void handleLongClick()
    {
        String contentDesc = getContentDescription().toString();
        if (!TextUtils.isEmpty(contentDesc))
        {
            int[] pos = new int[2];
            getLocationInWindow(pos);

            Toast t = Toast.makeText(getContext(), contentDesc, 1200);
            t.setGravity(Gravity.TOP | Gravity.LEFT, pos[0] - ((contentDesc.length() / 2) * 12), pos[1] - 128);
            t.show();
        }
    }
}

for more detail visit this https://gist.github.com/scruffyfox/3894926

Upvotes: 1

Related Questions