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>
Related
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'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)
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"
In this android project im creating a default button style.
my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/ButtonStlye123</item>
</style>
<style name="ButtonStlye123" parent="android:style/Widget.Button">
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
my button in a fragment.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:theme="#style/ButtonStlye123"
android:onClick="login" />
In the preview in android studio it looks exactly like I want, but when I run the app on my device the background color is gray ("default button color"). If i change the text color in my styles.xml like:
<item name="android:textColor">#color/ColorPrimary</item>
it changes (also on my device) so the custom style is loading, i tryd different colors (that worked for the text) for the button but it wont change.
Why isnt my background color loading?
Try use AppCompactButton
instead of
<Button
use
<androidx.appcompat.widget.AppCompatButton
that will do the trick
Update: 01/06/2021
Found out that the above will not work on earlier Android versions.
For materiel design Button use
app:backgroundTint="#color/green"
Please Use androidx.appcompat.widget.AppCompatButton instead of Button.
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_id_Login"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#id/textInnputLayout_editText_id_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/Login_screen_button_text"
android:background="#drawable/login_button_style"
android:textAllCaps="false">
</androidx.appcompat.widget.AppCompatButton>
You might be using targetSdkVersion 30 material theme
The solution is change theme.xml style
From
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
To
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
Replace with
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Changing MaterialComponents to AppCompat works for me..
I think you need to change your attribute from "theme" to "style". These files are intended for different things, so are used differently.
Style is used to assign attributes to individual views or components, and Theme is used to apply attributes to the entire app.
So try this instead:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
<!-- This attribute was changed -->
android:style="#style/ButtonStlye123"
android:onClick="login" />
You should also split these different types of XML into the correct files as appropriate (styles.xml and themes.xml - instead of keeping them all in the same file). This is convention, and won't effect the code compilation or execution, but is recommended as a code style.
Use this attribute backgroundTint it will help you. It work for me. Example :
android:backgroundTint="#color/md_orange_800"
if you are using Android Studio Version 4.1 and above (Beta)
check your themes.xml file in values.
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
change the attribute to #null
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#null</item> <!-- HERE -->
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
for other old versions of Android Studio
just change this attribute
<item name="colorPrimary">#color/colorPrimary</item>
to
<item name="colorPrimary">#color/#null</item>
finally set the background of the button to the drawable icon you want.
example:
<Button
android:id="#+id/btnSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher_background" /> <!--the drawable you want-->
You only need to change your App Theme from Theme.MaterialComponents.DayNight.DarkActionBar to Theme.AppCompat.Light.NoActionBar inside styles.xml file
example :
from : style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"
To : style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"
your style should be like this....
<style name="ButtonStlye123" >
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
and in layout
<Button
android:id="#+id/btn3"
style="#style/ButtonStlye123"
android:layout_width="#dimen/sixzero"
android:layout_height="#dimen/sixzero"
android:text="3" />
I am using targetSdk 30 and compileSdk 32 and I am using Button widget. Android Studio version 2021.1.1
In my case, following change worked,
In AndroidManifest.xml, under "application" tag changing "android:theme" from
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
to
android:theme="#style/Theme.MaterialComponents.DayNight.NoActionBar"
I moved to Theme.AppCompat.Light.NoActionBar to remove the title bar. At first I tried to change "style" to "Theme.AppCompat.Light.NoActionBar" inside themes.xml but it didn't work for me.
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.