Changing AlertDialog button background - android

In an app I am developing, all I want to do is change the highlight color of an AlertDialog button. My main source of intelligence is this discussion, but I read pretty much every article about this on StackOverflow as well. The code below runs without crashing, but the highlight color of the button is still the default orange-yellow. Does anybody have an idea what is wrong?
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage(message).setCancelable(true)
.setPositiveButton(getResources().getString(R.string.positive_button_title), new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int whichButton) {
// Do stuff
}
});
// Incredibly bulky way of simply changing the button highlight color,
// but it appears to be the only way we can do it without getting a NullPointerException
AlertDialog dialog = builder.create();
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
#Override
public void onShow(DialogInterface dialogInterface) {
if (Build.VERSION.SDK_INT < 16) {
((AlertDialog) dialogInterface).getButton(AlertDialog.BUTTON_POSITIVE).setBackgroundDrawable(getResources().getDrawable(R.drawable.dialog_button_drawable));
} else {
((AlertDialog) dialogInterface).getButton(AlertDialog.BUTTON_POSITIVE).setBackground(getResources().getDrawable(R.drawable.dialog_button_drawable));
}
}
});
dialog.show();
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/custom_button_background" android:state_focused="true" android:state_pressed="false" />
<item android:drawable="#android:drawable/btn_default" android:state_focused="true" android:state_pressed="true" />
<item android:drawable="#android:drawable/btn_default" android:state_focused="false" android:state_pressed="true" />
<item android:drawable="#android:drawable/btn_default" />
</selector>

Sorry if I don't get your question correctly, but since you are loading the drawable anyway, shouldn't this work for you as well?
How to change colors of a Drawable in Android?

When creating the AlertDialog you can set a theme to use.
Example - Creating the Dialog
AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.MyAlertDialogStyle);
builder.setTitle("AppCompatDialog");
builder.setMessage("");
builder.setPositiveButton("OK", null);
builder.setNegativeButton("Cancel", null);
builder.show();
styles.xml - Custom style
<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#FFC107</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#4CAF50</item>
</style>
In order to change the Appearance of the Title, you can do the following. First add a new style:
<style name="MyTitleTextStyle">
<item name="android:textColor">#FFEB3B</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Title</item>
</style>
afterwards simply reference this style in your MyAlertDialogStyle:
<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
...
<item name="android:windowTitleStyle">#style/MyTitleTextStyle</item>
</style>
This way you can define a different textColor for the message via android:textColorPrimary and a different for the title via the style.

Related

Change Checkbox color of AlertDialog with MultiChoiceItems

I'm trying to change the color of AlertDialog with MultiChoiceItems
Java :
private void displayMultiSelectDialog() {
emoji = getResources().getStringArray(R.array.photo_editor_emoji);
boolean[] checkedItems = new boolean[emoji.length];
AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this, R.style.DialogTheme);
dialogBuilder.setTitle("Select Emoji");
dialogBuilder.setMultiChoiceItems(convertListEmoji(emoji), checkedItems,
(dialogInterface, which, isSelected) -> {
if (isSelected) {
selectedEmoji.add(emoji[which]);
} else {
selectedEmoji.remove(emoji[which]);
}
}
);
dialogBuilder.setPositiveButton("Done", (dialog, which) -> showSelectedColors());
dialogBuilder.create().show();
}
XML :
<style name="DialogTheme">
<item name="android:background">#000</item>
<item name="android:textColor">#586eea</item>
<item name="android:textSize">18sp</item>
<item name="android:textColorPrimary">#586eea</item>
<item name="android:colorAccent" tools:targetApi="lollipop">#586eea</item>
</style>
but I have a problem my AlertDialog background, it's BLACK so the checkbox items look invisible
how to make the checkbox looks like this :
Massive thanks in advance
Try setting a custom theme to your checkbox.
Add style in your styles.xml
<style name="MyCheckBox" parent="Theme.AppCompat.NoActionBar">
<item name="colorControlNormal">#000</item> <!-- normal border color -->
<item name="colorControlActivated">#000</item> <!-- activated color -->
<item name="android:textColor">#FFFF3F3C</item> <!-- text color -->
</style>
and set this style as your checkbox's theme as below:
<CheckBox android:id="#+id/check_agree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="I agree"
android:theme="#style/MyCheckBox"/> <!-- here apply your checkbox style -->
<CheckBox
...
android:buttonTint="#color/tint_color" />
minSdkVersion is 21+ use android:buttonTint attribute to update the color of a checkbox:

Change Dialog Buttons to Clear with ripple effect in styles.xml

