I want to make my toolbar transparent.
I found some answers, but they didn't help me.
My Toolbar white instead transparent
Here is my toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:foxrey="http://schemas.android.com/apk/res-auto"
foxrey:theme="#style/ActionBarThemeOverlay"
foxrey:popupTheme="#style/ActionBarPopupThemeOverlay"
android:id="#+id/toolbar_actionbar"
android:background="#color/transparent"
foxrey:titleTextAppearance="#style/ActionBar.TitleText.Inverse"
android:layout_width="match_parent"
android:layout_height="?actionBarSize" />
Here is ActionBarThemeOverlay:
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">?actionBarIconColor</item>
<item name="colorControlHighlight">#3fff</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
I also tried this theme:
<style name="ToolbarTransparent" parent="Theme.AppCompat.Light">
<item name="android:background">#color/tranp</item>
<item name="background">#color/tranp</item>
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">?actionBarIconColor</item>
<item name="colorControlHighlight">#3fff</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
But it doesn't work.
This is what I have now:
I want to get this:
You need to use Alpha property
Alpha property of the view, as a value between 0 (completely transparent) and 1 (completely opaque).
XML Attributes:
android:alpha
example:
<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"
android:alpha="0"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Programatically:
setAlpha(float);
example:
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setAlpha(0);
Android Developers documentation
Do this in your Code .
toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
toolbar.setBackgroundColor(getResources().getColor(R.color.transparent));
setSupportActionBar(toolbar);
The best way is to change the opacity of the background image of the toolbar. I think this will do.
Related
I'm trying to change the textcolor in toolbar to white but the color wont change.
Things i've tried:
1- Changing the app:theme=app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
2- trying to do it programmatically: toolbar.setTitleTextColor(0xFFFFFFFF);
3- The last one which code appears under:
Custom style: ToolBarstyle:
Res/style
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
Res/Layout
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.AppCompat"
app:layout_collapseMode="pin" />
Java file:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
/* Toolbar */
getSupportActionBar().setTitle("Nostrils");
toolbar.setTitleTextColor(0xFFFFFFFF);
// Back icon
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
initNavigationDrawer();
}
Photo from the emulator:
https://i.imgur.com/zkp24dK.png
Change your toolbar to
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:id="#+id/toolbar">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:textSize="16dp"
android:textStyle="bold"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#color/white"
android:layout_marginRight="?attr/actionBarSize"
android:gravity="center"
android:id="#+id/welcome_textView"/>
</android.support.v7.widget.Toolbar>
Access this textView
Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
TextView textToolHeader = (TextView) toolbar.findViewById(R.id.welcome_textView);
textToolHeader.setTextColor(getResources().getColor(R.color.your_color));
Thanks for the answer but since its part if a collapsing toolbar i added this code (and it worked):
app:collapsedTitleTextAppearance="#style/CollapsedAppBar"
app:expandedTitleTextAppearance="#style/ExpandedAppBar"
to :
<android.support.design.widget.CollapsingToolbarLayout
with:
<style name="ExpandedAppBar" parent="#android:style/TextAppearance">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#android:color/white</item>
</style>
<style name="CollapsedAppBar" parent="#android:style/TextAppearance">
<item name="android:textColor">#android:color/white</item>
</style>
https://stackoverflow.com/a/25162981/4409113
Theme.AppCompat is visually the same as Theme.Holo (dark)
So, just change parent:
<style name="ToolBarStyle" parent="Theme.AppCompat">
To:
<style name="ToolBarStyle" parent="Theme.AppCompat.Light.NoActionBar">
Because you already have a Toolbar in your layout and this theme will make the color white.
For the toolbar set:
app:titleTextColor="#android:color/white"
or in your app theme set:
<item name="android:textColorPrimary">#android:color/white</item>
I've tried setting the action bar I custom-made for my application to be transparent. However instead of being completely transparent, it leaves a weird elevation shadow:
http://puu.sh/rdYyb/04ce0147f6.jpg
The XML for the bar:
<android.support.design.widget.AppBarLayout
android:id="#+id/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.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/OverviewFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_alert" />
<RelativeLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
The styles XML for my themes:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"></style>
How I programatically try to remove the elevation and background in the activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbarlayout);
appBarLayout.setElevation(0);
toolbar.setElevation(0);
appBarLayout.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
toolbar.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
But despite all this the box (shown in the link) still persists... I'm not sure what's going on? Does anyone see anything wrong in my code?
try putting inside app bar
app:elevation="0dp"
this inside your toolbar
android:background="#android:color/transparent"
I think you need to use "android:alpha="0.5" or use setAlpha() method.
i tried this and its worked for me and add this four line into toolbar widget in xml file.
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
First of all I have repeatedly read and applied everything posted here, but it does not solve my problem. It seems that every answer posted here is to apply style to theme attribute of the toolbar, i've tried it it got me nowhere, so let me explain what my problem is:
I want to have light theme everywhere except the toolbar. On Lollipop devices, it's not a problem, but on pre Lollipop devices toolbars Title and overflow button always adopts MyTheme parent style, so I get dark Title and dark overflow button (it's my only button there) it seems like theme attribute is malfunctioning in Toolbar.
I'm using AppCompatActivity for my base class, my minimum api is 15 and AppCompat version is 22.2.1.0
Here's my code:
<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"/>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/dark_primary_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="android:statusBarColor">#color/dark_primary_color</item>
<item name="selectableItemBackground">?android:attr/selectableItemBackground</item>
</style>
my hamburger item is white because I inflate image from resource
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.Title = "Sport";
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
if (SupportActionBar != null){
SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu_white_24dp);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
}
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
Try This combination in your toolbar code it should work just fine.
This is what worked for me in the end:
<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:titleTextColor="#android:color/white"
local:theme="#style/ToolbarTheme"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/primary_color</item>
<!-- Used to for the title of the Toolbar -->
<item name="android:textColorPrimary">#fff</item>
<!-- Used to for the title of the Toolbar when parent is Theme.AppCompat.Light -->
<item name="android:textColorPrimaryInverse">#fff</item>
<!-- Used to color the text of the action menu icons -->
<item name="android:textColorSecondary">#fff</item>
<!-- Used to color the overflow menu icon -->
<item name="actionMenuTextColor">#fff</item>
</style>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/dark_primary_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="android:statusBarColor">#color/dark_primary_color</item>
<item name="colorControlNormal">#fff</item>
</style>
In this case ColorControlNormal colored overflow icon and titleTextColor colored Title. It seems that in my case ToolbarTheme doesn't work. I don't have a clue why is it, but now I don't care. This is not an optimal solution but it works.
I want to set background of toolbar transparent.
<?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="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"
android:id="#+id/tool_bar_org"
android:paddingTop="0dp">
</android.support.v7.widget.Toolbar>
Here is my toolbar layout background is not being transparent
just show in white color
toolbar = (Toolbar) findViewById(R.id.tool_bar_org);
toolbar.getbackgroud().setAlpha(0);
setSupportActionBar(toolbar);
Its not working. Can you please tell me how to make it transparent.
This is the theme I have used in my project to make the appCompact ActionBar as transparent, modify it according to your needs:
<style name="adhoctheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/adhocblack</item>
<item name="actionBarStyle">#style/adhocblack</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="adhocblack" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#0D000000</item>
<item name="background">#color/appcompact_transparent_actionbar_bg</item>
<item name="android:icon">#drawable/logo_header_2</item>
</style>
Where appcompact_transparent_actionbar_bg = #0D000000
Important:
Have a look here to check how different values folders contain specific style files to render on various API's
I'm trying to switch over an app to use Theme.Material, I have a toolbar setup with fitsSystemWindows set to true yet my activity extends below the navigation bars!!
Here's my theme
<style name="FlowTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
Nothing is triggerend in my activity to flag fullscreen
What's going on? how do I fix this so that it's not fullscreen?
Edit: Here's my main activity XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
android:orientation="vertical">
<include
android:id="#+id/toolbar_actionbar"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ActMain"
tools:ignore="MergeRootFrame"
android:layout_below="#+id/toolbar_actionbar" />
</LinearLayout>
<fragment
android:id="#+id/fragment_drawer"
android:name="com.metalab.flow.ui.fragments.FrNavigationDrawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fr_navigation_drawer" />
this is the reason
Theme.AppCompat.Light.NoActionBar // i show no actionbar..
put this in your activity xml layout, if its linearLayout let it be the first child, if its RelativeLayout let it be on top and all children should align to it..
<android.support.v7.widget.Toolbar 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="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/FlowTheme" />
style
<style name="FlowTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowFullscreen">false</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="cpvColor">#color/accent</item>
<item name="cpvStrokeWidth">3dp</item>
<item name="cpvCircleAnimDuration">1400</item>
<item name="cpvSweepAnimDuration">950</item>
</style>
As it turns out I was using this class, for a core WebView bug fix https://github.com/madebycm/AndroidBug5497Workaround
Removing it's use fixed my issue, however the WebView resize bug lives on...
You are using wrap_content in your toolbar, and if you havent given support to it, then it hasn't content to show. I recomend you that change the height of the toolbar to:
android:layout_height="?attr/actionBarSize"
And you should give support in your java file to show the title and buttons:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
setSupportActionBar(toolbar);
EDIT: I read some of other replies, and I add more info because I suppose that you had the toolbar defined in other xml. This is an example of toolbar that you should include:
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:translationZ="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />