Theming Dialog on API 21 (Lollipop) Android - android

I am currently trying to theme Alert Dialogs on an android app I am making.
I can theme API 9 (min for app) through API 19/20 (KitKat).
However, I cannot theme API 21 (Lollipop) correctly. I do not like the off-white/light-gray color that is the default theme, so I am trying to make the entire background white.
I can only do a certain amount by setting the background of the layout of the dialog to white, and also the button backgrounds to a selector which is white.
There is a strip of space behind the buttons (all across the bottom) that remains the grayish color though. I have tried looking into if I can change it by theming the buttonBarStyle attribute, but haven't had any luck.
Here are some code snippets:
Theme:
<style name="myTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:alertDialogStyle">#style/AlertDialogCustom</item>
</style>
Custom Alert Dialog Theme:
<style name="AlertDialogCustom" parent="#android:style/Theme.Dialog">
<item name="android:bottomBright">#color/white</item>
<item name="android:bottomDark">#color/white</item>
<item name="android:bottomMedium">#color/white</item>
<item name="android:centerBright">#color/white</item>
<item name="android:centerDark">#color/white</item>
<item name="android:centerMedium">#color/white</item>
<item name="android:fullBright">#color/white</item>
<item name="android:fullDark">#color/white</item>
<item name="android:topBright">#color/white</item>
<item name="android:topDark">#color/white</item>
</style>
I have tried some things like this inside the Dialog theme.
Nothing has worked:
<item name="android:background">#color/white</item>
<item name="android:colorBackground">#color/white</item>
<item name="android:buttonBarStyle">#style/CustomButtonBarStyle</item>
CustomButtonBarStyle:
<style name="CustomButtonBarStyle" parent="#android:style/ButtonBar">
<item name="android:background">#color/white</item>
<item name="android:divider">#color/white</item>
</style>
Any help would be appreciated!

Found out I needed to use
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
instead of alertDialogStyle. Don't know why it made a difference, I would have expected either to work, since Style worked all the way up to api 21.
I am posting this answer well after I had this question, and the solution I wound up coming up with (I may have had other issues with above answer, I don't remember) was re-creating the entire dialog using a layout, and having custom buttons in the layout.

Related

Android Activity transparent background

I have a pretty common requirement.
I have an Activity that needs to appear Full-screen on Mobile Devices (Size-Normal), and as a Dialog on Tablet Devices(Size-Large and Size-XLarge).
In both the formats, I have UI-Widgets displayed in the content-view of the Activity such as a Horizontal-ProgressBar, Circular-ProgressBar as a load-indicator etc, which need to follow a consistent Material-Design with Custom-Branded colors etc. I cannot forgo this requirement.
I have defined custom-styles based on default Android Themes and Styles, and use them across the App for all Activities. Following are the custom-themes.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:colorPrimary" tools:ignore="NewApi">
#color/light_black
</item>
<item name="colorPrimary">#color/light_black</item>
<item name="android:colorAccent" tools:ignore="NewApi">#color/sapphire</item>
<item name="colorAccent">#color/sapphire</item>
<item name="android:colorBackground">#color/primary_background</item>
<item name="android:textColorPrimary">#color/title_color</item>
<item name="android:colorButtonNormal" tools:ignore="NewApi">#color/sapphire</item>
<item name="colorButtonNormal">#color/sapphire</item>
<item name="android:colorForeground" tools:ignore="NewApi">
#color/title_color
</item>
<item name="android:titleTextStyle">#style/toolbar_title</item>
<item name="android:navigationIcon" tools:ignore="NewApi">?android:attr/homeAsUpIndicator</item>
<item name="navigationIcon">?android:attr/homeAsUpIndicator</item>
<item name="android:colorControlNormal" tools:ignore="NewApi">#color/white</item>
<item name="colorControlNormal">#color/white</item>
</style>
<style name="AppTheme.Light" parent="AppTheme">
<item name="android:windowBackground">#color/white</item>
</style>
<style name="AppTheme.Dialog" parent="AppTheme.Light">
<item name="android:windowBackgroundFallback" tools:ignore="NewApi">
#android:color/transparent</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundFloating" tools:ignore="NewApi">
#android:color/transparent</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">false</item>
<item name="windowActionModeOverlay">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowClipToOutline" tools:ignore="NewApi">false</item>
<item name="android:windowTitleStyle">#null</item>
<item name="android:windowTitleBackgroundStyle">#null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:windowEnableSplitTouch">true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:fillViewport">true</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.2</item>
</style>
I use the AppTheme as the default theme across all Activities in the App, and AppTheme.Dialog for the specific Activity described above only for Tablet Devices. The Activity does appear as a Floating-Dialog window centered in the Tablet Screen, dismisses when touched outside like a typical Dialog, everything is good, but the problem is that the Activity's window-background is like pitch-ink-black.
My requirement is that the Activity as a Floating-Dialog in Tablet Devices should have a Transparent Background showcasing the previous activity window-content possibly dimmed and darkened.
How do I achieve this, without having to use Theme.Dialog or Theme.Translucent, as I said before, I need the Material-Design specs for the UI-Widgets not to change from the original "AppTheme" style.
I also will need to re-use a lot of custom private methods declared in the Activity class, so loading the content-view layout-file into a Dialog instance is most definitely not preferred.
Oh, btw, compileSdkVersion is latest at 24, minSdkVersion is 16 and targetSdkVersion is 24, buildToolsVersion is also latest at 24.0.1, but that's a different concern altogether.
If you are using Fragments, then remember not to replace the new fragment but add it on top of the previous one and define the theme with background color as transparent.
If you are using activities, just use transparent themed background for the activity or dialog whichever you are using.
So, I finally figured.
I had declared "AppTheme.Light" as the default-theme in the Android Manifest for the same Activity since it was supposed to appear full-screen with a White-Opaque background in Mobile Devices, while the same Activity was supposed to appear as a Floating-Dialog in Tablet Devices, so I was setting the Theme 'Programmatically' to AppTheme.Dialog within the Activity's life-cycle.
I should be doing the same in reverse. I should declare the applicable theme in the Android Manifest file for Tablet Devices, and rewrite all of those Floating-Dialog properties to a Full-Screen layout-mode when the Device screen-size is Normal or Small.

Custom Android appcompat Actionbar: how to remove bottom border on v11+ devices

I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]
Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.
Screen shots (Theme.AppCompat.Light/Theme.AppCompat):
My theme (same in values folder minus the android prefacing):
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).
What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link
My final values-v11/themes.xml -
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
If user2545146 answer doesn't work on lollipop.
call setElevation on the actionbar from the activity.
getSupportActionBar().setElevation(0);
The only thing that worked for me was
AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);
api >= 21 only

