I know it sounds duplicate but it is not.
I have read a whole article about implementing what I want at android studio official site but no help.
My goal is to draw behind the system bars like this photo: ( I also want the hide the system bars which in this picture does not happen )
In other words I want to open my app in an immersive/fullscreen mode which is required in almost every app.
But whenever I try to draw behind the status bar (the bar that shows notification and battery etc.), the status bar and its items reveal themselves meaning the content I drew behind the status bar is obscured by the content of the status bar.
and whenever I try to hide the status bar, my content do not appear behind it. it is like a paradox.
To draw behind the system bars I use this method, as the above link suggests:
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
To hide the system bars I use this:
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());
But whenever I do each of them, it undoes the other one.
Fixed here. Just needed to handle devices with cutouts.
hello #YoloWex you just need to use a Fullscreen theme in your app theme style.xml and make sure the "android:windowFullscreen" is set to true
<style name="Theme.myApp" parent="Theme.AppCompat.Light.NoActionBar.FullScreen">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
Related
With Android Q it seems the back button is gone.
In my app the backbutton is essential to navigating.
Do I need to implement my own button for Android Q and above?
Old devices looks like this. There is the hardware button:
New devices looks like this:
New with Android Q you don't have it. You need to swipe from right to left at the very right. Lots of users don't like that and lots of users from old generation will just not use an app, which they see as buggy. A User needs to confugre a special gesture to get back the button and you still don't see it.
We cannot force the user to do any special configuration to get back the button.
So my question is. Should all apps, which depending on this back-button as it was before implement an own back button?
updated question:
Thanks for mentoining appthemes. But still don't get it. My teststyle looks like this. What should I change now to get back the backbutton?
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.BackbuttonTest" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
https://drive.google.com/file/d/1fniw1q9lx2U8D5CblZHAdBrOl2Oais0T/view?usp=sharing
I want to change the color of my action bar in the dark mode as you can see in the picture which i have attached contains a black action bar behind the "Happy Birthday" !
For Dark Mode, android looks at the styles and themes defined in the themes.xml file under the following directory
res/values-night/themes.xml
By default, in Light Mode the default action bar will use your base application theme's colorPrimary defined inside res/values/themes.xml. Which is #color/white in your case.
By default, in Dark Mode the default action bar will always be black and will not use the colorPrimary defined inside res/values-night/themes.xml
Solution :
We need to force the action bar to use the colorPrimary attribute of our night theme or any separate color from colors.xml.
1. If you want to depend on colorPrimay
Apply this style Widget.MaterialComponents.ActionBar.Primary to your action bar inside your night theme using actionBarStyle attribute
res/values-night/themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HappyBirthday" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Applying style like this -->
<item name="actionBarStyle">#style/Widget.MaterialComponents.ActionBar.Primary</item>
</style>
</resources>
2. If you want to use separate color from color.xml
Create a new style MyActionBarDarkStyle inside res/values-night/themes.xml that extend from Widget.MaterialComponents.ActionBar.Primary
Override the background attribute with any color
Apply the new style to your action bar inside your night theme using actionBarStyle attribute
res/values-night/themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HappyBirthday" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Applying the new style that is defined below -->
<item name="actionBarStyle">#style/MyActionBarDarkStyle</item>
</style>
<!-- Our new style for ActionBar -->
<style name="MyActionBarDarkStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="background">#color/warm_yellow</item>
</style>
</resources>
Since you said, it is in Dark Mode, so you need to handle it also.
First. create a folder named values-night .
And then, you need to COPY colors.xml (from folder values) and PASTE inside the folder values-night.
Finally, change the collor at colors.xml for values-night as for Dark Mode.
If you open Google Calendar on a phone running Android 10 (or later, presumably), you'll see the affordance for the ability to swipe up from the bottom of the screen is still there as a grey bar, but it's rendered over the top of the activity itself.
On my own app, however, this navigation bar at the bottom (if indeed that's what it is) has a grey background and my activity presumably stops at the top of it.
How do I do what Google Calendar has done?
add this line to your app theme:
<item name="android:statusBarColor">#color/colorPrimary</item>
like:
<style name="MainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#color/colorPrimary</item>
<item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>
</style>
I tried to play with colors, but then the border becomes sharper.
My styles.xml
<style name="MyTheme" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<!-- system_bar_background_semi_transparent 40% black -->
<item name="colorPrimary">#66000000</item>
</style>
PS: screenshot from the emulator (Android 9, API level 28), I can not test on a real device.
The look of status bar with android:windowTranslucentStatus is controlled by system. The attribute exists since Kitkat, where it would cause a gradient from black top to transparent bottom. On AOSP Lollipop this is replaced by solid #44000000 but can't be relied upon as different manufacturers implement this differently. E.g. my late Xperia L used the same implementation as Kitkat.
If you want complete control of the status bar color use the following combination of attributes instead:
<!-- Make the app responsible for drawing status bar and navigation bar backgrounds. -->
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
<!-- Change the status bar background to whatever you want. -->
<item name="android:statusBarColor" tools:targetApi="lollipop">#6000</item>
The dark space behind translucent objects is caused by shadow from elevation. Shadow is drawn behind the whole object not just around it. You can remove the shadow from action bar like this:
<style name="MyTheme" parent="AppTheme">
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar.Translucent</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="elevation">0dp</item>
<!-- While at it you can keep normal primary color and change just the action bar background here. -->
<item name="background">#6000</item>
</style>
I'm trying to do what I thought would be simple but after two days of searching for an answer, have given up. I am writing an app and I want the user to be able to switch from the Holo dark theme to the Holo light theme via preferences. Holo Light will be white window background with black text, and Holo dark will be the inverse. I also want them to be able to set the color of the action bar to something they like. Problem I'm having is when I succeed in flipping the background of the main window (by using android:background in styles.xml), the action bar icon and buttons do not take on the color of the action bar. If I use android:windowBackground in styles.xml, the action bar now looks fine and changes color, but the main window background does not. Here is the xml from styles.xml:
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
</style>
<style name="ThemeHoloDark" parent="android:Theme.Holo">
<item name="android:background">#color/background_holo_dark</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColor">#0734f9</item>
<!-- blue -->
</style>
<style name="ThemeHoloLight" parent="android:Theme.Holo.Light">
<item name="android:background">#color/background_holo_light</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColor">#f90707</item>
</style>
The code I am using to switch theme is this:
if (themeLight == true )
setTheme( R.style.ThemeHoloLight);
else
setTheme( R.style.ThemeHoloDark);
actionBar = getActionBar();
setActionBarTheme(this, actionBar );
Here are some screenshots of what I'm talking about. The first couple show the action bar flipping from light to dark when the preferences are selected:
--Apparently I don't have enough reputation points to post images. :(
I have tried pretty much everything I have found on the web but must be missing something. Any help will be appreciated!
You need to create a seperate custom actionBarStyle like this . android:background in the ActionBarStyle will set the background for action bar.
<style name="ActionBarStyle" parent="android:Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/HoloTitleText</item>
<item name="android:background">#color/Red</item>
</style>
and set it to the main custom style .android:background in the ThemeHoloLight will set the background for window.
<style name="ThemeHoloLight" parent="android:Theme.Holo.Light">
<item name="android:background">#color/DarkGreen</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
You can also change the action bar title color like this
<style name="HoloTitleText" parent="android:TextAppearance.Holo">
<item name="android:textColor">#color/white</item>
</style>
Hope this is what your looking for.