How to make Toolbar transparent

Question

It is self Q amp A post I have transparent ActionBar which overlays layout  After migration to the latest support library I have been forced to get rid off the ActionBar in favor of the Toolbar  The old ways to make it transparent and overlay that layout doesn t work anymore    lt style name  CustomActionBarTheme  parent   android style Theme AppCompat  gt       lt item name  android windowActionBarOverlay  gt true lt  item gt       lt item name  windowActionBarOverlay  gt true lt  item gt       lt item name  android actionBarStyle  gt  style TransparentActionBar lt  item gt   lt  style gt    lt style name  TransparentActionBar  parent   android style Widget Holo Light ActionBar  gt       lt item name  android background  gt  android color transparent lt  item gt   lt  style gt

User · Answer

The Toolbar works like a View  so the answer it s very simple   toolbar getBackground   setAlpha 0

User · Answer

Checking Google s example Source Code I found out how to make the toolbar completely transparent  It was simpler than I thought  We just have to create a simple Shape drawable like this   The name of the drawable is toolbar bg   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt   lt gradient     android angle  90      android startColor   android color transparent      android endColor   android color transparent      android type  linear    gt   lt  shape gt    And then in the fragment or activity   Add the toolbar like this         lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height   attr actionBarSize          android layout alignParentStart  true          android layout alignParentTop  true          android background   drawable toolbar bg          android popupTheme   style ThemeOverlay AppCompat Light          android theme   style ThemeOverlay AppCompat Dark ActionBar   gt    And here we will have a fully transparent toolbar     Don t add the  lt android support design widget AppBarLayout  gt  if you do  this won t work   Note  If you need the AppBarLayout  set the elevation to 0 so it doesn t draw its shadow

User · Answer

All you need to is to define theme which hide action bar  define action bar style with transparent background and set this style to the toolbar widget  Please note that toolbar should be drawen as last view  over all view tree      lt style name  Theme Custom  parent   android style Theme AppCompat  gt       lt item name  windowActionBar  gt false lt  item gt       lt item name  windowActionBarOverlay  gt true lt  item gt       lt item name  android windowActionBarOverlay  gt true lt  item gt   lt  style gt    lt style name  CustomActionBar  parent   style ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  android windowActionBarOverlay  gt true lt  item gt       lt  -- Support library compatibility -- gt       lt item name  windowActionBarOverlay  gt true lt  item gt   lt  style gt    Layout    lt RelativeLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  match parent      android layout height  match parent  gt        lt  -- Toolbar should be above content-- gt       lt include layout   layout toolbar    gt    lt  RelativeLayout gt    Toolbar layout    lt 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      app theme   style CustomActionBar   gt

User · Answer

Just use the following xml code   Code for the layout    lt android support v7 widget Toolbar             xmlns android  http   schemas android com apk res android              android id    id def toolbar              android layout height  wrap content              android layout width  match parent              android minHeight   attr actionBarSize              android background   color toolbarTransparent              android layout alignParentTop  true    gt    And add the following code in the colors xml    lt color name  toolbarTransparent  gt  00FFFFFF lt  color gt    This will give you the desired output

User · Answer

Just add android background   android color transparent   like below in your appbar layout   lt android support design widget AppBarLayout        android layout width  match parent         android layout height  wrap content         android background   android color transparent  gt        lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height   attr actionBarSize          app popupTheme   style AppTheme PopupOverlay    gt    lt  android support design widget AppBarLayout gt

User · Answer

for Support Toolbar v7 android support v7 widget Toolbar   code  toolbar setBackground null      or toolbar setBackgroundColor ContextCompat getColor getContext    android R color transparent      xml  android background   null  or android background   android color transparent     lt android support v7 widget Toolbar     android layout width  match parent      android layout height  wrap content      android layout alignParentTop  true      android background   null      android minHeight   attr actionBarSize      android theme   style Theme AppCompat Light DarkActionBar  gt        lt TextView         android layout width  match parent          android layout height  wrap content          android textColor   android color white          android ellipsize  start          android singleLine  true          android textAppearance   style TextAppearance AppCompat Widget ActionBar Title   gt   lt  android support v7 widget Toolbar gt    if Title is invisible  set textColor

User · Answer