I have a simple dialog box with two buttons, Positive and Negative that is taking a simple style layout I have defined in the styles.xml. I want the cancel button to have a clear background but still have user feedback when touching it (like a ripple effect of red). I've tried for 2 days now and no luck. Any input would be great.
Working with Ripple Effect:
My code for the next layout which makes the layout have a clear background for cancel but no ripple effect. But I do get a ripple effect for the Yes:
<style name="AlertDialogThemeTesting" parent="Theme.AppCompat.Dialog.Alert">
<item name="colorControlHighlight">#color/Red</item>
<item name="colorControlActivated">#color/Red</item>
<item name="colorControlNormal">#color/Red</item>
<item name="android:textColor">#color/Black</item>
<item name="android:textColorPrimary">#color/Gray</item>
<item name="android:buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
<item name="android:buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
</style>
<style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
<item name="android:textColor">#color/Black</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
<item name="backgroundTint">#color/Clear</item>
</style>
<style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
<item name="android:textColor">#color/Black</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
<item name="android:backgroundTint">#color/Gold</item>
</style>
Clear Background but no Ripple Effect:
It seems like adding a Clear/White background removes the ripple effect for some reason.
Code for Dialog:
final AlertDialog.Builder alert = new AlertDialog.Builder(PopOut.this,
R.style.AlertDialogTheme);
alert .setTitle("Delete Profile?")
.setMessage("Are you sure you want to delete" + profile)
.setPositiveButton("OK",
new DialogInterface.OnClickListener()
{
public void onClick(DialogInterface dialog,
int whichButton)
{
finish();
dialog.dismiss();
}
})
.setNegativeButton("Cancel", null);
final AlertDialog dialog = alert.create();
dialog.show();
Define your Button like below ,
<LinearLayout
android:id="#+id/test_btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="68dp"
android:background="#drawable/button_effect"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:fontFamily="#font/titilliumweb_bold"
android:gravity="center"
android:text="Test Button"
android:textColor="#color/UcabWhite" />
</LinearLayout>
create button_effect.xml in drawable class like below,
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary" //colour you want the effect
android:exitFadeDuration="#android:integer/config_shortAnimTime">
<selector>
<item>
<color android:color="#android:color/transparent" />
</item>
</selector>
</ripple>
At the same time define setOnClickListner for the Button in your activity or Dialog.
test.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
I have tested this and it works like a charm. Give it a try and let me know if you have any difficulties.
EDIT
Define your Alert Dialog like below. When long press the cancel button you can see the ripple effect. But when you just click it no time to show the effcet as alert is dismiss.
final AlertDialog.Builder alert = new AlertDialog.Builder(this, R.style.AppTheme);
alert.setTitle("Delete Profile?")
.setMessage("Are you sure you want to delete")
.setPositiveButton("OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int whichButton) {
finish();
dialog.dismiss();
}
})
.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
}
});
final AlertDialog dialog = alert.create();
dialog.show();
Button negativeButton = dialog.getButton(DialogInterface.BUTTON_NEGATIVE);
negativeButton.setBackgroundResource(R.drawable.button_mini_oval);
It will help.

Change CheckBox Style inside AlertDialog in Android

