¿Cómo crearías una vista de popover en Android, como Facebook Comments?

La mejor manera de crear una popover view similar es utilizando PopupWindow , ya que puede colocar el PopUpWindow en cualquiera de la posición de vista específica (o en el centro / arriba / abajo de la pantalla). También puede lograr la misma interfaz de usuario con DialogFragment , pero no puede posicionarse en una ubicación de vista específica.

Tengo un código de trabajo completo aquí https://gist.github.com/libinbensin/67fcc43a7344758390c3

Paso 1: Crear su diseño personalizado, por ejemplo, como Facebook tiene un Header TextView con un ListView y EditText .

Paso 2: Establezca el diseño en PopupWindow

Inflar el diseño para establecer

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

Este Layout tiene un ListView , así que busque ListView en el diseño y rellene los datos. Usted puede tener su propia vista aquí

 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)); 

Ahora, cree una instancia de PopupWindow con altura y ancho específicos. Prefiero fijar el tamaño depende del dispositivo.

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

Establezca la focusability de focusability de la ventana emergente.

 popWindow.setFocusable(true); 

Hacer que fuera de tocar to dismiss the popup window when touched outside la zona emergente

 popWindow.setOutsideTouchable(true); 

Ahora, establecer un fondo para el PopupWindow con un PopupWindow . El dibujable tiene rectangle shape con corner radius .

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

Finalmente. Mostrar el PopupWindow en la ubicación requerida. Lo hice mostrar en la bottom de la pantalla con algunas X and Y position

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

También puede configurar una Animation para que se use cuando PopUpWindow aparezca y desaparezca

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

Editar:

En realidad, aunque he utilizado un DialogFragment, estoy bastante seguro de su pop-up no utiliza un DialogFragment (o incluso un diálogo en absoluto!). La razón de esto es la característica de cambio de tamaño. Si eso es algo que desea, entonces no puede utilizar un DialogFragment. Tendrías que añadir una nueva vista a tu diseño. Parece que facebook también tiene otra vista que se encuentra entre la pared y el popup falso que es ligeramente translúcido y escucha los clics para descartar la vista. Algo como esto requeriría cierto esfuerzo y tiempo para construir, así que no voy a hacer esto para ti. Dejarme saber si usted tiene algunas preguntas sobre él sin embargo, puedo probablemente guiarle a la solución que usted está después.

Original:

Escribí el popup para usted:

 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> 

Y dialog_background.xml (entra en 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> 

Y se ve así:

¡Simplemente agregue su contenido de visualización y estará listo!

Puede utilizar una ventana PopupWindow para hacer eso. http://developer.android.com/reference/android/widget/PopupWindow.html

Por supuesto, tendrás que estilo y rellenar el contenido del popup por tu cuenta. Usted puede obtener algunas ideas de estilo de Cómo hacer el diseño con esquinas redondeadas ..?

Esto parece un componente personalizado construido por Facebook. No es un componente estándar de Android. Puede intentar implementarla derivando del Fragmento de diálogo.

Parece que sería más fácil usar un Fragmento con un fondo transparente (o en este caso translúcido).