Share via


How to create a custom Alert Dialog Box

Question

Monday, June 24, 2019 6:49 PM

I have a dialog box with OK and Cancel. But I would like a button that says "Set Text" and calls a function, string Func(). Can I do this with the Alert dialog box? Or is there a better way?

All replies (6)

Tuesday, June 25, 2019 2:27 AM

Do you want to achieve it like following GIF?

If so, I create a custom alert dialog, there is Customlayout.axml

 <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<RelativeLayout
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_centerInParent="true"
     >

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:text="Alert"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/dialog_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/dialog_title"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:text="This is message"
        android:textSize="14sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/dialog_btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="cancle"
            android:textColor="#AAAAAA"
            android:textSize="14sp" />

        <Button
            android:id="@+id/dialog_btn_sure"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:text="set text"
            android:textSize="14sp" />
    </LinearLayout>
</RelativeLayout>

There is custom dialog code, I just put it in the mainactivity for test.

         Android.App.AlertDialog alertDialog;
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.activity_main);


        //1.inflate the Customlayout
        View content = LayoutInflater.Inflate(Resource.Layout.Customlayout, null);
        //2. Getting the view elements
        TextView textView = (TextView)content.FindViewById(Resource.Id.dialog_content);
        TextView alertTitle = (TextView)content.FindViewById(Resource.Id.dialog_title);

        Button button1 = (Button)content.FindViewById(Resource.Id.dialog_btn_cancel);

        Button button2 = (Button)content.FindViewById(Resource.Id.dialog_btn_sure);


        //3.create a new alertDialog
         alertDialog = new Android.App.AlertDialog.Builder(this).Create();

        //4. set the view
        alertDialog.SetView(content);

        //5. show the dialog
        alertDialog.Show(); // This should be called before looking up for elements

        //6.Button click event
        button2.Click += Button2_Click;
        button1.Click += Button1_Click;
    }

    private void Button1_Click(object sender, EventArgs e)
    {
        alertDialog.Dismiss();
    }

    private void Button2_Click(object sender, EventArgs e)
    {
        var value= Func();
        alertDialog.Dismiss();
        Toast.MakeText(this,value, ToastLength.Short).Show();

    }

    private string Func()
    {
        string value = "you set the text";
        return value;
    }
}

Tuesday, June 25, 2019 4:21 AM

Thank you very much!!! I won't be able to test it out until Tues evening.


Tuesday, June 25, 2019 9:33 AM

It's ok, you can test it when you feel free.


Saturday, June 29, 2019 8:26 PM

Sorry for the long delay. I was hospitalized. Am OK now. Slow getting back to things.


Saturday, June 29, 2019 8:40 PM

Just starting to take a look at your design. One minor change: It needs an extra at the end.


Wednesday, July 3, 2019 8:15 AM

Ok, thanks for your update.