I am having troubles changing the chexbox theme of a Alert Dialog. I am not able to change selected checkbox color to my AccentColor.
this is my style code
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkboxStyle">#style/CustomCheckBox</item>
</style>
<style name="CustomCheckBox" parent="android:style/Widget.CompoundButton.CheckBox">
<item name="android:button">#drawable/activated_checkbox</item>
</style>
Selector : activated_checkbox
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- checked -->
<item android:state_checked="true" android:drawable="#color/AccentColor">
</item>
<item android:state_checked="false" android:drawable="#color/White">
</item>
</selector>
and method that shows the AlertDialog.
private void showDialog() {
final CharSequence[] items = getResources().getStringArray(R.array.tipoDescargas);
final boolean[] states = {false, false, false};
AlertDialog.Builder builder = new AlertDialog.Builder(this,R.style.AlertDialogCustom);
builder.setTitle(getResources().getString(R.string.preguntaDescargas));
builder.setMultiChoiceItems(items, states, new DialogInterface.OnMultiChoiceClickListener() {
public void onClick(DialogInterface dialogInterface, int item, boolean state) {
}
});
builder.setPositiveButton("Descargar", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
SparseBooleanArray CheCked = ((AlertDialog) dialog).getListView().getCheckedItemPositions();
if (CheCked.get(0) && CheCked.get(1) && CheCked.get(2))
Toast.makeText(getApplication(), "TODOS", Toast.LENGTH_SHORT).show();
if (CheCked.get(0)) {
Toast.makeText(getApplication(), "Item 1", Toast.LENGTH_SHORT).show();
}
if (CheCked.get(1)) {
Toast.makeText(getApplication(), "Item 2", Toast.LENGTH_SHORT).show();
}
if (CheCked.get(2)) {
Toast.makeText(getApplication(), "Item 3", Toast.LENGTH_SHORT).show();
}
}
});
builder.setNegativeButton("Cancelar", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});builder.create().show();
}
Can anyone help me? Thank you
UPDATE 1
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkedTextViewStyle">#style/CustomCheckBox</item>
</style>
<style name="CustomCheckBox" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:checkMark">#drawable/activated_checkbox</item>
</style>
SOLUTION
I found the solution that display correctly the color.
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:listChoiceIndicatorMultiple">#drawable/activated_checkbox</item>
</style>
and Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkedcheckbox24" android:state_checked="true"></item>
<item android:drawable="#drawable/uncheckedcheckbox24" android:state_checked="false"></item>
</selector>
With this code, icons displays correctly
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:listChoiceIndicatorMultiple">#drawable/activated_checkbox</item>
</style>
and the selector code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/checkedcheckbox24" android:state_checked="true"></item>
<item android:drawable="#drawable/uncheckedcheckbox24" android:state_checked="false"></item>
</selector>
You can make use custom selector for customizing your check box.
<CheckBox
android:text="Custom CheckBox"
android:button="#drawable/checkbox_selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Your Selector class , put it in drawable folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checkedimage" />
<item android:state_checked="false" android:drawable="#drawable/uncheckedimage" />
</selector>
The default multi choice layout that AlertDialog uses for presenting each option is in fact a CheckedTextView. Since this class doesn't extend CheckBox in any way, the android:checkboxStyle reference in your theme will have no effect.
API level 17 added the attribute android:checkedTextViewStyle, which can be used to style CheckedTextView specifically. If your minimum sdk version is set to this, or any higher version, then you could use this approach.
An alternative that, also available on older platforms, is android:listChoiceIndicatorMultiple (there is also an equivalent for single choice items, or perhaps better said: items that visually look like radio buttons, but again, are CheckedTextView in reality). Use this to supply your own drawable that is to be displayed as checkmark (or radio button circle).

Appcompat Alert Dialog Action button background On pressed state

I am trying new AlertDialog from appcompat v7 22.1.1.
It works pretty well (In all android versions) as in image.
Style for AlertDialog is this. (For now I am using hardcoded color values instead of color resources)
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimaryDark">#111111</item>
<item name="colorPrimary">#00ddff</item>
<item name="colorAccent">#0044aa</item>
<item name="colorButtonNormal">#00aaaa</item>
<item name="colorControlHighlight">#00ddff</item>
<item name="alertDialogTheme">#style/AlertDialogTheme</item>
</style>
<style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
<item name="colorAccent">#0044aa</item>
<item name="android:background">#ffffff</item>
<item name="android:textColorPrimary">#000000</item>
<item name="android:windowTitleStyle">#style/MyTitleTextStyle</item>
</style>
<style name="MyTitleTextStyle">
<item name="android:textColor">#0044aa</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Title</item>
</style>
My question is ,
1) how to change statePressed color which is rounded (Gray) in the image ?
2) No pressed color is there in android >= 21 , what is hack for this ?
3) How can I have different colors of action buttons (Is it possible)?
Any help would be great.
You can use style attributes like
buttonBarButtonStyle
buttonBarNegativeButtonStyle
buttonBarNeutralButtonStyle
buttonBarPositiveButtonStyle
Example:
<style name="dialog_theme" parent="Theme.AppCompat.Dialog.Alert">
<item name="buttonBarNegativeButtonStyle">#style/dialog_button.negative</item>
<item name="buttonBarPositiveButtonStyle">#style/dialog_button.positive</item>
</style>
<style name="dialog_button">
<item name="android:textStyle">bold</item>
<item name="android:minWidth">64dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:background">#drawable/dialogButtonSelector</item>
</style>
<style name="dialog_button.negative">
<item name="android:textColor">#f00</item>
</style>
<style name="dialog_button.positive">
<item name="android:layout_marginLeft">8dp</item>
<item name="android:textColor">#00f</item>
</style>
Where dialogButtonSelector is our custom drawable selector.
Unfortunatelly setting background on dialog_button destroy our paddings and margins so I need to set it again.
dialog_button style can inherit through Widget.AppCompat.Button.ButtonBar.AlertDialog but I found that it has missing styles like textStyle bold.
I have the Answer for the 3rd Questions
( How can I have different colors of action buttons (Is it possible)? )
Code:
// Initialize AlertDialog & AlertDialog Builder
AlertDialog.Builder builder = new AlertDialog.Builder(YourActivity.this);
builder.setTitle("AlertDialog Title");
...........
.........
//Build your AlertDialog
AlertDialog Demo_alertDialog= builder.create();
Demo_alertDialog.show();
//For Positive Button:
Button b_pos;
b_pos=Demo_alertDialog.getButton(DialogInterface.BUTTON_POSITIVE);
if(b_pos!=null){
b_pos.setTextColor(getResources().getColor(R.color.YourColor));
}
//For Neutral Button:
Button b_neu;
b_neu=Demo_alertDialog.getButton(DialogInterface.BUTTON_NEUTRAL);
if(b_neu!=null){
b_neu.setTextColor(getResources().getColor(R.color.YourColor));
}
//For Negative Button:
Button b_neg;
b_neg=Demo_alertDialog.getButton(DialogInterface.BUTTON_NEGATIVE);
if(b_neg!=null){
b_neg.setTextColor(getResources().getColor(R.color.YourColor));
}
Happy Coding :)
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setMessage("Title"); builder.setCancelable(true);
builder.setPositiveButton("OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});
builder.setNegativeButton("Cancel",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
dialog.cancel();
}
});
AlertDialog alertdialog = builder.create();
alertdialog.show();
Button nbutton = alertdialog.getButton(DialogInterface.BUTTON_NEGATIVE);
nbutton.setBackground(getResources().getDrawable(R.drawable.btn_press_white_rect));
Button pbutton = alertdialog.getButton(DialogInterface.BUTTON_POSITIVE);
pbutton.setBackground(getResources().getDrawable(R.drawable.btn_press_white_rect));
**btn_press_white_rect.xml**
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/rounded_rect_yellow" ></item>
<item android:state_pressed="false" android:drawable="#drawable/rounded_rect_white" ></item>
</selector>

