How to set background transparent on toolbar in android - android

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

Related

ActionBar style (Text size)

I'm trying to modify the text size of my ActionBar and I tried styling it but it doesn't change anything... That's my styles page.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.Styled.ActionBar.TitleTextStyle" parent="#android:style/Widget.TextView">
<item name="android:textSize">19sp</item>
</style>
Also I had this on my styles.xml but doesn't work either
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">4dip</item>
<item name="android:actionBarSize">4dip</item>
<item name="android:textSize">3sp</item>
</style>
I also have tried with a nasty way but it doesn't work only works with the color.
mActionBar.setTitle(Html.fromHtml("<font size=\"3\" color=\"white\">" + getString(R.string.app_name_device)));
After you say to me... I know now it's used Toolbar BUT I have to do it now with ActionBar.
EDIT
I hided the ActionBar like this :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
</style>
Then I added a ToolBar 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:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
But the Layout messed up, it goes up and now the ToolBar is collapsed with the first TextView
You can do it programmatically like this
Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>")
for small text you can change tag <big> with <small>
and if you want to provide specific size of Title Text then you should use Toolbar and use below theme/style
Create one layout toolbar.xml and put below code
<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="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
and change size in
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
and you can inculde above layout in your each Activity layout files like below
<include
layout="#layout/toolbar"
/>
Toolbar in your Activity
ToolBar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>"));
I do it so:
import android.support.v7.app.ActionBar;
public void title_change(String text) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(15);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(tv);
}

Android custom toolbar theme not being applied

I have an app that uses a custom Toolbar style. Previously, it applied the theme correctly, but after a recent update of Android Studio, it has stopped working correctly.
The theme.xml is defined like so:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="OurTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonAppTheme</item>
<item name="android:listSeparatorTextViewStyle">#style/BlueListSeparatorTextViewStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/action_bar_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<!--<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>-->
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/btn_accent_color</item>
</style>
<!-- Application theme. -->
<style name="OurTheme" parent="OurTheme.Base">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:listSeparatorTextViewStyle">#style/BlueListSeparatorTextViewStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
</resources>
Our styles.xml contains:
<!-- ActionBar styles ThemeOverlay.AppCompat.ActionBar -->
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text</item>
</style>
actionbar_text is defined in our colors.xml:
<color name="actionbar_text">#ffffffff</color>
Finally, our custom toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
Previously, this worked and our app had white text in its custom toolbar. It now defaults to black everywhere in the app and the only method I have found that can change the color of the toolbar title text (other than doing it in code) is to change the toolbar layout to this:
<?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="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextAppearance="#style/MyActionBarTitleText"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
Note that now I am specifically telling the actionbar to use MyActionBarTitleText style.
I have also tried to specifically tell it to use the custom theme here as well, by changing the "app:theme" to:
app:theme="#style/MyActionBar"
but this hasn't helped.
I'm afraid I'm at a loss. I know the base theme works as I can change the background colour, but using the actionBarStyle item simply refuses to work.
This has also affected text layouts and justifications to some of our custom button layouts as well and I can't figure out why it has stopped working. Does anyone have any suggestions?
It's very late but answering it.
Create a custom theme for your toolbar and set android:background
<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/blue</item> // change your color here and add other attributes
</style>
Now apply this theme to your toolbar in XML like:
style="#style/ToolbarStyle"

AppCompat toolbar dark theme style not working on pre 21 devices

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.

Transparent toolbar

I have an application with a Toolbar and I want to make the Toolbar transparent.
I have searched and got some answers but they are not working at all!
now I sign up and asking question , how should i make my Toolbar transparent? (I mean no background at all).
my API is 15, android 4.0.3
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:minHeight="?attr/actionBarSize"
local:theme="#style/ThemeOverlay.AppCompat"
local:popupTheme="#style/ThemeOverlay.AppCompat" />
When you declare the Toolbar in your Java Activity, try using this code to set the Opacity/Alpha value like so:
toolbar.getBackground().setAlpha(0);
Also you could use this theme to set the background to empty
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Then in your Toolbar, set the theme with this value
app:theme="#style/CustomActionBar"/>
set toolbar hidden: yes maybe it can work.

Android Theme.AppCompat.Light with Dark Toolbar (for light text)

I have an app using Theme.AppCompat.Light which I need to use so Dialogs have the light theme. But this makes the text in my toolbar black, where I'd rather it be white. I've tried setting the toolbar's specific app:theme to AppCompat.Dark.Actionbar, but no luck... I searched around for a while and couldn't find a specific question and answer to this.
Here's my default AppTheme:
<style name="AppTheme.Parent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/dark_blue</item>
<item name="colorAccent">#color/pink</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Here's my toolbar.xml:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
In order to change the color of the title in your Toolbar you simply have to add the attribute android:textColorPrimary to your Toolbar style.
Please see the following example for even more attributes of the Toolbar.
Example
<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
<!-- 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>
<!-- Color of the Toolbar -->
<item name="android:background">#455a64</item>
</style>
Result
You can customize toolbar yourself no need to set default text, use your own textview :
<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="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<!-- Below will add your text in the center of toolbar -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Your Text"
android:textColor=#ff0000
android:textStyle="bold"/>
</android.support.v7.widget.Toolbar>
While custom styling may work, the AppCompat library already provides an easy way to do this. If your Toolbar's background color is dark/doesn't provide enough contrast, use `ThemeOverlay.AppCompat.Dark as its parent:
<style name="MyTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark" />
Then style your `Toolbar accordingly:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/some_dark_color"
android:theme="#style/MyTheme.PopupOverlay" />
Toolbars using backgrounds with lighter colors should use ThemeOverlay.AppCompat.Light as their parent.
try this work in 2021, the first set of themes in the activity android:theme="#style/AppTheme.NoActionBar" and set theme in xml
<style name="AppTheme.NoActionBar">
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="windowNoTitle">true</item>
</style>

Categories

Resources