Develop Reference

My UI doesn't work anymore after applying Material Design

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>

Android - spotShadowAlpha only for linearlayout

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>

Centered image on windowBackground is different than on an inflated layout

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 ;) )

Background color in Dialog does not show properly

I used Dialog in my app and sets its layout from xml. When I use the below code it works properly (background color).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/size40"
android:orientation="vertical"
android:background="#color/colorPrimary">
</LinearLayout>
But when I use the below code it does not work properly. I tested it in Hwawei TIT-AL00 (Android version 5.1)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/size40"
android:orientation="vertical"
android:background="?android:colorPrimary">
</LinearLayout>
Its background color does not show. My project minSdkVersion is 21. I need to use
android:background="?android:colorPrimary
because of my some requirements. Dialog has no custom style and The style I used in activity class is:
<style name="AppTheme" parent="Theme.AppCompat.DayNight.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:windowNoTitle">true</item>
</style>

Please try 'android:background="?attr/colorPrimary'

Changing color of ListView

First of all, this is the code I use for ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:contentDescription="#string/top_layer"
android:id="#+id/top_layer_Q1"
android:layout_width="fill_parent"
android:src="#drawable/top_bar"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/Quotelist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
In order to test the code, I created a temporary project in Studio, and the Output I got was Black text in white background. And when I added the same code to the project I am working, I get the output with a Black Background and white text.
Though I did not change any code, what might be causing this? What is the best fix for this?
Thanks,
EDIT1
Here is the styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>

Try this:
Add this to your style.xml
<style name="ListStyle" parent="#android:style/Widget.ListView">
<item name="android:textColor">#FF000000</item>
<item name="android:background">#FFFFFFFF</item>
</style>
Then set it as the style for your listView
style="#style/ListStyle"