Style attributes of custom styled AlertDialog

I am trying to style my AlertDialog and I have been able to change most of it through styles and xml declarations... but there are still a few issues:
How do I change the area around the title bar from black to my custom color?
How do I change the outer background to transparent (the outside part that is blue the the shadow drops upon)
How do I change the buttons so they do not overlap the black border around the alert message?
here is the function I have in my RootActivity (my activities extend this one)
public static void showNoConnectionDialog(Context ctx1) {
final Context ctx = ctx1;
LayoutInflater factory = LayoutInflater.from(ctx);
AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(ctx, R.style.SetdartDialog));
builder.setView(factory.inflate(R.layout.alert_dialog, null))
.setIcon(R.drawable.icon)
.setCancelable(true)
.setMessage(R.string.check_wireless_settings)
.setTitle(R.string.no_connection)
.setPositiveButton(R.string.myes, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
ctx.startActivity(new Intent(Settings.ACTION_WIRELESS_SETTINGS));
}
})
.setNegativeButton(R.string.mno, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
return;
}
})
.setOnCancelListener(new DialogInterface.OnCancelListener() {
public void onCancel(DialogInterface dialog) {
return;
}
})
.show();
}
here a snippet from styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.WhiteBackground" parent="android:Theme">
<item name="android:windowBackground">#null</item>
<item name="android:background">#android:color/white</item>
<!-- Dialog attributes
<item name="alertDialogStyle">#style/AlertDialog</item> -->
</style>
<style name="SetdartDialog">
<item name="android:background">#color/sd_blue</item> <!-- MUST HAVE with white bg-->
<!--<item name="android:windowBackground">#color/sd_blue</item> -->
<!--<item name="android:windowBackground">#color/transparent</item> needed with white bg ? -->
<item name="android:windowFrame">#color/transparent</item><!-- not sure what this changes-->
<item name="android:textColor">#android:color/black</item>
<item name="android:windowNoTitle">true</item>
<item name="android:textSize">10sp</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#color/transparent</item>
<item name="android:windowTitleStyle">#style/setwindowTitleStyle</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<!--<item name="android:colorBackgroundCacheHint">#android:color/white</item>-->
</style>
<style name="setwindowTitleStyle">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#color/sd_blue</item>
</style>
</resources>
Also R.layout.alert_dialog
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/screen"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
Create your custom layout with all these attributes you've mentioned. Use Dialog instead of AlertDialog, inflate the layout you have created, use the Dialog object to set the inflated layout. If you haven't been introduced to inflating service, do some research. After you are clear with inflating, remember that all the components of the dialog you access with the View object, that you have created with the inflating. The rest (like click listeners) remains to be done on usual way. Cheers. I hope it helps.
To make custom AlertDialog you should extend DialogFragment

Categories

Resources