How To Implement A Small Popup With Some Images On A Button Click

I want a popup like this when user click on the three blue dot button. how to achieve this type of popup view in android . any library is available .?

Solution 1:

you can use this library to achieve your goal look at this

• Android Tooltip library 1
• Android Tooltip library 2
• Android Tooltip library 3
• Android Tooltip library 4

and if you want create your custom than use following class create one custom class like this

publicclassTooltipWindow {

privatestaticfinalintMSG_DISMISS_TOOLTIP=100;
private Context ctx;
private PopupWindow tipWindow;
private View contentView;
private LayoutInflater inflater;

publicTooltipWindow(Context ctx) {
    this.ctx = ctx;
    tipWindow = newPopupWindow(ctx);

    inflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    contentView = inflater.inflate(R.layout.tooltip_layout, null);
}

voidshowToolTip(View anchor) {

    tipWindow.setHeight(LayoutParams.WRAP_CONTENT);
    tipWindow.setWidth(LayoutParams.WRAP_CONTENT);

    tipWindow.setOutsideTouchable(true);
    tipWindow.setTouchable(true);
    tipWindow.setFocusable(true);
    tipWindow.setBackgroundDrawable(newBitmapDrawable());

    tipWindow.setContentView(contentView);

    int screen_pos[] = newint[2];
    // Get location of anchor view on screen
    anchor.getLocationOnScreen(screen_pos);

    // Get rect for anchor viewRectanchor_rect=newRect(screen_pos[0], screen_pos[1], screen_pos[0]
            + anchor.getWidth(), screen_pos[1] + anchor.getHeight());

    // Call view measure to calculate how big your view should be.
    contentView.measure(LayoutParams.WRAP_CONTENT,
            LayoutParams.WRAP_CONTENT);

    intcontentViewHeight= contentView.getMeasuredHeight();
    intcontentViewWidth= contentView.getMeasuredWidth();
    // In this case , i dont need much calculation for x and y position of// tooltip// For cases if anchor is near screen border, you need to take care of// direction as well// to show left, right, above or below of anchor viewintposition_x= anchor_rect.centerX() - (contentViewWidth / 2);
    intposition_y= anchor_rect.bottom - (anchor_rect.height() / 2);

    tipWindow.showAtLocation(anchor, Gravity.NO_GRAVITY, position_x, position_y);

    // send message to handler to dismiss tipWindow after X milliseconds
    handler.sendEmptyMessageDelayed(MSG_DISMISS_TOOLTIP, 4000);
}

booleanisTooltipShown() {
    if (tipWindow != null && tipWindow.isShowing())
        returntrue;
    returnfalse;
}

voiddismissTooltip() {
    if (tipWindow != null && tipWindow.isShowing())
        tipWindow.dismiss();
}

Handlerhandler=newHandler() {
    publicvoidhandleMessage(android.os.Message msg) {
        switch (msg.what) {
            case MSG_DISMISS_TOOLTIP:
                if (tipWindow != null && tipWindow.isShowing())
                    tipWindow.dismiss();
                break;
        }
    }

    ;
};

}

now Crete your custom layout for this like tooltip_layout

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical" ><ImageViewandroid:id="@+id/tooltip_nav_up"android:layout_width="25dp"android:layout_height="25dp"android:layout_gravity="center"android:background="@drawable/nav_up" /><TextViewandroid:id="@+id/tooltip_text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/tooltip_bg"android:gravity="center"android:padding="10dp"android:text="Tooltip using PopupWindow:)"android:textColor="@android:color/white"android:textSize="20dp"android:textStyle="bold" /></LinearLayout>

create one drawable file nav_up like this

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android" ><item><rotateandroid:fromDegrees="45"android:pivotX="-50%"android:pivotY="80%"android:toDegrees="45" ><shapeandroid:shape="rectangle" ><solidandroid:color="#000000" ></solid><strokeandroid:width="2dp"android:color="#000000" /></shape></rotate></item>

now use this tooltip like this

TooltipWindowtipWindow=newTooltipWindow(MainActivity.this);
 @OverridepublicvoidonClick(View v) {
    if (!tipWindow.isTooltipShown())
        tipWindow.showToolTip(v);
}

ask me in case of any query

Solution 2:

You should try PopupMenu

A PopupMenu displays a Menu in a modal popup window anchored to a View. The popup will appear below the anchor view if there is room, or above it if there is not. If the IME is visible the popup will not overlap it until it is touched. Touching outside of the popup will dismiss it.

Here is a good tutorial.

Solution 3:

Use PopupWindow:

ViewpopupView=LayoutInflater.from(context).inflate(R.layout.urxml,null); 
//Design layout of popup view and inflate it here


popupView.findViewById(R.id.whatsapp).setOnClickListener(newView.OnClickListener(){
            @OverridepublicvoidonClick(View v) {
                //Handle onClicks here
            }});
// Other onClickListenersPopupWindowpopupWindow=newPopupWindow(
                    popupView,
                    RelativeLayout.LayoutParams.WRAP_CONTENT,
                    RelativeLayout.LayoutParams.WRAP_CONTENT);

            popupWindow.setAnimationStyle(R.style.UrAnimation);
            popupWindow.showAtLocation(threeDotsView, Gravity.CENTER, x, y); //Position of view on the screen
            popupWindow.setOutsideTouchable(true);
            popupWindow.setFocusable(true);
            popupWindow.setBackgroundDrawable(newBitmapDrawable());