Only this worked for me  AndroidX support library     lt com google android material appbar AppBarLayout             android layout width  quot match parent quot              android layout height  quot wrap content quot              android background  quot  null quot              android theme  quot  style AppTheme AppBarOverlay quot              android translationZ  quot 0 1dp quot              app elevation  quot 0dp quot  gt                lt androidx appcompat widget Toolbar                 android id  quot   id toolbar quot                  android layout width  quot match parent quot                  android layout height  quot  attr actionBarSize quot                  android background  quot  null quot                  app popupTheme  quot  style AppTheme PopupOverlay quot    gt            lt  com google android material appbar AppBarLayout gt   This code removes background in all necessary views and also removes shadow from AppBarLayout  which was a problem  Answer was found here  remove shadow below AppBarLayout widget android

User · Answer

Go to res package and open color xml  Set color primary to  00000000

User · Answer

The simplest way to put a Toolbar transparent is to define a opacity in  colors section  define a TransparentTheme in  styles section and then put these defines in your toolbar    colors xml   lt color name  actionbar opacity  gt  33000000 lt  color gt     styles xml   lt style name  TransparentToolbar  parent   style ThemeOverlay AppCompat Dark ActionBar  gt       lt item name  android windowActionBarOverlay  gt true lt  item gt       lt item name  windowActionBarOverlay  gt true lt  item gt   lt  style gt     activity main xml   lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android background   color actionbar opacity          app theme   style TransparentToolbar          android layout height   attr actionBarSize   gt    That s the result   Screenshot transparent toolbar

User · Answer

try below code   lt android support design widget AppBarLayout                     android id    id app bar                      android layout width  match parent                      android layout height  wrap content                      android theme   style AppTheme Transparent                       gt                           lt android support v7 widget Toolbar                             android id    id toolbar                              android layout width  match parent                              android layout height   attr actionBarSize                              app popupTheme   style AppTheme PopupOverlay    gt                   lt  android support design widget AppBarLayout gt    style xml   lt style name  AppTheme Transparent  parent  ThemeOverlay AppCompat Light  gt           lt item name  colorPrimary  gt  android color transparent lt  item gt           lt item name  colorControlActivated  gt  color colorWhite lt  item gt           lt item name  colorControlNormal  gt  color colorWhite lt  item gt       lt  style gt

User · Answer

I implemented translucent Toolbar by creating two Theme AppCompat Light NoActionBar themes and setting colorPrimary attribute to transparent color   1  Create one theme for opaque Toolbar    lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt        lt  -- Toolbar background color -- gt       lt item name  colorPrimary  gt  ff212cff lt  item gt    lt  style gt    Second theme for transparent overlay Toolbar    lt style name  AppTheme Overlay  parent  AppTheme  gt       lt item name  colorPrimary  gt  color transparent lt  item gt   lt  style gt    2  In your activity layout  put Toolbar behind content so it can be displayed in front of it    lt RelativeLayout     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 orientation  vertical  gt        lt fragment         android id    id container          android name  com test CustomFragment          android layout width  match parent          android layout height  match parent   gt        lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height  wrap content          android background   attr colorPrimary          android minHeight   attr actionBarSize          app popupTheme   style ThemeOverlay AppCompat Light          app theme   style ThemeOverlay AppCompat Dark ActionBar   gt    lt  RelativeLayout gt    3  Apply the transparent theme to your acivity in AndroidManifest xml       lt activity         android name  com test TransparentActivity          android parentActivityName  com test HomeActivity          android theme   style AppTheme Overlay   gt           lt meta-data             android name  android support PARENT ACTIVITY              android value  com test HomeActivity    gt       lt  activity gt

User · Answer

Perhaps you need to take a look at this post transparent Actionbar with AppCompat-v7 21  Points that the post suggest are   Just ensure that you use RelativeLayout to lay Toolbar and the body  Put the Toolbar in the last  Put transparent color for android background attribute of the Toolbar   This should solve the problem without too much hassle

User · Answer

Create your toolbar xml file with background of AppBarLayout is  null   lt  xml version  1 0  encoding  utf-8   gt   lt android support design widget AppBarLayout     android id    id general appbar      android layout width  match parent      android layout height  wrap content      android background   null      xmlns android  http   schemas android com apk res android  gt       lt android support v7 widget Toolbar         android layout width  match parent          android layout height   attr actionBarSize  gt           lt TextView             android layout width  match parent              android layout height  wrap content              android gravity  center horizontal              android text  Login              android textSize  20sp   gt       lt  android support v7 widget Toolbar gt    lt  android support design widget AppBarLayout gt    and here is result

User · Answer

Just Add  android background   10000000  in your AppBarLayout tag It works

