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.
Related
I have a specifix view that needs to use windowIsTranslucent = true. This generates some problems that I'm having hard time to understand... the specific one that I'm trying to resolve now is why the transition in/out changes to slide up / down only because of this style.
I want to use windowIsTranslucent = true but with the standard activity transition animation.
These are relevant styles
<style name="AppTheme.AppCompat.Translucent" parent="AppTheme">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/opacity_background</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#07819A</item>
<item name="android:actionMenuTextColor">#color/White</item>
<item name="android:windowDisablePreview">true</item>
<item name="colorPrimary">#07819A</item>
<item name="colorPrimaryDark">#006471</item>
<item name="android:fastScrollTextColor">#ffffff</item>
<item name="android:dropDownListViewStyle">#style/FilterSpinnerStyle</item>
<item name="android:actionOverflowButtonStyle">#style/AppTheme.OverFlow</item>
<item name="android:autofilledHighlight">#android:color/transparent</item>
</style>
What I have tried witout success:
Added this line to AppTheme.AppCompat.Translucent
<item name="android:windowAnimationStyle">#+android:style/Animation.Translucent</item>
Added this line to AppTheme.AppCompat.Translucent
<item name="android:windowAnimationStyle">#+android:style/Animation.Activity</item>
Used CurrentActivity.OverridePendingTransition(someId, someId); and it works. The problem is that animation is a little laggy when I try to mimic standard animation and I also have the problem to use the correct animation for each version of Android.
I tried some other things that I don't have at the top of my head right now... the thing is that nothing seems to be enough :(
You can override the default transition animation for your app by declaring a custom style with your desired animations like this:
<style name="CustomAnimation" parent="#android:style/Animation.Activity">
<item name="android:activityOpenEnterAnimation">#anim/your_desired_animation</item>
<item name="android:activityOpenExitAnimation">#anim/your_desired_animation</item>
<item name="android:activityCloseEnterAnimation">#anim/your_desired_animation</item>
<item name="android:activityCloseExitAnimation">#anim/your_desired_animation</item>
</style>
And then by setting it to your base theme you can set the custom transition animation for your app
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<!-- Customize your theme here. -->
...
<item name="android:windowAnimationStyle">#style/CustomAnimation</item>
</style>
Thus you can declare your own transition animations. Even if the standard animations not working, you can always make your own like the standard one.
My App uses the AppCompat Library and is targeting v23 and minSDK is v16. I currently have an activity with a Navigation Drawer Fragment and I switch between 3 different fragments on my Main Activity.
My AppCompatToolbar color is blue, and my Activity background is gray.
On API 16: My Navigation Drawer icon (set as home button) and any MenuItem that is inflated from my fragments have a gray background around them on top of my blue toolbar.
On API 17+: Everything looks good. icon and MenuItems use the toolbar color.
Unfortunately I can't show pictures because I don't have enough rep but you get the idea.
I'm not doing anything funky in onPrepareOptionsMenu or onCreateOptionsMenu.I could not find any information on this and it's only happening on devices running API 16. Heres the relevant themes from styles.xml I'll paste whatever code is necessary.
<style name="AppThemeWhite" parent="AppTheme.Base">
<item name="android:textColor">#ffffff</item>
<item name="android:textColorSecondary">#FFFFFF</item>
<item name="android:textColorTertiary">#FFFFFF</item>
<item name="actionMenuTextAppearance">#style/ActionMenuItemWhite</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:editTextStyle">#style/LightEditText</item>
<item name="alertDialogTheme">#style/CustomAlertDialog</item>
<item name="colorAccent">#android:color/white</item>
<item name="colorControlHighlight">#color/appButtonHighlightColor</item>
<item name="android:textSize">#dimen/material_text_button</item>
<item name="colorButtonNormal">#color/appButtonColor</item>
<item name="colorPrimary">#color/appToolbarColor</item>
<item name="colorPrimaryDark">#color/appStatusBarColor</item>
<item name="android:dividerHeight">1px</item>
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
<!-- Customize your theme here. -->
</style>
<style name="ToolbarTheme" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:actionMenuTextAppearance">#style/ActionMenuItemWhite</item>
</style>
<style name="ActionMenuItemWhite" parent="Widget.AppCompat.Light.ActionButton">
<item name="actionMenuTextColor">#color/appTextColor</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:textSize">#dimen/material_text_menu</item>
</style>
I might be misunderstanding here, but why are their MenuItems being inflated from Fragments? Normally the "v7.appcompat.toolbar" inflates it's MenuItems in the Main Activity.
Also just FYI, but in the recent past when I have tried to change some of the "ToolBar" settings by changing the "ActionBar" settings in the styles/themes, I have had mixed and unreliable results myself.
Why did you choose 16 as your minimum? It can be very tricky to have your App be backwards compatible starting from API 23 because there is a lot of code that doesn't work the same in Android when comparing pre-API 21 to post-API 21.
Sometimes styling needs both android:name items and name to support older androids and custom widgets... Example:
<item name="android:editTextStyle">#style/LightEditText</item>
<item name="editTextStyle">#style/LightEditText</item>
Also you can try to add this to your AppTheme.Base style:
<item name="actionButtonStyle">#style/ActionMenuItemWhite</item>
Please try change appcompat-v7 library version
compile 'com.android.support:appcompat-v7:23.1.1'
Bcoz not support v7:23.2+
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.
I want to get rid of the white color during the short period when my app is launching but the content isn't displayed, yet.
My main activity is using a style (from the Manifest) that extends #style/Theme.Sherlock.Light.DarkActionBar with the background set to <item name="android:background">#android:color/transparent</item>. Nowhere in my layout do I use a white background color, yet it appears for a brief moment during app launch.
In the HierarchyViewer I exported the layers and checked back that there is really no white solid in the layout hierarchy.
What setting controls the background color before the layout is drawn? Thanks.
There's another background attribute in your theme - windowBackground, and you implicitly set it to white by inheriting your style from #style/Theme.Sherlock.Light.DarkActionBar (notice the .Light. part in the name).
You can either use dark version of theme or set it explicitly by including windowBackground in your style definition:
<item name="android:windowBackground">#color/your_color</item>
<style name="Theme.Transparent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Or you can use drawable. I created a theme for my spash screen like as below :)
<style name="SceneTheme.Light.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SceneTheme.Light.NoActionBar.Transparent.StatusBar" parent="SceneTheme.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowBackground">#drawable/bg_splash</item>
</style>
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.