App with white toolbar and dark text - android

I have been trying to achieve this in a project with minSDK 16 :
Actionbar and statusbar in White color with dark text and icons.
Like this:
I have been trying to figure this out for ages now. Google searches lead to a lot of answers that dont make any sense and/or dont support older api's. colorControlNormal, titleTextColor, Appcompat-this, Appcompat-that... its a nightmare!
I am also not able to find any docs on what items to put in my styles xml, and none of the combinations of style properties I tried seem to have any effect whatsoever.
So can someone please give me a proper and well explained walkthrough as to how I can acheive this effect?
Thanks.

you can try with that
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#color/white</item>
<item name="android:windowLightStatusBar">true</item>
</style>
but API min is 23.
Also, don't forget to use different styles for different versions of APIs so far I haven't found an app that works as you want, so most probably isn't possible.

Add these to your Base Application Theme in styles.xml
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
And add following attribute to your parent layout:
android:fitsSystemWindows=”true”

You can customize your toolbar with custom view as follows:
Create your view inside toolbar and use in you code as you want
XML:
<android.support.v7.widget.Toolbar>
</android.support.v7.widget.Toolbar>
Java:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
This will help you

Related

How to change Options menu dots color for the theme "Theme.AppCompat.Light.NoActionBar"

To change the default option menu icon color(3 vertical dote), i have tried adding
<item name="android:textColorSecondary">#color/white</item>
But it doesn't make any change. I think it is not working coz my AppTheme parent is Theme.AppCompat.Light.NoActionBar. So can anybody help me on this?
The easiest way of doing it is by adding
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
or
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Dark</item>
to your primary Theme in order to change it to light or dark.
EDIT: In order to add any color for the overflow icon you would have to override the actionOverflowButtonStyle like so:
<style name="Theme.MyAppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="actionOverflowButtonStyle">#style/OverFlow</item>
</style>
<style name="OverFlow" parent="#style/Widget.AppCompat.Light.ActionButton.Overflow">
<item name="android:src">#drawable/ic_overflow_icon</item>
</style>
You can easily create your own overflow icon from websites like Android Asset Studio
2019 - Easiest way to do is write the below code to your xml in toolbar code or where you want.
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
please give up vote if its work.
You can Either use your own drawable or get the default overFlowIcon and change its tint value like below:
bd.toolbar.overflowIcon?.setTint(Color.WHITE)
To change the drawable all together, you just have to create your own vector and set it like below:
bd.toolbar.overflowIcon = ContextCompat.getDrawable(this,R.drawable.ic_baseline_menu_24)
If you are using Toolbar, just add the following code in your Activity:
toolbar.setOverflowIcon(getDrawable(R.drawable.ic_more_vert_black_24dp));
By using this code, you can directly replace the "three dots" icon with any other icon of your choice. It worked for me.

Toolbar navigation icon can't be center inside

I want to set the navigation icon for my toolbar ,and get into the problem that the icon isn't center inside by default it looks like:
and the code is:
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_48dp);
and the theme.xml is:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
and the layout xml is:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
/>
I think I have tried everything I know but I just can't figure it out.I used to set the navigation icon for toolbar then it will be center inside and now.Any help will save my day!
Eidted: of course I tried different size of icons
and I konw I could add a custom layout in toolbar or customize a layout like (which is a Linearlayout I write about)
But I just don't why I can't set the navigation icon like before,it will automatically be center inside....I think maybe I should change the theme or define something like navigationButttonStyle in the attributes....
I fix this by inherit the right theme Widget.AppCompat.Toolbar rather than ThemeOverlay.AppCompat.Dark.ActionBar to define my own toolbar style.
And use
<item name="toolbarStyle">#style/MyToolBar</item>
to set the toolbarStyle
I think you are using a bit big image. Try figure it out using this link
OK now I finally find out where the problem is: which has nothing to do with the icon size
You should place the image resource in the to the corresponding folder like (drawable-xxhdpi , drawable-xhdpi).If you don't do so,which means if you just put it in the drawable folder , it won't be auto resized to be center inside in your toolbar;

Navigation drawer toggle padding

