Henrykvdb
Henrykvdb

Reputation: 330

Setting and updating custom views for AlertDialogs

All the Dialogs in my app are constructed with AlertDialog except for my Bluetooth-picker dialog. My goal is to create an AlertDialog for that as well.

Problem:

If I want to add a spinning progress bar to the top right I'd need to use the .setCustomTitle(view) method of AlertDialog's Builder. This works, but I'd like to use the default AlertDialog title style for this title as well, but I'm unsure how to do that.

So basically I want the blue text of the second screenshot to appear exactly like the black one in the first one. I'd prefer to do this dynamically instead of just finding out the exact values AlertDialog uses and hard code those.

My attempts:

I looked through the AlertDialog's source and found that "The actual style that an AlertDialog uses is a private implementation". However I also found out that they use R.attr.alertDialogTheme as attribute and I can get the resourceId of the theme

I tried creating a TextView with that resourceId but that didn't work (TextView apeared like it would unstyled).

Default AlertDialog title style:

Default AlertDialog title style

My current title:

My current title

You can recreate the Dialogs shown above with the following code: https://gist.github.com/anonymous/34edc1afbdb7e9d10d9adbda63d4cd8c

The xml's required are: content.xml and title.xml (and colors.xml and styles.xml )

Upvotes: 4

Views: 1277

Answers (1)

Brandon Zamudio
Brandon Zamudio

Reputation: 2873

You already have defined the textColor android:textColor="#33B5E5" of your textView in your title.xml. Just change it to the color you want.

Here's an example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="24dp"
    android:paddingRight="24dp"
    android:paddingTop="9dp"
    android:paddingBottom="18dp">
<TextView
    android:id="@+id/customTitle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Custom title view"
    android:textColor="#000000"
    android:textSize="24sp"
    android:layout_centerVertical="true"/>

<TextView
    android:id="@+id/anotherText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/customTitle"
    android:paddingTop="9dp"
    android:text="Another TextView"
    android:textColor="@android:color/holo_purple" />

    <LinearLayout
        android:id="@+id/lin_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:orientation="vertical"
        android:layout_centerVertical="true">

        <ProgressBar
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/loading_spinner"
            android:visibility="invisible"/>

    </LinearLayout>

</RelativeLayout>

enter image description here

To update the view dynamically:

LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

        final View yourTitleView = inflater.inflate(R.layout.title, null);
        TextView yourTitle = (TextView) yourTitleView.findViewById(R.id.customTitle);
        yourTitle.setText("Your new title text");//Dynamical text
        yourTitle.setTextColor(Color.parseColor("#ffa000")); //Dynamical color

        //Your AlertDialog
        new AlertDialog.Builder(this)
                .setCustomTitle(yourTitleView) //The title's TextView's style should be the
                // same as the the one of the dialog normal AlertDialog's Title Style (see example above)
                .setView(inflater.inflate(R.layout.content, null))
                .setPositiveButton("Start", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.dismiss();
                    }
                })
                .setNegativeButton("Close", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.dismiss();
                    }
                })
                .show();

Don't forget to define good ID's to your views.

For another misunderstandings

To format text wihtout custom dialogs just use an Html function

Html.fromHtml("<font color='#000000'> Your black text </font>")

Example:

 new AlertDialog.Builder(YourActivity.this)
         .setTitle(Html.fromHtml("<font color='#000000'> Your black title </font>"))
         .setView(yourView)
         .setPositiveButton("Ok", new DialogInterface.OnClickListener() {
              public void onClick(DialogInterface dialog, int which) {
                      //Stuff to do
                   }
              })
         .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
              public void onClick(DialogInterface dialog, int which) {
                      //Stuff to do
                      dialog.dismiss();
                   }
               })
         .show();

Hope it helps.

Upvotes: 3

Related Questions