I know it is doable with Dialog. But that would be nice to achieve this with AlertDialog. Code so far
<resources>
<style name="MyTheme">
<!-- some code -->
<item name="android:buttonBarStyle">#style/CustomButtonBarStyle</item>
<item name="android:borderlessButtonStyle">#style/CustomDialogButtonStyle</item>
<!-- Working for Android 4+ -->
<item name="android:alertDialogStyle">#style/CustomAlertDialogStyle</item>
<item name="android:alertDialogTheme">#style/CustomAlertDialogStyle</item>
<!-- Does nothing: -->
<!-- item name="android:buttonStyle">#style/CustomDialogButtonStyle</item -->
</style>
<style name="CustomAlertDialogStyle">
<!-- making dialog transparent -->
</style>
<style name="CustomDialogButtonStyle">
<item name="android:textColor">#000</item>
<item name="android:textSize">16sp</item>
<item name="android:background">#drawable/button_drawable</item>
</style>
<style name="CustomButtonBarStyle">
<item name="android:background">#null</item>
<item name="android:dividerPadding">0dp</item>
</style>
</resources>
I'v spent a lot of time in google and found nothing. Now I want to know is that even possible. Thank you.
UPD:
Since I'm using DialogFragment I can style button programmatically.
#Override
public void onResume() {
super.onResume();
((AlertDialog) getDialog()).getButton(Dialog.BUTTON_POSITIVE).setBackgroundColor(0xFFFFFFFF);
}
But I still have no idea, is it possible to apply style to it.
Why don't you just make a custom dialog? It isn't hard and it will give you a lot of flexibility in styling.
First, you'll make an xml layout with your buttons styled how ever you want, then just set the contentView of the dialog to your xml file. You can access your new buttons by id.
Here's a really good, simple tutorial about it.
Related
I'm building an application with React Native, and with very little knowledge of Android. Mostly this is not a problem, but I would like to use native components for alerts. React native provides a way to launch a native alert, but there is no way to style it from React code. So I have resorted to suggestions online about using the /res/values/styles.xml configuration.
It's possible that it's just my lack of knowledge in Android showing here, but I can't seem to get a good solid reference of XML styling attributes, where they go, how they're structured etc.
My problem currently is that my buttons are showing up with background colours, which I don't want. I want to have standard material design text buttons like you would expect on Android. In the image below, "OK" should show up with green text, and no background.
Here is my styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#ffffff</item>
<item name="android:statusBarColor">#16192E</item>
<item name="colorPrimaryDark">#6fca3a</item>
<item name="colorPrimary">#6fca3a</item>
<item name="colorOnSurface">#ffffff</item>
<item name="android:colorBackground">#16192E</item>
<item name="android:colorBackgroundFloating">#16192E</item>
<item name="alertDialogTheme">#style/AlertDialogTheme</item>
</style>
<style name="AlertDialogTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNeutralButtonStyle">#style/NeutralButtonStyle</item>
</style>
<style name="NeutralButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#f00</item>
</style>
<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#f00</item>
</style>
<style name="PositiveButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#00f</item>
</style>
</resources>
And if anyone can point me in the direction for figuring this stuff out myself that would also be great.
EDIT
This is not a question about how to change the style of a button that I have rendered onto the page in code. This question is specifically about how to style the buttons on a built in native android alert dialog. There does not appear to be a way to do it through JavaScript/React, and the fact that I am able to style the background, text colour, and button colour of the alert lead me to believe that it can be done through the styles.xml file, without having to actually write Android code to extend the Alert Dialog.
In native Android using a Material Components theme you can customize globally the alert dialog using:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialAlertDialogTheme">#style/AlertDialogTheme</item>
</style>
with:
<!-- Alert Dialog -->
<style name="AlertDialogTheme" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
<item name="buttonBarNeutralButtonStyle">....</item>
</style>
I have basic knowledge of animations, but how to set globally same animations for opening/closing dialogs within my app?
I have a preference screen with toolbar on top (with some menu items). And clicking on menu, or preferences opens dialogs.
How to set same dialog animations within my app, or at least within certain activity? So whatever dialog I open, it will always be same animation?
You can create a theme for your dialogs with the desired animations and apply it to your app's theme in styles.xml like this:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- Apply your custom dialog theme here. -->
<item name="android:dialogTheme">#style/CustomDialog</item>
<item name="android:alertDialogTheme">#style/CustomDialog</item>
</style>
<style name="CustomDialog" parent="Theme.AppCompat.Light.Dialog">
<item name="android:windowAnimationStyle">#style/CustomDialogAnimation</item>
</style>
<style name="CustomDialogAnimation">
<item name="android:windowEnterAnimation">#android:anim/slide_in_left</item>
<item name="android:windowExitAnimation">#android:anim/slide_out_right</item>
</style>
That will apply the enter and exit animations to all of your dialogs âđģI just tested it myself and it worked, let me know if it works for you đ
Use this in alert dialog,
if (alertDialogBuilder.getWindow() != null)
alertDialogBuilder.getWindow().getAttributes().windowAnimations = R.style.DialogTheme; //style id
In styles.xml define above Dialog Theme like below:
<style name="DialogTheme">
<item name="android:windowEnterAnimation">#anim/slide_left</item>
<item name="android:windowExitAnimation">#anim/slide_right</item>
</style>
Happy Coding :)
I'm trying to style a TimePickerDialog for sdk 21+ (Lollipop). So far I've figured out how to change the default colorscheme in XML:
<style name="TimePickerTheme" parent="#style/Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#ff2d6073</item> <!-- no effect -->
<item name="colorPrimaryDark">#ff2d6073</item> <!-- no effect -->
<item name="colorAccent">#ff2d6073</item>
<item name="android:textColor">#ffD0D102</item>
<item name="android:textColorPrimary">#ffD0D102</item>
</style>
This works but I'm looking for a guide or documentation for all the properties I can change.
AccentColor does the basic color scheme
TextColorPrimary does the text color
But what property, for example, do I need to change the big text in the 'header' of the dialog (where the current selected time is displayed)?
Is there some documentation that lists all the possible things you can change?
After digging through the AOSP theme and style xml files and a lot of googling I made some progress. I am now able to style most(!) things.
So this is a partial answer, not all the way there yet. But here's how far I got:
You can see that I'm now able to theme the header, the un(!)selected time part (minutes in this case), the circle, the numbers in that circle and the 'hand' (or selector). Oh, and the buttons are styled, too.
Let me explain how I got things working, first: the important thing is that you can't override things directly from you app's theme OR from a (alert)dialog theme/style. You have to go from one to the next, so to speak.
Example:
AndroidManifest.xml: Set custom theme for app and/or activity
<activity>
android:theme="#style/Theme.MyTheme"
</activity>
values-v21/styles.xml: (where your custom theme resides): set the timePickerDialogTheme
<style name="Theme.MyTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">#style/TimePickerDialogTheme</item>
</style>
Then below that, define the timePickerDialogTheme and set the timePickerStyle:
<style name="TimePickerDialogTheme" parent="#style/Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->
<item name="android:timePickerStyle">#style/TimePickerDialogStyle</item>
</style>
Now you can define most of the styling here..
<style name="TimePickerDialogStyle" parent="#android:style/Widget.Material.Light.TimePicker">
<item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->
<item name="android:timePickerMode">clock</item>
<item name="android:headerBackground">#ff2d6073</item>
<item name="android:headerTimeTextAppearance">#style/TextAppearance.TimePickerDialogStyle.TimeLabel</item> <!-- TimePicker Time *TextAppearance* -->
<item name="android:numbersTextColor">#ff000000</item>
<item name="android:numbersSelectorColor">#ff2d6073</item>
<item name="android:numbersBackgroundColor">#ffdddddd</item>
</style>
The important line in the above is:
<item name="android:headerTimeTextAppearance">#style/TextAppearance.TimePickerDialogStyle.TimeLabel</item>
Because if you want to style the text (well, time, actually) in the header you need to define the headerTimeTextAppearance:
<style name="TextAppearance.TimePickerDialogStyle.TimeLabel" parent="#android:style/TextAppearance.Material">
<item name="android:textSize">60sp</item> <!-- from -->
<item name="android:textColor">#ffD0D102</item>
</style>
Now, if you take a look at the Widget.Material.TimePicker in AOSP styles.xml (ctrl-f 'timepicker' until you find it) you'll notice a bunch of other properties that you should be able to modify:
headerTimeTextAppearance
headerAmPmTextAppearance
headerSelectedTextColor
headerBackground
numbersTextColor
numbersBackgroundColor
amPmTextColor
amPmBackgroundColor
amPmSelectedBackgroundColor
numbersSelectorColor
Most of these work (as long as you prepend 'android:' for each of them) BUT I could not get 'headerSelectedTextColor' to work. I got a compile error saying something like "could not match property bla bla". Also, if you look at my example above, I hardcoded the textSize for the 'headerTimeTextAppearance' property because the '#dimen/timepicker_ampm_label_size' value threw errors.
In short: most of the things are listed above and how to get them working. But not all is clear. So I'd still see that complete documentation/guide :)
Android TimePicker material style with custom colors below, you can see http://www.zoftino.com/android-timepicker-example for TimePicker usage and styles.
<style name="MyAppThemeFour" parent="Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">#style/MyTimePickerDialogStyle</item>
</style>
<style name="MyTimePickerDialogStyle" parent="#style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="showTitle">false</item>
<item name="colorControlActivated">#ffd600</item>
<item name="colorAccent">#b71c1c</item>
<item name="android:textColorPrimary">#43a047</item>
<item name="android:textColorSecondary">#f44336</item>
</style>
When using version 1.5.0 of the Material Design Library for Android, I've found that I can get most of the theming with using this particular style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTimePickerTheme" parent="ThemeOverlay.MaterialComponents.TimePicker">
<item name="android:textColor">#FF121212</item>
<item name="android:textColorPrimary">#FF121212</item>
<item name="android:textColorSecondary">#FFF9F9F9</item>
<item name="colorAccent">#FF121212</item>
<item name="colorControlNormal">#FF121212</item>
<item name="colorPrimary">#FF121212</item>
<item name="colorSurface">#FFF9F9F9</item>
</style>
</resources>
This will yield in a generic - non colored - Dialog which works for white theme. For dark theme, simply invert the colors.
I've also asked here to have dynamic theming supported for this component.
Example screenshot using the above style:
I am creating a custom Dialog with the following code and the view as follow:
mCountryDialog = new Dialog(getActivity(),android.R.style.Theme_Holo);
However, i want to remove the blue divider and change the background color of the "action bar"
Attempted Result
With reference to stackoverflow, i created a custom dialog style in style.xml
`<style name="LoCountryDialog" parent="android:Theme.Holo">
<item name="android:windowFullscreen">true</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowNoTitle">false</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#color/main_theme_red</item>
`
I would change the background color from black to red but the "Topbar" which shows Time, battery level ,etc was gone and the blue divider line remains here.
It will be great if anyone would share the solution with me, many thanks in advance!
Simply add this line to your Dialog.onCreateView() Method:
getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
http://jgilfelt.github.io/android-actionbarstylegenerator
It will generate all necessary nine patch assets plus associated XML drawables and styles which you can copy straight into your project.
You create a theme with these styles similar like that
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#ff0000</item>
</style>
</resources>
after this you apply your theme to your entire app or individual activities:
for further reading, please see the documentation
I've created a custom theme for my app, and it looks great! However, I've noticed that some default platform dialogs, such as the context menu when long-pressing an EditText doesn't show correctly.
On the left, a context menu through my app. On the right, a standard context menu through a platform app.
Here's my style.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Styled" parent="Theme.Sherlock">
<!-- ... various app styles ... -->
<item name="android:alertDialogStyle">#style/DialogHolo</item>
<item name="android:dialogTheme">#style/DialogHolo</item>
</style>
<style name="DialogHolo" parent="android:style/Theme.Dialog">
<item name="android:fullDark">#drawable/bg_dialog_full</item>
<item name="android:topDark">#drawable/bg_dialog_top</item>
<item name="android:centerDark">#drawable/bg_dialog_middle</item>
<item name="android:bottomDark">#drawable/bg_dialog_bottom</item>
<item name="android:fullBright">#drawable/bg_dialog_full</item>
<item name="android:centerBright">#drawable/bg_dialog_middle</item>
<item name="android:bottomBright">#drawable/bg_dialog_bottom</item>
<item name="android:bottomMedium">#drawable/bg_dialog_bottom</item>
<item name="android:centerMedium">#drawable/bg_dialog_middle</item>
<item name="android:textColor">#ffe6e7e8</item>
</style>
</resources>
Is it possible to either have these dialogs use the default style or get the text to appear in the desired text color?
I never found an elegant solution for this, and instead simply provided a theme defined separately in my style.xml when displaying a custom dialog.