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.
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 developing an app where it will be possible to switch between night and day mode. To do that I want to set theme for ConstraintLayout so it's children will inherit this theme, but they don't...
I mean particularly the TextView color, even if I set the ConstraintLayout theme where textColor attribute is light, the TextView stays dark.
Anyone knows what it is going on? Or I'm doing something wrong?
Theme is described in styles.xml, I've tried setting other two attributes - textAppearance and textViewStyle, none of them work. I've also tried setting this in styles-v21 it didn't work. But when I set this theme directly in TextView, it does work. But I want to avoid spending so much time changing all TextViews manually, also don't want to waste processor time calling findViewById on all views...
This is the parent ConstraintLayout attributes :
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_constraint_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/drawerColorDark"
android:gravity="bottom"
android:theme="#style/AppThemeDark.Drawer">
One of the TextViews :
<TextView
android:id="#+id/drawer_all_articles_text"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:gravity="center"
android:text="All Articles"
android:textSize="18sp"
app:layout_constraintStart_toEndOf="#+id/drawer_all_articles_icon"
app:layout_constraintTop_toTopOf="parent" />
And the styles code (not much cause still trying to move forward with inheritance on this example...) :
<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppThemeDark.Drawer" parent="AppThemeDark">
<item name="android:textColor">#color/drawerTextDark</item>
<item name="android:textAppearance">#color/drawerTextDark</item>
<item name="android:textViewStyle">#color/drawerTextDark</item>
</style>
<style name="AppThemeDark.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Many Thanks in advance,
I am trying to create a button whose text color is the colorAccent and whose background color is the default background color.
It looks like this:
I have tried default styles, but non of them have worked. Currently I have something like this but doesn't work:
styles.xml :
<style name="AppTheme.ButtonRaised" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
And layout:
<Button
app:theme="#style/AppTheme.ButtonRaised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date" />
And I am getting something like this:
I am not getting any effect of style or theme here. I have also tried with style tag, but it doesn't work.
apply theme with a style like this
<style name="ThemeButtonBlue" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
I am also struggling to do this effect. I could achieve something similar, but I don't know if its "material design approved".
I set the style to their button borderless colored and the elevation to 2dp because on material design they say that "Raised buttons have a default elevation of 2dp". But they don't give you xml layout examples which is annoying -_-
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
style="#style/Base.Widget.AppCompat.Button.Borderless.Colored"
android:elevation="2dp"
android:text="Button"/>
Keep in mind that the elevation tag does not show a shadow pre Lollipop devices.
sometring strange is happening in my app, when I try to change color of ActionBar by
<style name="CustomAppTheme" parent="Theme.AppCompat.Light">
<item name="android:background">#ff00</item>
<item name="android:textColor">#DCDCDC</item>
</style>
is also changes color of my ListView and in other activity changes whole content below. Why is that? How to fix this?
ListView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/listviewbackground"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:longClickable="true"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>
The documentation is pretty straight forward when it comes to overriding the default color & styles of the action bar. I'm assuming that you're probably making changes to your application's resource styles file at res/values/styles.xml. I'm also assuming that in your AndroidManifest.xml, you have the following property applied to the application tag:
android:theme="#style/AppTheme"
Again, from the documentation:
A style is a collection of properties that specify the look and format for a View or window. A style can specify properties such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.
So, when you change that styles.xml file, you're inadvertently changing the background color for all elements in your app.
Follow the instructions from the link 1, and you'll be good. Specifically,
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
</style>
</resources>
I have two themes that I switch back and forth between in my Android application. In some places, I have TextViews that I want to remain the default color. In other places, I want them to be another color (let's say orange). When changing themes, I'd like only the TextViews that were previously orange to become blue.
Is there a way to do this simply in Android? I had something in mind such as a class tag in html/css but can't seem to find anything.
EDIT: To clarify what I was referring to with the html/css equivalent:
<div>This text is black</div>
<div class="redDiv">This text is red</div>
.redDiv {
color:red;
}
Let's say you have two themes in your application: MyFirstTheme and MySecondTheme:
<style name="MyFirstTheme" parent="android:Theme">
<item name="android:textViewStyle">#style/MyFirstTheme.TextView</item>
[...]
</style>
<style name="MySecondTheme" parent="android:Theme">
<item name="android:textViewStyle">#style/MySecondTheme.TextView</item>
[...]
</style>
The textview styles defined in your styles.xml could look like:
<style name="MyFirstTheme.TextView" parent="#android:style/Widget.TextView">
<item name="android:textColor">#android:color/black</item>
[...]
</style>
<style name="MySecondTheme.TextView" parent="#android:style/Widget.TextView">
<item name="android:textColor">#color/orange</item>
[...]
</style>
<style name="PersistentTheme.TextView" parent="#style/MyFirstTheme.TextView">
<item name="android:textColor">#color/red</item>
</style>
So when you have a layout with two TextViews, you can have the one completely follow the active theme by not setting anything extra to it, and you can apply other appearance to your other TextView instance by specifying a style attribute for it:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- This textview will change text color when other style applied -->
<TextView
android:id="#+id/tv_styledependent"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- This textview will always have the same (red) text color -->
<TextView
android:id="#+id/tv_persistent"
style="#style/PersistentTheme.TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tv_styledependent" />
</RelativeLayout>