I tried to implement a "slash screen" and I faced an issue where the image on splashscreen is not really centered, some times it jumps up and sometimes down and sometimes it's well placed.
First of all, the issue:
So here you can see my logo, the first one to show up is the one that is in Red, it's declared like this :
background_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background color -->
<item android:drawable="#color/colorPrimaryDark" />
<!-- Logo at the center of the screen -->
<item
android:width="300dp"
android:height="300dp"
android:gravity="center">
<bitmap android:src="#drawable/ic_launcher_sablier" />
</item>
</layer-list>
And added like this:
styles.xml
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
Then the view with the Blue one is shown, it's declared like this :
activity_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayoutSplash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageViewSplash"
android:layout_width="300dp"
android:layout_height="300dp"
app:srcCompat="#drawable/ic_launcher_sablier" />
<ProgressBar
android:id="#+id/progressSplash"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="12dp"
android:indeterminateTint="#color/grey_light"
android:visibility="gone" />
</LinearLayout>
It's just like the windowBackground is taking into consideration something else (StatusBar height, etc.) and it's not really centered on the screen.
I've tried this:
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
and/or
<item name="android:windowNoTitle">true</item>
and/or
<item name="android:windowContentOverlay">#drawable/background_splash</item>
And nothing is working.
At a moment I said to myself it's ok if it's not working under api 26 so I used that :
v26/style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowSplashscreenContent">#drawable/background_splash</item>
</style>
</resources>
And same issue.
So finally I was thinking to move the inflated view up/or down instead of trying to place correctly the window background, it's not a big problem if it's not exactly centered in the screen so I tried to remove Status bar height, and it was working on some devices but not on others, and etc...
It's working on Nexus 5 with the specific v26/style.xml I shared before, so that is exactly what I want :
And what happen on my Xiaomi MI 8 for example (it also happen on a Pixel 2XL, on some Huawei,...):
So if someone have a solution to center correctly the windowBackground OR to move the inflated view accordingly, I will be happy with both !
Thx to you to help me !
EDIT 13/08:
Here the AppTheme you asked for :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
So, after doing a lot of research, I managed to make it work for API 26 and above.
Let's recap, if you just want to make sure to display an image when launching the application to avoid "the white screen loading", just use:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" 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>
</style>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
</resources>
And set it like this:
AndroidManifest.xml
<activity
android:name=".ui.splash.ActivitySplash"
android:theme="#style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Now if you want to have a flow of flowing screens by displaying an animated progressbar for example, you can do it but only for API 26 and above like this:
v26/style.xml
<resources>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowSplashscreenContent">#drawable/background_splash</item>
<item name="android:windowOverscan">true</item>
</style>
</resources>
The solution is to use android:windowOverscan, I don't really know why, I tried to search for answers in doc, but only thing I found was :
windowOverscan
Flag indicating whether this window should extend into overscan region.
Corresponds to WindowManager.LayoutParams.FLAG_LAYOUT_IN_OVERSCAN.
May be a boolean value, such as "true" or "false".
To make it work in-out of API 26, maybe there are some calculations to be done with the help of this (I admit I have not had the time or the patience to spend more time in solve this problem):
https://developer.android.com/reference/androidx/core/view/WindowInsetsCompat
Enjoy.
(If someone have a better answer to this question, I can check his answer instead of mine ;) )
Related
I started learning Material Design with this video: https://www.youtube.com/watch?v=0hR2skWlb_U&t=183s
After some changes in the styles.xml and a new added styles.xml for v21 (for backward compatibility), My UI Screen is completely black (I have to set background color on my own) and elements like buttons do not work. Check this picture:
The textsize was nearly invisible, I had to make it bigger. But check the buttons - they are not even buttons! Yeah I did not add constraints yet, I just want to show you what's going on.
The xml code for the design should be fine, I just took it from another project of mine, but in case it is important here:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="85dp"
android:layout_height="64dp"
android:text="Button"
android:textSize="20sp"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="97dp" />
<Button
android:id="#+id/button2"
android:layout_width="124dp"
android:layout_height="71dp"
android:text="Button"
android:textSize="20sp"
tools:layout_editor_absoluteX="125dp"
tools:layout_editor_absoluteY="223dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
The important changes - and I think that's what has caused the error - is this: I changed the styles.xml.
styles.xml:
<resources>
<!-- below api 21 -->
<style name="AppMaterialTheme" parents="SuperMaterialTheme">
</style>
<style name="SuperMaterialTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<!-- muss 500 tint sein -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- muss 700 tint sein -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- muss 200 tint sein -->
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
And I added another styles.xml for phones with API 21 or above, here is the structure:
the styles.xml under values-v21 looks like this:
values-v21/styles.xml:
<resources>
<style name="AppMaterialTheme" parents="SuperMaterialTheme">
</style>
</resources>
I have no idea what is going on and would be really thankful if someone can bring some light into the dark.
Thanks for every answer!
Change parent="Theme.AppCompat.Light" in style.xml to parent="Theme.MaterialComponents.Light", and if it's showing error there then check if you have added Material design dependency in your gradle file or not.
If you are using material library then it must needs to extend your app theme with the material theme
<style name="SuperMaterialTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
....
</style>
I am using the elevation attribute for my linearlayout, but the shadow is to bright. I need a darker shadow only for the linear layout.
I added android:spotShadowAlpha to my styles.xml. It worked, but not only for the linear layout. Every View has a darker shadow.
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:ambientShadowAlpha">0</item>
<item name="android:spotShadowAlpha">0.55 </item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
linearlayout in activity_main.xml
<LinearLayout
android:id="#+id/linl"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginStart="55dp"
android:layout_marginTop="208dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="209dp"
android:background="#drawable/custom_buttom"
android:elevation="70dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
Background #drawable/custom_buttom
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="999dp"/>
</shape>
DISCLAIMER: ONLY WORKS CORRECTLY FOR API 28 AND ABOVE
I know this question is kind of old, but i ran into the same problem. This guy has a pretty good solution. Essentially you set android:ambientShadowAlpha and android:spotShadowAlpha to 1. then you can use SetOutlineAmbientShadowColor and SetOutlineSpotShadowColor using a value that contains an alpha value to set it on an item by item basis. For everything else these act as the default shadow colors with system default alpha values:
<color name="defaultOutlineAmbientShadowColor">#0A000000</color> <color name="defaultOutlineSpotShadowColor">#30000000</color>
These are set in styles.xml:
<item name="android:ambientShadowAlpha">1</item> <item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item> <item name="android:spotShadowAlpha">1</item> <item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>
android:ambientShadowAlpha and android:spotShadowAlpha theme attributes values are used at pretty low level, so there is no way to set specific values to these attributes for particular view of hierarchy (even using theme overlay approach).
It is possible to set custom values statically per activity basis:
create custom theme derived from your app theme and override android:ambientShadowAlpha and android:spotShadowAlpha in it:
<style name="Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp.StrongShadows">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
</style>
In manifest set this theme for your activity:
<application
android:theme="#style/Theme.YourApp">
<activity android:name=".ActivityWithDefaultShadows" />
<activity
android:name=".ActivityWithStrongShadows"
android:theme="#style/Theme.YourApp.StrongShadows" />
</application>
The best effort you can make at the moment to have better shadow customization is the approach that #ottermatic suggested in his answer (which of course works only for API level 28 and above). I'll describe it more accuratly:
in themes.xml file in values resources folder define base app theme and app theme derived from based without mentioned attributes:
<style name="Base.Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp" parent="Base.Theme.YourApp"/>
in themes.xml file in values-v28 override app theme for api versions 28 and above:
<style name="Theme.YourApp" parent="Base.Theme.YourApp">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
<item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item>
<item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>
</style>
We set android:ambientShadowAlpha and android:spotShadowAlpha to 1 so they do not influence the shadow color. And instead we can customize shadow by changing android:outlineAmbientShadowColor and android:outlineSpotShadowColor attributes - they have reasonable default values (for default shadows to be similar to shadows on previous api versions) set in app theme but also their values can be overriden for each separate view:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="Button with default theme shadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button2"
android:outlineAmbientShadowColor="#55FF0000"
android:outlineSpotShadowColor="#55FF0000"
android:text="Button with custom red shadow"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintStart_toEndOf="#id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to add some space to the the top of my SwitchPreferenceCompat which is inside of a PreferenceFragmentCompat. Basically I just need some room between it and the top Toolbar, either by expanding its height or with a padding gap without adding a white space that will interfere with the elevation shadow of the Toolbar. I believe I can achieve this by adding a custom style to the SwitchPreferenceCompat, but I am having trouble getting that to work.
Here is what I have tried:
In my styles.xml-
<style name="SwitchPreferenceNew" parent="Preference.SwitchPreferenceCompat.Material">
<item name="android:paddingTop">20dp</item>
</style>
In my app_preferences.xml-
<android.support.v7.preference.SwitchPreferenceCompat
style="#style/SwitchPreferenceNew"
android:defaultValue="false"
android:icon="#drawable/ic_power_settings_new_black_48dp"
android:key="prefsActivate"
android:summary=""
android:title="Activate reminders" />
I think I am just not overriding the style correctly, but I am having trouble finding out how to do it with the SwitchPreferenceCompat. Thank you in advance!
I know this is late but i get result from following code:
my app theme:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="preferenceTheme">#style/my_preference_theme</item>
</style>
my preference theme:
<style name="my_preference_theme" parent="#style/PreferenceThemeOverlay">
<item name="switchPreferenceCompatStyle">#style/preference_switch_compat</item>
</style>
in my PreferenceSwitchCompat i used layout property and you should create new layout for your view
<style name="preference_switch_compat">
<item name="android:layout">#layout/switch_layout</item>
</style>
this is here you must customize your view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/switchWidget"
android:background="#f00"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
hope to help to someone.
I've following style.xml in res/values/ folder:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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:colorBackground">#000000</item>
</style>
and the following layout for my main activity, where I've used style="#style/AppTheme":
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
style="#style/AppTheme" // here I've used It.
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.kaushal28.wakeupplease.MainActivity">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start"
android:id="#+id/startAlarm" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/stop"
android:text="Stop"/>
</LinearLayout>
</RelativeLayout>
I've device with Android 4.2.2 Jelly Bean and emulator has latest Marsh mellow. I think the problem is because of this difference only. I've minimum SDK version 15 for this project.
I tried to change targetSDKVersion to 15 in Build.Gradle. But it couldn't solve my problem.
What should be displayed:
What is displaying:
I'm expecting Black color in background.
Try to use android:windowBackground instead of android:colorBackground
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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:windowBackground">#android:color/black</item>
</style>
Why?
By your screen, I saw that you are trying to set window background. So, the best attribute to that is android:windowBackground.
Your AppTheme is not overriding android:windowBackground.. it was only overriding android:colorBackground.
Since you are not overriding android:windowBackground, Android will use the color defined in your parent theme (Theme.AppCompat.Light.DarkActionBar).
So, Android was using:
<item name="colorBackgroundFloating">#color/background_floating_material_light</item>
and
<color name="background_material_light">#color/material_grey_50</color>
<color name="material_grey_50">#fffafafa</color>
It is almost a white color.
Device vs Studio
I'll be honest.. I'm not totally sure why your device was ignoring android:colorBackground while emulator was using it...
Probably, is the API version or probably, it is just a normal behavior since your device shows the theme applied to an Activity and inside a whole context.. Your device will be always a little bit different from Android Studio Layout Preview tool.
For any instance, I recommend to use android:windowBackground if you want to sent whole window background...
android:colorBackground can affects not only the background of the main window but also of all the components e.g. dialogs unless you override it in the component layout. (this part was retrieved from here)
I want to change the style of my action bar (change the color and text font) and so set up my manifest and style XML as follows:
Manifest:(application)
android:theme="#style/ArbuckleAppTheme"
Style sheet:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="ArbuckleAppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/handler_noorder_startcolor</item>
<item name="android:textColor">#color/handle_noorder_textcolor</item>
</style>
</resources>
The thing is one of my buttons (inside a sliding drawer) becomes much bigger. I tried changing layout values, etc. but to now avail.
Here is the xml surrounding the button:
<Button
android:id="#+id/bCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:text="Cancel"
android:background="#drawable/cancel_singleitem_background"
android:textSize="12dp"
android:padding="5dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"/>
There is an identical button in the main part of my app - which doesn't change shape.
I want to figure out why this one button's shape is getting completely screwed up. Happy to add more code if needed - thought I would start with immediate code first.
I figured it out!
You can remove the parent attribute from the application theme, and this removes the imposition of holo.light formatting across the entire app.
So the code is now:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="ArbuckleAppTheme" >
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/handler_noorder_startcolor</item>
<item name="android:textColor">#color/handle_noorder_textcolor</item>
</style>
</resources>
By the way, the imposition I'm talking about (button becoming bigger) is because Google is trying to impose minimum standards on app development - and that includes buttons that are min. 48px.
I learned a lot from this - hope this is news to some of you so I can give back.