CODEWITHSUNDEEP
androidandroid-layoutandroid-fragments
David Xu
David Xu

Reputation: 5597

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

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:

enter image description here

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

Upvotes: 24

Views: 27797

Answers (5)

Libin
Libin

Reputation: 17085

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

enter image description here

Upvotes: 57

danh32
danh32

Reputation: 6244

It looks like it would be easiest to just use a Fragment with a transparent (or in this case translucent) background.

Upvotes: -1

Bradley Campbell
Bradley Campbell

Reputation: 9808

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:

enter image description here

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

Upvotes: 7

Dave C
Dave C

Reputation: 928

You can use a PopupWindow to do that. http://developer.android.com/reference/android/widget/PopupWindow.html

Of course you'll need to style it and fill in the popup's contents on your own. You can get some styling ideas from How to make layout with rounded corners..?

Upvotes: 1

Ramesh Prasad
Ramesh Prasad

Reputation: 371

This seems like a custom component built by Facebook. It is not a standard Android component. You can try implementing it by deriving from the Dialog Fragment.

Upvotes: 0

Related Questions