How to implement a small popup with some images on a button click

Question

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 .?

Answer 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

public class TooltipWindow {

private static final int MSG_DISMISS_TOOLTIP = 100;
private Context ctx;
private PopupWindow tipWindow;
private View contentView;
private LayoutInflater inflater;

public TooltipWindow(Context ctx) {
    this.ctx = ctx;
    tipWindow = new PopupWindow(ctx);

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

void showToolTip(View anchor) {

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

    tipWindow.setOutsideTouchable(true);
    tipWindow.setTouchable(true);
    tipWindow.setFocusable(true);
    tipWindow.setBackgroundDrawable(new BitmapDrawable());

    tipWindow.setContentView(contentView);

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

    // Get rect for anchor view
    Rect anchor_rect = new Rect(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);

    int contentViewHeight = contentView.getMeasuredHeight();
    int contentViewWidth = 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 view
    int position_x = anchor_rect.centerX() - (contentViewWidth / 2);
    int position_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);
}

boolean isTooltipShown() {
    if (tipWindow != null && tipWindow.isShowing())
        return true;
    return false;
}

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

Handler handler = new Handler() {
    public void handleMessage(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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<ImageView
    android:id="@+id/tooltip_nav_up"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:layout_gravity="center"
    android:background="@drawable/nav_up" />

<TextView
    android: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-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <rotate
        android:fromDegrees="45"
        android:pivotX="-50%"
        android:pivotY="80%"
        android:toDegrees="45" >
        <shape android:shape="rectangle" >
            <solid android:color="#000000" >
            </solid>

            <stroke
                android:width="2dp"
                android:color="#000000" />
        </shape>
    </rotate>
</item>

now use this tooltip like this

TooltipWindow tipWindow = new TooltipWindow(MainActivity.this);
 @Override
public void onClick(View v) {
    if (!tipWindow.isTooltipShown())
        tipWindow.showToolTip(v);
}

ask me in case of any query

Answer 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.

Answer 3

Use PopupWindow:

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


popupView.findViewById(R.id.whatsapp).setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                //Handle onClicks here
            }});
// Other onClickListeners

    PopupWindow popupWindow = new PopupWindow(
                    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(new BitmapDrawable());