Add custom Popup/view to activity in android

Question

I'm starting in Android development and don't still get how to do this. I have a ListView, when the user taps one of the items I wan´t to display some information about it. A popup like this:

That's the way it should look, I already have the XML which is this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#b5000000">

<RelativeLayout
    android:layout_width="340dp"
    android:layout_height="400dp"
    android:columnCount="20"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:padding="10dp"
    android:background="@drawable/menubutton">

    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="X"
        android:id="@+id/infraccionesPopUpCerrar"
        android:layout_gravity="right|top"
        android:layout_row="0"
        android:layout_column="19"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/imageView8"
        android:layout_row="2"
        android:layout_column="10"
        android:layout_below="@+id/infraccionesPopUpCerrar"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="Aqui se detallaran las causas de la infraccion"
        android:id="@+id/infraccionesPopUpCausa"
        android:layout_column="0"
        android:layout_row="3"
        android:layout_columnSpan="20"
        android:layout_below="@+id/imageView8"
        android:layout_alignParentStart="true"
        android:layout_marginTop="43dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/infraccionesPopUpFecha"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="PAGADA"
        android:id="@+id/infraccionesPopUpSituacion"
        android:layout_below="@+id/infraccionesPopUpCausa"
        android:layout_alignStart="@+id/infraccionesPopUpCausa" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Folio: 00000000"
        android:id="@+id/infraccionesPopUpFolio"
        android:layout_alignParentBottom="true"
        android:layout_alignStart="@+id/infraccionesPopUpSituacion" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Estacionamiento prohibido"
        android:id="@+id/infraccionesPopUpTitulo"
        android:layout_below="@+id/imageView8"
        android:layout_centerHorizontal="true"
        android:textColor="#74cb51" />

</RelativeLayout>

How do I instantiate this Popup so I can change the content of the textviews inside? The information that displays the popup depends on what item he tap

Answer 1

public class Check extends AppCompatActivity {
ListView listView;
String[] days = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
ArrayAdapter<CharSequence> adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_register_check);

    listView = (ListView) findViewById(R.id.listView);
    //custom_list_row contains textview only
    adapter = new ArrayAdapter<CharSequence>(this, R.layout.custom_list_row, days);
    listView.setAdapter(adapter);


    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            //pass the view
            showPopUp(view);
        }
    });
}

public void showPopUp(View view) {
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    LayoutInflater layoutInflater = getLayoutInflater();

    //this is custom dialog 
    //custom_popup_dialog contains textview only
    View customView = layoutInflater.inflate(R.layout.custom_popup_dialog, null);
    // reference the textview of custom_popup_dialog
    TextView tv = (TextView) customView.findViewById(R.id.tvpopup);


    //this textview is from the adapter
    TextView text = (TextView) view.findViewById(R.id.textView);
    // get the text of the view clicked
    String day = text.getText().toString();
    //set the text to the view of custom_popop_dialog.
    tv.setText(day);

    builder.setView(customView);
    builder.create();
    builder.show();

}

}

Answer 2

You can make use of DialogFragment , it has some cool predefined layouts but you need your custom one.

public class MyDialogFragment extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        // Get the layout inflater
        LayoutInflater inflater = getActivity().getLayoutInflater();
        // Inflate the layout for the dialog
        // Pass null as the parent view because its going in the dialog layout
        View view = inflater.inflate(R.layout.dialog_custom_layout, null);

        // Get your views by using view.findViewById() here and do your listeners. 
         ...

        // Set the dialog layout
        builder.setView(view);

        return builder.create();
    }

}

More info can be found at the official documentation .

Answer 3

Try this method,

Point p;
 listView.setOnItemClickListener(new OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> parent, View view,
    int position, long id) {

    showpopupwindows(Activity, p);
  }
}); 

then,

 @Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    int location[] = new int[2];

    show_popup.getLocationOnScreen(location);
    p.x = location[0];
    p.y = location[1];
}

private void showpopupwindows(final Activity context, Point p) {

    LinearLayout viewGroup = (LinearLayout) context
            .findViewById(R.id.popup_menu);

    LayoutInflater layoutInflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);


    Display display = context.getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);

    int popupwidth = (size.x / 2);
    int popupheight =(size.y / 2);

    View layout = layoutInflater.inflate(R.layout.detail_pop, viewGroup);

    final PopupWindow popup = new PopupWindow(context);

    popup.setContentView(layout);
    popup.setWidth(popupwidth);
    popup.setHeight(popupheight);
    popup.setFocusable(true);
    popup.setAnimationStyle(R.style.WindowAnimation);
    popup.setBackgroundDrawable(new ColorDrawable(
            android.graphics.Color.TRANSPARENT));

    popup.showAtLocation(layout, Gravity.NO_GRAVITY, popupwidth,popupheight);

    detail_pop1 = (TextView) layout.findViewById(R.id.detail_pop1);

    detail_pop1.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            Toast.makeText(getContext(), "pop window is opened, Toast.LENGTH_SHORT).show();

        }
    });
}