I referred to this question: Change Google Places picker Action bar color. But the solution suggested there does not seem to solve my problem and I'm starting to think that I might be doing something else wrong.
I am compiling appcompat-v7:23.0.+ and my current theme in styles.xml is
<style name = "AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#color/black</item>
<item name="actionMenuTextColor">#color/black</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
I remembered to change the theme in the manifest file to use AppTheme as well.
My layout looks like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background = "#color/backgroundGrey"
android:theme = "#style/AppTheme"
tools:context=".PlacePickerActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/AppTheme"
app:popupTheme="#style/AppTheme.NoActionBar"/>
I have no idea why the placepicker isn't picking up the same colors. Does anyone have any ideas? Any criticism is appreciated. Thank you
Related
I have different themes in styles.xml and I have used different background color in each theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:background">#color/transparent</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#android:color/black</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:background">#181818</item>
</style>
<style name="AppThemeLight" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimaryLight</item>
<item name="colorPrimaryDark">#color/colorPrimaryDarkLight</item>
<item name="colorAccent">#color/colorAccentLight</item>
<item name="android:background" >#color/backgroundLight</item>
</style>
xml snippet,
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_main" />
<android.support.design.widget.AppBarLayout
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
When I change the theme, the title background also changed to that color.
I tried using the following in each theme,But it doesn't work.
<item name="android:windowTitleBackgroundStyle">#style/titletheme</item>
And titletheme ,
<style name="titletheme">
<item name="android:background">#00000000</item>
</style>
See the image, the title background is changed with android:background color in that theme.
How to prevent change of the title background color?
Just change one thing and tell me its working or not: remove "android:background" from your theme and add "android:windowBackground". see if this helps. rest leave the same.
I've created a new activity and for some reason, when it is used, it uses a different color in the status bar. What's strange is that in the "design" preview it renders the correct color.
Below are two screen shots, the darker color is the correct color.
Incorrect
Correct
The themes are the same as the other .xml layouts, so I'm having trouble really figuring out where this error is coming from. Below is the code for the layout:
activity_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.brewguide.android.coffeebrewguide.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/myfragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm not sure what other code would be useful to include for diagnosing this.
Edit:
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="DescriptionTextView">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:background">#color/mainBackground</item>
</style>
<!--style for the start button in the clock view layout-->
<style name="AppTheme.Button.Start" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/complimentaryLeft</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the stop button in the clock view layout-->
<style name="AppTheme.Button.Stop" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the reset button in the clock view layout-->
<style name="AppTheme.Button.Reset" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorAccent</item>
<item name="android:textColor">#color/cardview_light_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
I had the same issue. For me it was an issue with a second styles.xml file (still not sure why I had two). The specific line that was causing the issue was:
<item name="android:statusBarColor">#android:color/transparent</item>
I don't see this in your posted styles.xml, but perhaps it will help someone else.
Check your colors.xml for color named primary_dark and change it to be the same to primary, because Android use that(primary_dark) color to colorize status bar.
Managed to programatically set the color using the following line:
getActivity().getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
I would prefer to have this done in the .xml however.
When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my 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>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.
As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.
Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>
For information, I am using Android Studio 2.0 Preview 7, API 23.
Activity that is having the issue
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="in.ezyride.blovia.OfferRide"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/view">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view">
<include
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/basicLayoutAddl"
layout="#layout/content_offer_ride"
/>
</ScrollView>
</RelativeLayout>
But other activities are regular. This happened when I was trying to fix the keyboard covering EditText issue. However I almost solved that, new one raised.
For fixing it, I added scroll view in the above relative layout.
The manifest part of the activity is as follows
<activity
android:name=".OfferRide"
android:label="#string/title_activity_offer_ride"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustPan|stateAlwaysVisible"
android:theme="#style/AppTheme.NoActionBar" />
Other activity where things are normal.
File: styles.xml
<resources>
<!-- 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="md_positive_color">#color/colorPrimary</item>
<item name="md_neutral_color">#color/colorPrimary</item>
<item name="md_title_color">#color/colorPrimary</item>
<item name="md_negative_color">#color/colorPrimary</item>
<item name="md_widget_color">#color/colorPrimary</item>
</style>
<style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
In my case, the problem was because I had two files styles.xml in my project, in both of them had the same name of theme for the activities.
Let me describe it.
This is my activity in the AndroidManifest.xml:
This is my first styles.xml (default):
This is my second styles.xml (V21):
The app in running mode used the second style, it had the problem, because we couldn't see the colorPrimaryDark of the app.
The solution was, comment the last item in the second style.xml:
http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
AppBarLayout is a vertical LinearLayout which implements many of the
features of material designs app bar concept, namely scrolling
gestures.
Children should provide their desired scrolling behavior through
setScrollFlags(int) and the associated layout xml attribute:
app:layout_scrollFlags.
This view depends heavily on being used as a direct child within a
CoordinatorLayout
Use CoordinatorLayout instead of RelativeLayout and instead of ScrollView, Use NestedScrollView.
And change this:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
to:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Since you already have Toolbar, let's imagine you've already added this in your OnCreate:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
For me, the issue was windowTranslucentStatus:
Before:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:colorPrimary">#color/bright_purple</item>
<item name="android:colorPrimaryDark">#android:color/background_dark</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
After:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:colorPrimary">#color/bright_purple</item>
<item name="android:colorPrimaryDark">#android:color/background_dark</item>
</style>
Use this in your styles.xml:
<item name="android:statusBarColor">#color/colorPrimaryDarkBlue</item>
I think I went all over SO for the answer. I think I am being trolled by Android L... Seems no matter what I do that actionbar's background still defaults to colorPrimary
the layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/dl_main"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.farmdog.farmdog.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--layout_behavior="TransparentScrollingViewBehavior"/>-->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--android:theme="#style/AppTheme.AppBarOverlay">-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
</android.support.design.widget.AppBarLayout>
........
and styles.xml (v21)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark wont work on API level < 21 -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/mainBkgndHard</item>
<item name="android:textColor">#color/appTextColor</item>
<item name="android:buttonStyle">#style/ButtonTheme</item>
<!--<item name="android:fitsSystemWindows">true</item> hmmm, primaryColor expands on the statusbar now...-->
<!-- attempt taking actionbar shadow away -->
<item name="elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
<!-- the following line breaks the build-->
<!--<item name="windowContentOverlay">#null</item>-->
<!-- attempt drawing underneath the actionbar - all fail as of 'com.android.support:appcompat-v7:23.1.1.'-->
<item name="windowActionBarOverlay">true</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!--<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">-->
<!--<item name="android:background">#color/colorActionBar</item>-->
<!--<item name="background">#color/colorActionBar</item>-->
<!--<item name="windowActionBarOverlay">true</item>-->
<!--<item name="android:windowActionBarOverlay">true</item>-->
<!--</style>-->
<style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:background">#color/colorActionBar</item>
<!--For compatibility-->
<item name="background">#color/colorActionBar</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
I think you are doing it in the wrong way.I mean, the following Toolbar Hasn't any PrimaryColor or even Background:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
So, this will works on (v21) versions only without any background or PrimaryColor.and as you can see, Toolbar is going to be like your Activity Theme which that has:
<item name="colorPrimary">#color/colorPrimary</item>
With:
Theme.AppCompat.Light.DarkActionBar
And, if you don't set any background color or PrimaryColor, because of:
Theme.AppCompat.Light.DarkActionBar
and your Toolbar, it has to be like that:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
Otherwise, it should crashed(i guess, not sure) because you have a Theme with DarkActionBar and one Toolbar with no background.
I think this is the problem!
Edit:
For completing the answer, since this code was simple anyway, i'll add it here:
Add this also in your AppBarLayout:
android:theme
Inspired from Mohsen answer, I did the following:
Defined a theme named AppTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
In AndroidManifest.xml, I assigned AppTheme as the android:theme
android:theme="#style/AppTheme"
Created another theme for AppBarLayout named CollapsingToolbarTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/transparent</item>
<item name="colorPrimaryDark">#color/dark</item>
<item name="colorAccent">#color/colorAccent</item>
Finally, I assigned the new CollapsingToolbarTheme as the theme of AppBarLayout
android:theme="#style/CollapsingToolbarTheme"