I'm trying to learn Android, and I'm attempting to make a navigation drawer.
My goal is to achieve something like this:
But my result looks like this:
This is my style.xml:
</style>
<style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/md_deep_purple_500</item>
<item name="colorPrimaryDark">#color/md_deep_purple_700</item>
<item name="colorAccent">#color/md_white_1000_50</item>
</style>
<style name="ToolbarTheme" parent="AppTheme">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
<style name="NavigationViewTheme" parent="AppTheme">
<item name="textAppearanceListItem">#style/TextAppearance.AppCompat.Body2</item>
<item name="android:icon">#style/Theme.AppCompat.Light</item>
</style>
</resources>
This is my navigation_drawer_header:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="16dp"
android:gravity="bottom"
android:theme="#style/ThemeOverlay.AppCompat.Light"
>
</FrameLayout>
Can anyone suggest to me how these should be corrected?
This is because the NavigationView add tint to the icons.
To avoid this you can add
navigationView.setItemIconTintList(null);
You can add color state list. Get a look into this
Related
I am trying to make my textview textColor white in my AppTheme but it appears as black in my fragment. The fragment has been set to have a background like so:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="?android:attr/windowBackground"
The page looks like this now:
The theme looks like this:
<resources>
<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>
<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/whiteText</item>
<item name="android:buttonStyle">#style/MyButton</item>
<item name="android:statusBarColor">#android:color/black</item>
<item name="android:colorBackground">#2d314d</item>
<item name="android:textColorPrimary">#color/whiteText</item>
<item name="android:textColorPrimaryInverse">#android:color/holo_red_dark</item>
<item name="android:textColorSecondary">#android:color/holo_blue_bright</item>
<item name="android:textColorSecondaryInverse">#android:color/holo_red_dark</item>
<item name="android:colorForeground">#android:color/holo_blue_bright</item>
<item name="android:windowBackground">?android:attr/colorBackground</item>
</style>
<style name="MyButton" parent="android:Widget.Button">
<item name="android:background">#FF5A79</item>
<item name="android:textColor">#color/whiteText</item>
</style>
</resources>
Also, not sure this is related but just in case, I was using the Theme Editor and it gives a warning - Not enough contrast with colorButtonNormal - by the android:textcolorPrimary. I don't know much about what colorButtonNormal is nor can I find any info about it. This is what my theme editor looks like with my current settings:
While I'm at it another problem is the text color is white inside the editText fields (WEIGHT and AGE) which is where I need to change it to be black.
Thanks for any help, this android styling stuff is driving me nuts.
Go for this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="wrap_content"
android:id="#+id/fragment_settings"
android:background="#android:color/white"/>
this will solve your problem. You are setting parent="Theme.AppCompat.Light.DarkActionBar" that is why everything is black
I try to change drop-down menu background, but can't find right decision. http://i.stack.imgur.com/OqO4j.png
That is ../values-v21/styles.xml I used
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#009688</item>
<item name="colorPrimaryDark">#00796B</item>
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
Explain, please, how I can change background color there.
Since you are using a Toolbar you can use something like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/action_bar_main"
app:popupTheme="#style/popupTheme"
...../>
where popupTheme is:
<style name="popupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#color/myTextColor</item>
<item name="android:colorBackground">#color/myPopupBackgroundColor</item>
</style>
I have got the following action menu:
As you can see all of these action menu items are having a
background. i guess it is the same background like the parent.
How can i remove this background?
My style.xml is the following:
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorAccent">#color/accentColor</item>
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:actionModeBackground">#color/primaryColor</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:activatedBackgroundIndicator">#drawable/custom_background_listview_item</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/primaryColorDark</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#color/primaryColor</item>
</style>
</resources>
My Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
app:popupTheme="#style/AppTheme.Toolbar.PopupMenu"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
The following line is the problem
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/custom_background_blue</item>
</style>
Since the above is applied not as style but as a theme (presumably via popupTheme attribute on your Toolbar element), all the widgets inside the toolbar inherit these settings. What you want is android:popupBackground instead of android:background.
Edit: OP stated the above is not sufficient. For styling toolbar's popup menu (not the toolbar itself) use the app:popupTheme attribute. The theme is going to be similar to this:
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#drawable/custom_background_blue</item>
</style>
You're setting the action background color explicitly in your style.xml same as the primary color.
<item name="android:actionModeBackground">#color/primaryColor</item>
Try removing this from your XML or changing it to a color that seems appropriate for your UI and it should work. If you don't choose to manually specify a color for the android:actionModeBackground, it will simple derive it's default value from the parent theme (in your case, Theme.AppCompat.Light.NoActionBar).
I am learning to design Android apps using new Material Design themes. And while designing a custom ToolBar I was trying to give a custom color to the title inside the my custom ToolBar.
On Android Lollipop device it is working fine as expected, as you can see in the image link given below, but when i tried it to run on the pre-Lollipop device, I am not getting the same result. Why so? I have attached the code below.
Here I have attached the screenshot of both, Lollipop version as well as pre-Lollipop version screens.
Lollipop version which shows it correctly
pre-Lollipop version which is not giving the expected output.
Code:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<TextView
android:layout_marginTop="10dp"
android:layout_below="#+id/app_bar"
android:text="#string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#455A64</item>
<item name="colorPrimaryDark">#607D8B</item>
<item name="colorAccent">#9E9E9E</item>
</style>
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#D32F2F</item>
<item name="android:textColorSecondary">#F44336</item>
</style>
</resources>
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#1976D2"
android:theme="#style/CustomToolbarTheme"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
P.S.: If this Question (or similar) is already been answered here, then please comment the link here. Thank You!
You're using
android:theme="#style/CustomToolbarTheme"
which is this:
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#D32F2F</item>
<item name="android:textColorSecondary">#F44336</item>
</style>
It's not overriding the colorPrimary attribute like AppTheme.Base is. Add that line to this style and make sure the background is set to it, like this:
<style name="CustomToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">?attr/colorPrimary</item>
<item name="colorPrimary">#455A64</item>
<item name="android:textColorPrimary">#D32F2F</item>
<item name="android:textColorSecondary">#F44336</item>
</style>
Try set titleTextAppearance for your Toolbar's theme, like this:
<style name="Toolbar" parent="Theme.AppCompat.Light">
<item name="titleTextAppearance">#style/Toolbar.TitleText</item>
</style>
<style name="Toolbar.TitleText">
<item name="android:textColor">#color/toolbar_title_text</item>
</style>
EDIT:
Sorry, I forgot to add that you should set one more thing.
<android.support.v7.widget.Toolbar
...
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/Toolbar"
app:titleTextAppearance="?attr/titleTextAppearance"/>
(Solution above can be used also for other text appearance's attributes, for example android:textStyle or android:textSize.)
if it not working then you can also set toolbar custom title colour and toolbar custom title at runtime. Code snippet is given below
private Toolbar toolbar;
toolbar = (Toolbar) findViewById(R.id.app_bar);
toolbar.setTitleTextColor(Color.parseColor("#FF557F"));
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("Title");
I'm using this:
color.xml
<resources>
<color name="white">#fff</color>
<color name="primary">#673ab7</color>
<color name="primary_dark">#512da8</color>
<color name="accent">#ffc400</color>
<color name="text_primary">#009688</color>
<color name="text_secondary">#e2eef0</color>
</resources>
values/themes.xml
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/text_primary</item>
<item name="android:textColor">#color/text_secondary</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
</resources>
values-v21/themes.xml
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/text_primary</item>
<item name="android:textColor">#color/text_secondary</item>
<item name="android:navigationBarColor">#color/primary_dark</item>
</style>
</resources>
See some tutorials:
material-design-everywhere
Android L Tutorials (Part 2): Material Theme Colors
you use this on your theme android:textColorPrimary , so instead use this textColorPrimary because the first is using just in v-21 on lollipop
I am implementing material design on my app, and I want to be able to change the color of the drawer icon to white, but I couldnt achieve what I am looking for..
This is my themes.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="AppTheme.Base" />
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="HeaderBar" parent="AppTheme.Base">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#000</item>
</style>
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
</resources>
And this is my toolbar.xml file
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/jpe.serviguide.commobile"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
app:theme="#style/HeaderBar" />
All the colors that I wanted are just fine, but the drawer icon is black instead of white..
I have tried a lot of thing but with no desire result
Thank you so much
Finally made it by doing this on my theme.xml file
<style name="AppTheme" parent="Theme.AppCompat.Light">
....
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
You can do it like this:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" - is important part
I think your actionbar should have the following parent (ThemeAppCompat.Light):
<style name="HeaderBar" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
Hi neteot always when I work with costume bars I create a custom layout as a bar, then in my case the bars button/burguer button is a ImageButton... Then you need to change color of the icon
If you want to create a perfect custom bar, u can see my last post:
https://stackoverflow.com/questions/27417923/android-add-custom-buttons-on-action-bar/27418306#27418306
Good luck and I wait than I helps you!!
PD: If you need more info or any doubt, advice me!