How would you create a popover view in Android, like Facebook Comments?

Question

I was wondering if anyone knows how to create a Facebook-like popover view like in the Facebook Android app for comments.

This is what I mean:

Along with the handle that you can drag to dismiss it, is it a native Android UI control or has Facebook implemented this themselves?

Answer 1

The best way to create similar popover view is by using PopupWindow, since you can place the PopUpWindow on any of the specific view position (or on center/top/bottom of screen). You can also achieve same UI with DialogFragment , but you cannot position at specific view location.

I have a complete working code here https://gist.github.com/libinbensin/67fcc43a7344758390c3

Step 1: Create your custom layout , for e.g., as Facebook its has a Header TextView with a ListView and EditText.

Step 2: Set the layout to the PopupWindow

Inflate the layout to set

LayoutInflater layoutInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE); final View inflatedView = layoutInflater.inflate(R.layout.fb_popup_layout, null,false); 

This Layout has a ListView ,so find the ListView in the layout and fill the data . you can have your own view here

ListView listView = (ListView)inflatedView.findViewById(R.id.commentsListView); listView.setAdapter(new ArrayAdapter<String>(TryMeActivity.this,         R.layout.fb_comments_list_item, android.R.id.text1,contactsList)); 

Now, create an instance of PopupWindow with specific height and width. I prefer to set the size depends on the device.

Display display = getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size);  popWindow = new PopupWindow(inflatedView, size.x - 50,size.y - 500, true ); 

Set the focusability of the popup window.

popWindow.setFocusable(true); 

Make it outside touchable to dismiss the popup window when touched outside the popup area

popWindow.setOutsideTouchable(true); 

Now, set a background to the PopupWindow with a drawable. The drawable has rectangle shape with corner radius.

  popWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.fb_popup_bg)); 

Finally. show the PopupWindow at required location. I made it show at bottom of the screen with some X and Y position

popWindow.showAtLocation(v, Gravity.BOTTOM, 0,150);  // 0 - X postion and 150 - Y position 

You can also set an Animation to use when the PopUpWindow appears and disappears

popWindow.setAnimationStyle(R.anim.animation); // call this before showing the popup 

Answer 2

Edit:

Actually, even though I used a DialogFragment, I'm quite certain their popup does not use a DialogFragment (or even a Dialog at all!). The reason for this is the resizing feature. If that is something you want, then you can't use a DialogFragment. You would have to just add a new view to your layout. It looks like facebook also has another view that sits between your wall and the fake popup that is slightly translucent and listens for clicks in order to dismiss the view. Something like this would take some actual effort and time to build, so I won't make this one for you. Let me know if you have any questions about it though, I can probably guide you to the solution you are after.

Original:

I wrote the popup for you:

public class MyActivity extends Activity {      @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);          if (savedInstanceState == null) {             F1.newInstance().show(getFragmentManager(), null);         }     }      public static class F1 extends DialogFragment {          public static F1 newInstance() {             F1 f1 = new F1();             f1.setStyle(DialogFragment.STYLE_NO_FRAME, android.R.style.Theme_DeviceDefault_Dialog);             return f1;         }          @Override         public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {              // Remove the default background             getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));              // Inflate the new view with margins and background             View v = inflater.inflate(R.layout.popup_layout, container, false);              // Set up a click listener to dismiss the popup if they click outside             // of the background view             v.findViewById(R.id.popup_root).setOnClickListener(new View.OnClickListener() {                 @Override                 public void onClick(View v) {                     dismiss();                 }             });              return v;         }     } } 

popup_layout.xml:

<?xml version="1.0" encoding="utf-8"?>  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:clickable="true"     android:id="@+id/popup_root">      <FrameLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_marginTop="72dp"         android:layout_marginBottom="72dp"         android:layout_marginLeft="16dp"         android:layout_marginRight="16dp"         android:padding="20dp"         android:clickable="true"         android:background="@drawable/dialog_background">          <TextView             android:layout_height="wrap_content"             android:layout_width="wrap_content"             android:textColor="#000"             android:text="Content goes here!" />      </FrameLayout>  </FrameLayout> 

And dialog_background.xml (goes into res/drawable):

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">     <solid android:color="#FFF" />     <corners android:topLeftRadius="20dp" android:topRightRadius="20dp"          android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/>     <stroke android:color="#7F7F7F" android:width="1dp" /> </shape> 

And it looks like this:

Just add your view content and you're good to go!