How to create a Pop up as shown in image in Android?

Question

I want to create a pop up in my Android app as shown in the image in the above link. I am building a quiz app, in which I want to navigate between a set of questions. How can I get a pop up as shown?

Answer 1

You can create it with an AlertDialog, doing something like this:

First of all, create a layout where you put what you want to be shon on the AlertDialog. In this case, I'll show the first 5-numbers row (for example, this file layout/example.xml)

layout/example.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/tv1"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/tv2"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/tv3"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/tv4"
        android:layout_gravity="center_horizontal"
        android:textSize="30dp" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/tv5"
        android:textSize="30dp"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

</LinearLayout>

Then invoque this with an AlertDialog, just like this:

In your activity

    LayoutInflater factory = LayoutInflater.from(this);

    final View myCustomView = factory.inflate(R.layout.example, null);

    final TextView tv1 = (TextView) myCustomView.findViewById(R.id.tv1);
    final TextView tv2 = (TextView) myCustomView.findViewById(R.id.tv2);
    final TextView tv3 = (TextView) myCustomView.findViewById(R.id.tv3);
    final TextView tv4 = (TextView) myCustomView.findViewById(R.id.tv4);
    final TextView tv5 = (TextView) myCustomView.findViewById(R.id.tv5);

    /* Set the listeners */
    tv1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /* Do stuff */
             }
            });

    tv2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /* Do stuff */
             }
            });

    tv3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /* Do stuff */
             }
            });

    tv4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /* Do stuff */
             }
            });
    tv5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /* Do stuff */
             }
            });


     final AlertDialog.Builder alert = new AlertDialog.Builder(this);
     alert.setTitle("Goto").setView(textEntryView); /*Remember to use @string */
     alert.show();