ActionBarSherlock casues distortion of other views and it doesn't display correctly

I use the newest ActionBarSherlock extension of the support library in my application. I came across a weird appearance of the views and action bar itself when I ran an app on emulator 4.2 and device with android 4.2 Please take a look at the screenshots from the emulator. We can see that blue line appears in every line separator in the ListView and underline the home icon.
Also the little right arrow is underline and not scaled properly as well.
And to put that in perspective, it display well in emulator with android 2.2
The way I use the Theme is:
ManifestFile.xml:
android:theme="#style/AppThemeWithoutTitle"
and styles.xml:
<style name="AppThemeWithoutTitle" parent="Widget.Sherlock.ActionBar">
<item name="actionBarStyle">#style/MyActionBarWithoutTitle</item>
<item name="android:actionBarStyle">#style/MyActionBarWithoutTitle</item>
</style>
<style name="MyActionBarWithoutTitle" parent="Widget.Sherlock.ActionBar">
<item name="android:displayOptions">useLogo|showHome</item>
</style>
How can I solve this issue?
Widget.Sherlock.ActionBar isn't a theme, it's a style. The first clue is it starts with Widget. The convention for themes in Android is to start it with the word Theme or at least put the word Theme in the name of the style.
The style you overrode and tried to use as a Theme is the style assigned to actionBarStyle which is the very thing you are trying to override.
You need to have an actual theme as your parent, then, and only then can you override actionBarStyle and have it work.
<style name="MyAppTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/MyActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
<style name="MyActionBarTheme" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/bg_striped</item>
<item name="android:background">#drawable/bg_striped</item>
<item name="backgroundSplit">#drawable/bg_striped_split</item>
<item name="android:backgroundSplit">#drawable/bg_striped_split</item>
</style>
You can find all the available themes you can override here.

Styling ActionBar dropdown menu

I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.
I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio
Try setting itemTextAppearance. That should achieve what you want.
I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>
My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.

Theme.Holo.Light.DarkActionBar on Honeycomb

I've an app that would run on both ICS, honeycomb. For both these flavors, I wish to keep same theme: Theme.Holo.Light.DarkActionBar which is SDK >=14.
I created a custom style:
<style name="ActionBar.Dark" parent="#style/ActionBar">
<item name="android:background">#color/actionbar_background_dark</item>
</style>
<style name="Holo.light.dark.actionbar" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar.Dark</item>
<item name="android:titleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionBar.Title</item>
<item name="android:subtitleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:windowActionBarOverlay">false</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_transparent_light_holo</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_transparent_dark_holo</item>
<item name="android:homeAsUpIndicator">#drawable/ic_ab_back_holo_dark</item>
</style>
But this does only the half job, the dropdown spinner has white background with white text and all window titles are black text on black background.
How do I know of all the attributes that I should set to achieve full Theme.Holo.Light.DarkActionBar
I would suggest taking a look at the Sherlock ActionBar. Under the library folder, there is a code intended to make the ActionBar work on versions prior to honeycomb. The guy had to set each of the ActionBar's attributes, so it could be handy exploring it. Look at the abs__styles.xml under the values folder.
Hope it helps and good luck =)

Categories

Resources