I add datepicker to my application but my problem the shadow for the dialog have white background , use Android 21 for compile .
please help me to remove white background ...
I had the same problem,
First Solution I have done :
I end up giving this theme in the DatePickerDialog builder. What's important is the windowBackground set to transparent.
<style name="Theme.Yp.DatePicker" parent="#android:style/Widget.DeviceDefault.DatePicker">
<item name="android:textColor">#color/color_accent</item>
<item name="android:windowBackground">#color/transparent</item>
<item name="android:gravity">center</item>
</style>
Second and Final Solution :
I finished by using the DatePickerDialog.THEME_DEVICE_DEFAULT_LIGHT that works just fine. We didn't use a lot of styling so it was ok.
You have a "bug" in your themes.xml or styles.xml material design support library is not working properly with dialogs.
So remove the specific dialog code or separate it in different versions.
Trying to explain a little bit further.
Generally when we extend the original application theme we have an themes.xml and/or styles.xml files under the values folder. In there code you will find something like these:
Application theme:
<style name="MyTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- ... other styling values ... -->
<!-- Dialog attributes -->
<item name="dialogTheme">#style/MyTheme.Dialog</item>
<!-- AlertDialog attributes -->
<item name="alertDialogTheme">#style/MyTheme.Dialog</item>
<!-- ... other styling values ... -->
</style>
Custom dialog theme:
<style name="MyTheme.Dialog" parent="#style/Theme.AppCompat.Light.Dialog">
<!-- some styling values here -->
</style>
What needs customization is the parent of the MyTheme.Dialog this Theme.AppCompat.Light.Dialog does not work properly for all android versions it may work for Lollipop but does not work for KitKat, or the opposite.
With a simple run of the app in each platform you can easily find out in which version it works.
Then you can create a different folder for values-v21 and define the parent of the dialog accordingly, so that it work for both versions.
You can apply some other workarounds regarding the customization of the style, in order for this to work.
If you would like further research, or theme customization ideas take a look at the source of android theme.xml here.
It may be late but will help.
You have to add transparent background of you dialog. Here is how you can do this:
DatePickerDialog dpd = new DatePickerDialog(this, android.R.style.Theme_Holo_Dialog, reservationDate, 2014, 1, 1)
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
}
};
for me it didn't help to set the window background to transparent, this made all my datePicker dialog with transparent not only the ugly border.. :(
what helped me is to set also the regular background to the color I wanted and the windowBackground to transparent.
this is my style:
<style name="pickerDialogDark" parent="Theme.AppCompat.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">?attr/dialogBackground</item>
<item name="android:textColor">#color/colorSimpleGreen</item>
<item name="colorAccent">#color/colorGreen</item>
<item name="colorPrimaryDark">#color/colorBlack</item>
<item name="android:textColorSecondary">#color/colorSimpleGreen</item>
<item name="android:headerBackground">?attr/dialogBackground</item>
</style>
Add a new style in the default style (not style-21)
<style name="Your style" parent="#android:style/Widget.DeviceDefault.DatePicker">
<item name="android:textColor">#color/app__primary_color</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:gravity">center</item>
<item name="android:layout_gravity">center</item>
DatePickerDialog dialog = new DatePickerDialog(mContext, android.R.style.Theme_Holo_Light_Dialog_NoActionBar, mDateSetListener, cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DATE));
dialog.getWindow().setBackgroundDrawableResource(R.color.transparency);
dialog.show();
Related
I am getting an error when trying to set theme for alertDialogbox. I am betting white box behind the alertdialogbox. Any idea how i can get rid of it? Here is my code for styles.xml.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowSoftInputMode">stateUnchanged|adjustPan</item>
<item name="android:alertDialogTheme">#style/alertTheme</item>
</style>
<style name="alertTheme" parent="#android:style/Theme.Holo.Light.Dialog">
</style>
In your values res folder, your alertDialogTheme should have the following property:
<!-- In API <21, this gives a funky background. Set to translucent -->
<item name="android:windowBackground">#color/translucent</item>
where #color/translucent is defined in colors.xml as #00000000, which gives opacity of 0.
In your values-v21 res folder, your alertDialogTheme should have the following property:
<!-- In API 21+, this is the dialog background color -->
<item name="android:windowBackground">#color/someColor</item>
This does nothing to alertDialogs in any API as far as I can tell:
<!--<item name="android:colorBackground">...</item>-->
I've only tested this on the Light AppCompat theme.
You do not provide any code, but in any way you should use AppCompat.
Your dialog style should inherit from AppCompat.Dialog
<style name="AlertDialog" parent="Theme.AppCompat.Light.Dialog"/>
and you should only use the AppCompat AlertDialog. Additionally you then pass in your style to the constructor.
new android.support.v7.app.AlertDialog.Builder(context, R.style.AlertDialog).show();
Without AppCompat
If you chose to try without AppCompat, be sure to test on multiple devices. You will need to provide different themes for phones before and after API 21 and handling the android:windowBackground yourself by either setting or hiding it.
Try adding to your alertTheme
<item name="android:background">#null</item>
Here goes a little bit improved answer of samGbos:
values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:alertDialogTheme">#style/SplashScreenDialog</item>
<item name="alertDialogTheme">#style/SplashScreenDialog</item>
</style>
...
<style name="SplashScreenDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#android:color/transparent</item>
</style>
values-v21/styles.xml
...
<style name="SplashScreenDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
</style>
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 am using a time picker dialog in my app. I am also using appcompat to give my app material design theme. The dialog however stays with the default teal accent color (my accent is a light blue).
so in my code I tried setting the dialog theme to my own and it works accept it makes it fullscreen
mTimePicker = new TimePickerDialog(ctx, R.style.AppTheme new TimePickerDialog.OnTimeSetListener() {->}, hour, minute, DateFormat.is24HourFormat(context));
does anyone know how to set the TimePickerDialog to show correctly with my colors instead of the default ones?
This can be easily achieved from xml (5.0+ only)
v21/themes.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme"
parent="MyTheme.Base">
<item name="android:dialogTheme">#style/Theme.Dialog</item> <!-- TimePicker dialog -->
<item name="android:alertDialogTheme">#style/Theme.Dialog</item> <!-- Alert dialog -->
</style>
<style name="Theme.Dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorAccent">#color/...</item>
<item name="android:colorPrimary">#color/...</item>
<item name="android:colorPrimaryDark">#color/...</item>
</style>
</resources>
Edit
Please note that as of Android Support Library 22.1.0 there is a new AppCompatDialog available! http://android-developers.blogspot.de/2015/04/android-support-library-221.html
You can override the colors using:
TimePickerDialog timePickerDialog = new TimePickerDialog(this,
R.style.themeOnverlay_timePicker, //theme overlay
timeSetListener,
hours,minutes,true);
with:
<style name="themeOnverlay_timePicker" parent="#style/ThemeOverlay.MaterialComponents.Dialog">
<item name="colorControlActivated">#color/....</item>
<item name="colorAccent">#color/....</item>
<item name="android:textColorPrimary">#color/.....</item>
<item name="android:textColorSecondary">#color/.....</item>
</style>
If you are using an AppCompat theme use ThemeOverlay.AppCompat.Dialog as parent.
Im using Theme.Holo.Light.DarkActionBar but I dont really like the Light Dialogs/AlertDialogs.
I want to change every Dialog to the dark Holo Dialog.
<style name="CustomDialogTheme" parent="#android:style/Theme.Holo.Dialog">
<item name="#android:background">#9933CC</item>
<item name="#android:textColor">#02FA07</item>
</style>
<style name="Holo.Light.DarkActionBar" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:dialogTheme">#style/CustomDialogTheme</item>
<item name="android:alertDialogStyle">#style/CustomDialogTheme</item>
</style>
Thats what I tried but it has no effect on any Dialogs.
Ok nvm Im stupid its android:alertDialogTheme instead of android:alertDialogStyle. But this messes up the Preference Dialogs, so I just keep using the Light Dialogs.
In AndroidManifest.xml under the application tag, add this line :
android:theme="Holo.Light.DarkActionBar"
The issue is that the styles you're changing android:background and android:textColor are not dialog attributes.
You can see a full list here under Theme.Holo.Dialog on line 1617.
The ones you have to change are probably android:windowBackground and textAppearance