I'm using appcompat v7 with the hamburger to arrow toggle.
However, I would like to add some padding on the left of the toggle.
This is my current situation :
http://nl.tinypic.com/r/2a0f712/8
This is what I would like to have :
http://nl.tinypic.com/r/v3q176/8
I've tried this :
findViewById(android.R.id.home).setPadding(25, 0, 15, 0);
But that didn't work. However, this did add padding on the right of the toggle.
I've also tried to add padding in the styles but that didn't work either.
AFAIK, the action is hard-coded in layout resources. U cant change the padding. Google did this to maintain the consistency across the app guess.
However u can define ur own icon in a drawable with ur own attributes (padding and all) and use it as an indicator by adding this line to styles.xml
<item name="android:homeAsUpIndicator">#drawable/xyz</item>
And the image u have shown about what u want is actually a toolbar and not an action bar. In toolbar, the icon is by default placed there.
To know more about toolbar and how to implement them, here is a link : http://android-developers.blogspot.in/2014/10/appcompat-v21-material-design-for-pre.html
I'm going to assume you are familiar with styling to some extent and recommend you go that route. FYI I have not confirmed the code below as working but I think it would be close to what you want.
For res/values-14/style.xml, something like this:
<!-- style for Action Bar -->
<style name="MyPaddedActionBar" parent="android:style/Widget.Holo.Light.ActionBarView">
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
And then for everything 14 and below, you would use AppCompat (res/values-14/style.xml):
<style name="MyPaddedActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>

Android get Support Action Bar always returns NULL

I'm using the support library v7 on a certain project. I'm trying to instantiate the support action bar like this:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(R.layout.top_action_bar);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setHomeButtonEnabled(true);
Everything works fine on Android devices with API lvl below 11. However, while trying to run the same code on newer devices, like a Samsung Galaxy S4 with Android 4+, getSupportActionBar() always returns null, causing the expected crash.
I'm using this style file:
<style name="my_style" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/my_style_ab</item>
<item name="android:windowNoTitle">true</item>
</style>
<style name="my_style_ab" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:height">70dp</item>
</style>
Any hints on what may be wrong? I think it has something to do with the style, or maybe I just can't use the support ActionBar on API lvl above 11. Thanks in advance.
Using android:windowNoTitle with true is hiding your ActionBar
I got the solution. And I didn't provide enough information in the question so it may be hard for others to help. However, I don't know why the problem happens, I just found out how to solve it. The error was due to the app title. I removed this item from the style:
<item name="android:windowNoTitle">true</item>
And also all the references in the code regarding that title bar, like this one:
requestWindowFeature(Window.FEATURE_NO_TITLE);
Why does this solve it? still don't know. It may be useful for me if someone can explain it.
If you are using Toolbar and AppCompat then you probably have android:windowNoTitle set to true, hiding your action bar. Create a Toolbar in your xml and add this code in the onCreate() of your activity.
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Inside Manifest file, check the activity for which are you having the issue.
I have the theme with "NoActionBar" Property.
Removing it resolved this code worked for me.
android:theme="#style/AppTheme.NoActionBar"

Android 3.0 ActionBar, changing colors

How can I change the color of the underline beneath the tabs? It's currently the light blue, and I can't find any resources on how to change this for Android 3.0.
Additionally, I'd like to change the text color for the menu items that show up on the right of the ActionBar as a result of: android:showAsAction="ifRoom|withText"
Anyone know how to change these?
You can control the appearance of the tabs by using the properties android:actionBarTabStyle, android:actionBarTabBarStyle, and android:actionBarTabTextStyle.
This section in the official developer guide shows a sample xml to customize the action bar's style.
Regarding the text of the menu options check the properties actionMenuTextAppearance and actionMenuTextColor.
As additional info, here's how I found out how to change the blue bar below each tab (the answer above is perfectly good, but I lacked little information that I put here, which might be useful to somebody).
You just need to change the background to a 9 patch drawable.
Here's how it looks like:
http://android-developers.blogspot.com/2011/04/customizing-action-bar.html
Source available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable/actionbar_tab_bg.xml
9 patches available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable-mdpi
I know this was really easy, but again, it might be useful so I'm just dropping the links here.
None of these solutions worked for me. I changed the colors of my tabs as follows:
This is in the themes.xml
<style name="MyApp" parent="android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/MyApp.ActionBar.MyTabStyle</item>
</style>
This is in styles.xml
<style name="MyApp.ActionBar.MyTabStyle" parent="android:style/Widget.Holo.ActionBarView_TabText">
<item name="android:textColor">#00ff00</item>
</style>
This should make your tabs green.
I think that you can use:
<resources>
<style name="MyTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionMenuTextColor">#color/...</item>
</style>
</resources>
Regards

Categories

Resources