User · Answer

Add below code to styles xml file   lt style name  LayoutPageTheme  parent   style Theme AppCompat Light NoActionBar  gt       lt item name  android windowActionBarOverlay  gt true lt  item gt       lt  -- Support library compatibility -- gt       lt item name  windowActionBarOverlay  gt true lt  item gt       lt item name  android actionBarStyle  gt  style TransparentActionBar lt  item gt   lt  style gt   lt  -- ActionBar styles -- gt   lt style name  TransparentActionBar      parent   android style Widget Holo Light ActionBar  gt       lt item name  android background  gt  android color transparent lt  item gt   lt  style gt              lt android support v7 widget Toolbar             android id    id toolbar              android layout width  match parent              android layout height   attr actionBarSize             android background   android color transparent              app popupTheme   style AppTheme PopupOverlay    gt    Don t forget to write  android background   android color transparent

User · Answer

I know am late for the party  I ve created a simple class to manage the Toolbar transparency   import android annotation SuppressLint  import android graphics drawable ColorDrawable  import android support v7 widget Toolbar     public class TransparentToolbarManager        private Toolbar mToolbar      private ColorDrawable colorDrawable      public static final int MAX ALPHA   255  MIN ALPHA   0       public TransparentToolbarManager Toolbar mToolbar            this mToolbar   mToolbar          this colorDrawable   new ColorDrawable mToolbar getContext   getResources   getColor R color colorPrimary               public TransparentToolbarManager Toolbar mToolbar  ColorDrawable colorDrawable            this mToolbar   mToolbar          this colorDrawable   colorDrawable               Fading toolbar     public void manageFadingToolbar int scrollDistance            if  mToolbar    null  amp  amp  colorDrawable    null                  FadeinAndOut according to the horizontal scrollValue             if  scrollDistance  lt   MAX ALPHA  amp  amp  scrollDistance  gt   MIN ALPHA                    setToolbarAlpha scrollDistance                 else if  scrollDistance  gt  MAX ALPHA                    setToolbarAlpha MAX ALPHA                                        SuppressLint  NewApi       public void setToolbarAlpha int i            colorDrawable setAlpha i           if  CommonHelper isSupport 16                 mToolbar setBackground colorDrawable             else               mToolbar setBackgroundDrawable colorDrawable                         and the CommonHelper isSupport    public static boolean isSupport int apiLevel            return Build VERSION SDK INT  gt   apiLevel

User · Answer

Add the following line in style xml   lt style name  Base Theme AppTheme  parent  Theme AppCompat DayNight NoActionBar  gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorAccent lt  item gt   lt  style gt    lt style name  AppTheme  parent  Base Theme AppTheme  gt   lt  style gt    Now add the following line in style-v21      lt style name  AppTheme  parent  Base Theme AppTheme  gt       lt item name  android windowDrawsSystemBarBackgrounds  gt true lt  item gt       lt item name  android statusBarColor  gt  android color transparent lt  item gt   lt  style gt    and set the theme as  android theme   style AppTheme   It will make the status bar transparent

User · Answer

https   stackoverflow com a 37672153 2914140 helped me    I made this layout for an activity    lt  xml version  1 0  encoding  utf-8   gt   lt android support design widget CoordinatorLayout 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 fitsSystemWindows  true       gt        lt android support design widget AppBarLayout         android layout width  match parent          android layout height  wrap content          android background   color transparent   lt - Add transparent color in AppBarLayout          android theme   style AppTheme AppBarOverlay           gt            lt android support v7 widget Toolbar             android id    id toolbar              android layout width  match parent              android layout height   android attr actionBarSize              android theme   style ToolbarTheme              app popupTheme   style AppTheme PopupOverlay              app theme   style ToolbarTheme                gt        lt  android support design widget AppBarLayout gt        lt FrameLayout         android id    id container          android layout width  match parent          android layout height  match parent           lt - Remove app layout behavior               gt    lt  android support design widget CoordinatorLayout gt    If this doesn t work  in onCreate   of the activity write  where toolbar is   id toolbar    toolbar background alpha   0   If you want to set a semi-transparent color  like  30ff00ff   then set toolbar setBackgroundColor color   Or even set a background color of AppBarLayout   In my case styles of AppBarLayout and Toolbar didn t play role

[android] How to make Toolbar transparent?

Examples related to android

Examples related to material-design

[android] How to make Toolbar transparent?

Examples related to android

Examples related to material-design

Examples related to android-toolbar