Android AlertDialog with rounded corners

Question

I have been trying to make my Alert Dialog with rounded corners but somehow I am not able to. I have tried and I failed. I tried to follow this blog http://blog.stylingandroid.com/archives/271 and made my styles based on that.

Btw, to add to my question now. Some of my new finding. The code in the above link just works fine on 2.3.3 (GB) but does not work at all in ICS . Some change made the code to break.

I want to avoid creating 9 patch images and thus I am using shapes. 9 patch image is the last thing that I will try.I know that android alert dialog style is using 9 patch image. I already looked that up before throwing this question.

/res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?> <resources>      <style name="MyTheme" parent="@android:style/Theme.Dialog">         <item name="android:alertDialogStyle">@style/dialog</item>     </style>   </resources> 

/res/values/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">      <style name="AppTheme" parent="android:Theme.Light" />      <style name="myImageView">          <!-- 3dp so the background border to be visible -->         <item name="android:padding">3dp</item>         <item name="android:background">@drawable/image_drawable</item>         <item name="android:scaleType">fitCenter</item>     </style>      <style name="dialog">         <item name="android:fullDark">@drawable/dialog_body</item>         <item name="android:topDark">@drawable/dialog_title</item>         <item name="android:centerDark">@drawable/dialog_body</item>         <item name="android:bottomDark">@drawable/dialog_footer</item>         <item name="android:fullBright">@drawable/dialog_body</item>         <item name="android:centerBright">@drawable/dialog_body</item>         <item name="android:topBright">@drawable/dialog_title</item>         <item name="android:bottomBright">@drawable/dialog_footer</item>         <item name="android:bottomMedium">@drawable/dialog_footer</item>         <item name="android:centerMedium">@drawable/dialog_body</item>     </style>  </resources> 

/res/drawable/dialog_title.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"     android:insetBottom="-1dp">     <shape android:shape="rectangle">         <solid android:color="#FFFFFF" />         <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />         <stroke android:color="#FFFFFF" android:width="1dp" />     </shape> </inset> 

/res/drawable/dialog_body.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <gradient android:startColor="#FFFFFFFF" android:endColor="#FFFFFFFF"         android:angle="270" /> </shape> 

/res/drawable/dialog_footer.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle" >      <solid android:color="#FFFFFF" />      <corners         android:bottomLeftRadius="5dp"         android:bottomRightRadius="5dp" />      <stroke         android:width="1dp"         android:color="#FFFFFF" />  </shape> 

res/layout/dialog_layout.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     >      <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentTop="true"         android:layout_centerHorizontal="true"         android:layout_marginTop="45dp"         android:text="Large Text"         android:textAppearance="?android:attr/textAppearanceLarge" />      <Button         android:id="@+id/button1"         style="?android:attr/buttonStyleSmall"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@+id/textView1"         android:layout_marginTop="90dp"         android:layout_toLeftOf="@+id/textView1"         android:background="@drawable/button_selector"         android:text="Ok"         android:textColor="@android:color/white"         android:textStyle="bold" />      <Button         android:id="@+id/button2"         style="?android:attr/buttonStyleSmall"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentRight="true"         android:layout_alignTop="@+id/button1"         android:layout_marginRight="48dp"         android:background="@drawable/button_selector"         android:text="More"         android:textColor="@android:color/white"         android:textStyle="bold" />      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_alignParentLeft="true"         android:layout_below="@+id/button1"         android:layout_marginTop="41dp"         android:orientation="vertical" >     </LinearLayout>  </RelativeLayout> 

My code for AlertDialog:

