On Android I can set a transparent statusbar with the following style line:
<item name="android:windowTranslucentStatus">true</item>
I would like to display a text directly under the statusbar with the same background color of the statusbar. My problem is if I set the background color to my primaryColor it is a bit brighter because I haven't added the alpha value of the statusbar to the color.
So how can I get the alpha value of the statusbar from code to add it to my background color?
Do you want like this ?
If yes. After Android 5.0.
You should set colorPrimaryDark same as colorPrimary.
colorPrimaryDark means status bar color.
And one important step, if your layout code like this:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Delete "AppBarLayout". Change to :
<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" />
On Activity, try get this
window.statusBarColor
Related
I've created a new project with a new blank activity using Android Studio and I'm trying to remove the shadow below the toolbar in >=API21. I've tried many things.
This works for < API21
<item name="android:windowContentOverlay">#null</item>
This doesn't work for me in phone with >=API21:
getSupportActionBar().setElevation(0);
<item name="android:elevation">0dp</item>
I don't know what else I can try. Any help is appreciated.
EDIT: I've tried everything from other questions like this but nothing worked.
As #Vipul Asri said, I had to add app:elevation="0dp" but I was adding it to the wrong place. This works:
<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"
android:fitsSystemWindows="true"
tools:context="android.teechart.steema.com.androiddemo.DashboardWebAnalytics">
<android.support.design.widget.AppBarLayout
app:elevation="0dp"
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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_dashboard_web_analytics" />
</android.support.design.widget.CoordinatorLayout>
I was adding it in android.support.v7.widget.Toolbar but the correct place was in android.support.design.widget.AppBarLayout.
This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
I am trying to style the Actionbar of my app. Since i need to customize more i have replaced the actual ActionBar with ToolBar. I want to design the ActionBar as shown in the below image1.
Below is the toolbar code i am using to customize.
custom_actionbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.support.v7.widget.Toolbar
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</RelativeLayout
activity_toolbar.java
// Custom actionbar starts here
Toolbar action = (Toolbar) findViewById(R.id.actionbar);
action.inflateMenu(R.menu.menu_scrollable_tabs);
action.setNavigationIcon(R.drawable.ct_drawer);
I am getting the action bar like below image2,
1) The problem i am facing is i am not getting the Navigation icon and menu icon as same as requested by the client.
2) How to achieve this using toolbar. Please provide if any other alternate way to achieve this in android.
Please help.
Set the colorPrimary value of your theme for your style in styles.xml
<item name="colorPrimary">#color/colorPrimary</item>
Then define your color in colors.xml file like follows
<color name="colorPrimary">#3F51B5</color>
Please see this example of setting primary colors
http://www.dilan.me/articles/tech-notes/android-tips-2-how-to-change-the-main-colors-of-your-app/
you can override color in /res/values/colors.xmal
and change value of colorPrimary
<color name="colorPrimary">#3F51B5</color>
or
use this code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setBackgroundColor(Color.BLACK);
or
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#android:color/black"
android:background="?attr/colorPrimary"
android:elevation="4dp"
/>
I know this question has been asked before, and it worked for me before but after updating to App Compat revision 23, the Toolbar is now having a black text color (I want it white) and I didn't change a thing.
Toolbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
styles.xml
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<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="#attr/spinner_style">#style/spinner_style</item>
</style>
Setting toolbar to activity:
Toolbar Toolbar = (Toolbar) AppCompatActivity.findViewById(R.id.toolbar);
AppCompatActivity.setSupportActionBar(Toolbar);
ActionBar actionBar = ((AppCompatActivity)activity).getSupportActionBar();
actionBar.setTitle(title);
Change
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
to
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The new support libraries (AppCompat) that Android Studio brings in default project templates do not insert an important attribute to style Toolbars in older Android versions.
This is what worked for me (I'm using an AppBarLayout with Toolbar and TabLayout, as shown):
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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"
android:theme="#style/AppTheme.AppBarOverlay" <!-- Needed attribute -->
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:theme="#style/AppTheme.AppBarOverlay" <!-- Needed attribute -->
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
I didn't research to know exactly what happened here, but older Android versions really need the theme in every element to be styled.
Hope it helps someone who is trying to find a solution to the black text in the light toolbar theme!
I'm trying to change this toolbar color Completly White like Android Lollipop Settings action bar color but, there is a bug or something like that in our view or perhaps an Android bug!!
My toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
and style Arrow:
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
Result:
As you can see, the name is black! and after add these also, the search icon is a little bit black. (You can try it ;) )
But i need Completely White color with white actions.
How can achieve this?
I've tried everything you can expect!
You can try this :
taken from : https://github.com/sagar-viradiya/android-design-support-lib-demo/blob/master/app/src/main/res/layout/fragment_collapsing_toolbar.xml
Just add this in the AppBarLayout: app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
e.x:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
For PopUptheme:
<android.support.v7.widget.Toolbar
android:id="#+id/Main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light" />
But i have no idea about that search action and why that is still a little bit black.
If some one knows, please guide us.
<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/purple"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
When I use the setTitle() method, it all works fine. But the problem is that when I change orientation (since in lollipop 5.1 I can do so) the title word is small compared to portrait version. Why such bug? and how do I solve this?
By default the Toolbar's fontsize is smaller in landscape.
If you want it to have the same size as in portrait you can set a custom titleTextAppearance:
<android.support.v7.widget.Toolbar
app:titleTextAppearance="#style/YourToolbarTitleStyle"
.../>
with YourToolbarTitleStyle being defined as a style where you specify a text size:
<style name="YourToolbarTitleStyle" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>