How to implement a small popup with some images when a button is clicked

Question

I want a popup similar to this when the user clicks on a button with three blue dots. how to achieve this type of popup in android. any library available.?

Answer 1

You can use this library to achieve your goal.

• github-libary
• https://www.codeproject.com/Articles/521455/Quick-action-pattern-in-Android-and-simple-impleme

and if you want to create your own user than use the following class create one user 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 create your own layout for this as 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 nav_up downloadable file 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 hint as

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

ask me in case of any request

Answer 2

You should try PopupMenu

PopupMenu displays a menu in a modal popup that is tied to a view. A pop-up window will appear below the anchor if there is space, or higher if not. If the IME is visible, the popup will not block it until it touches. Touching outside the popup will reject 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());