public static void createYesNoDialog(final Context context, String positivebuttonname,             String negativebuttonname, String message, int messagedrawable, String headermessage,             final DialogResponse dr) {         final DialogResponse dialogResponse = dr;         ContextThemeWrapper ctw = new ContextThemeWrapper(context,                 com.gp4ever.worldlogo.quiz.R.style.MyTheme);          AlertDialog.Builder builder = new AlertDialog.Builder(ctw);         LayoutInflater inflater = (LayoutInflater)context                 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);         View layout = inflater.inflate(com.gp4ever.worldlogo.quiz.R.layout.dialog_layout, null);         TextView text = (TextView)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.textView1);         Button buttonOk = (Button)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.button1);         Button buttonMore = (Button)layout.findViewById(com.gp4ever.worldlogo.quiz.R.id.button2);         text.setText(message);         if (messagedrawable > 0) {             text.setCompoundDrawablesWithIntrinsicBounds(messagedrawable, 0, 0, 0);         } else if (messagedrawable == 0)             text.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);         builder.setView(layout);         builder.setCancelable(false);         builder.setTitle(headermessage);         builder.setIcon(android.R.drawable.ic_dialog_alert);         final AlertDialog dialog = builder.create();          buttonOk.setOnClickListener(new OnClickListener() {              @Override             public void onClick(View v) {                 // TODO Auto-generated method stub                 dialog.cancel();             }         });         buttonMore.setOnClickListener(new OnClickListener() {              @Override             public void onClick(View v) {                 // TODO Auto-generated method stub                 dialog.cancel();             }         }); 

}

My current output:

I do not get any rounded corners. I can see that it is different from the usual style. Even though I change radius on my drawable, the corners does not reflect to those changes.

Answer 1

You can do it using the following code:

CustomDialog.java:

public class MainActivity extends Activity{      private static final int ALERT_DIALOG = 1;      @Override     public void onCreate( Bundle savedInstanceState )     {         super.onCreate( savedInstanceState );         setContentView( R.layout.main );          ( (Button) findViewById( R.id.button1 ) )             .setOnClickListener( new OnClickListener()                 {                     public void onClick( View v )                     {                         showDialog( ALERT_DIALOG );                     }                 }             );     }      @Override     protected Dialog onCreateDialog( int id ){         Dialog dialog = null;         if ( id == ALERT_DIALOG )         {             ContextThemeWrapper ctw = new ContextThemeWrapper( this, R.style.MyTheme );             AlertDialog.Builder builder = new AlertDialog.Builder( ctw );             builder.setMessage( "Hello World" )                 .setTitle( "Alert Dialog" )                 .setIcon( android.R.drawable.ic_dialog_alert )                 .setCancelable( false )                 .setPositiveButton( "Close", new DialogInterface.OnClickListener()                     {                         public void onClick( DialogInterface dialog, int which )                            {                                 dialog.dismiss();                            }                         }                      );             dialog = builder.create();         }         if ( dialog == null )         {             dialog = super.onCreateDialog( id );         }         return dialog;      }  } 

dialog_title.xml

<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetBottom="-1dp">     <shape android:shape="rectangle">         <solid android:color="#000000" />         <corners android:topLeftRadius="20dp" android:topRightRadius="20dp" />         <stroke android:color="#7F7F7F" android:width="1dp" />     </shape> </inset> 

dialog_footer.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <solid android:color="#7F7F7F" />     <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp" />     <stroke android:color="#7F7F7F" android:width="1dp" /> </shape> 

Just change the radius amount in:

dialog_title.xml

and

dialog_footer.xml

and that'll generate the following output:

hope this will help you.

---

UPDATE:
I'm not an expert but this is what I found. It may be right or wrong. After many attempts I ended up with the following:

1- ContextThemeWrapper is not applicable for API 14, it works fine on Gingerbread and older versions but with API > 10 it doesn't work.

2- to overcome the above issue and make it work on API > 10 as requested, I replace this line:

ContextThemeWrapper ctw = new ContextThemeWrapper( this, R.style.MyTheme ); AlertDialog.Builder builder= new AlertDialog.Builder( ctw ); 

with this:

AlertDialog.Builder builder= new AlertDialog.Builder( this,R.style.MyTheme ); 

but you need to change:

android:minSdkVersion="8"   

to

android:minSdkVersion="11"  

the result will be as shown in the following image on ICS (API 14):

This image is from a Samsung Galaxy S3 running ICS.

Note: modified project initiated with API 14 SO manifest sdk will be:

<uses-sdk   android:minSdkVersion="11"   android:targetSdkVersion="15" /> 

---

FINAL WORD: As my little knowledge in Android development (I'm not an expert),

1- custom alert dialog runs smoothly in API < 10 but not > 10 with the same Java code,

if we want it to run in ICS with the same effect as appeared in API < 10, we need to modify the code, so it will run on ICS but will not run in any version down API 11.

2- even the result in ICS is not satisfactory, the round corner applies only to the title but not the footer.

---

SECOND UPDATE: FINALLY I get all corners round,

JUST apply padding to dialog_footer.xml as follows:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">     <solid android:color="#7F7F7F" />     <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp" />     <stroke android:color="#7F7F7F" android:width="1dp" />     <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />  </shape> 

Output image:

This image is from a Samsung Galaxy S3 running ICS.

Answer 2

Just one more step from @iDroid Explorer answer

add this line when you build the dialog

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); 

and this will get the rectangle disappear (which actually is transparent) and get a perfect rounded dialog box.