0

I'm trying to get a transparent Toolbar over the top of my Navigation Drawer. I had it working pretty nicely until I had to put a Toolbar in my layout so I had a reference to it, to pass to ActionBarToggle.

Styling the Toolbar is awful. I've played for hours and nearly got it right now, but there are a couple of things I cannot for the life of me fix.

1 I want the hamburger icon and the option menu icon to be white.

2 I want the Toolbar to be visible over the NavDrawer.

3 I don't want any shadow or elevation around the Toolbar.

These three things seem massively improbable.

Here is my Activity Layout.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/load_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"

tools:context=".load.LoadActivity"
tools:openDrawer="start">

    <FrameLayout

        android:id="@+id/contentFrame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/md_transparent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                android:background="@color/md_transparent"
                android:theme="@style/DefaultToolbar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:titleTextColor="@color/md_white_1000"/>

        </android.support.design.widget.AppBarLayout>

    </FrameLayout>


<android.support.design.widget.NavigationView

    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"

    app:headerLayout="@layout/nav_header"
    app:menu="@menu/load_drawer_actions" />

the Styles.xml

<resources>

<style name="AppTheme" parent="Base.AppTheme" />

<style name="AppThemeNoActionBar" parent="AppTheme">

    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

</style>

<style name="SplashTheme" parent="AppThemeNoActionBar">

    <item name="android:windowBackground">@drawable/splashscreen</item>

</style>

<style name="Base.AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">

    <item name="windowActionBarOverlay">false</item>

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="colorControlNormal">@color/secondary_text</item>
    <item name="colorControlActivated">@color/primary_text</item>
    <item name="colorControlHighlight">@color/colorAccent</item>

    <item name="progressBarStyle">@style/DefaultProgressBarStyle</item>
    <item name="android:progressBarStyle">@style/DefaultProgressBarStyle</item>

    <item name="buttonStyle">@style/DefaultButtonStyle</item>
    <item name="android:buttonStyle">@style/DefaultButtonStyle</item>

    <item name="actionBarStyle">@style/ClearActionBar</item>
    <item name="android:actionBarStyle">@style/ClearActionBar</item>

</style>

<style name="DefaultToolbar" parent="@style/ThemeOverlay.AppCompat.ActionBar">

    <item name="android:background">@android:color/transparent</item>

</style>

<style name="DefaultAppbar" parent="Base.Widget.Design.AppBarLayout">

    <item name="android:background">@android:color/transparent</item>

</style>

<style name="DefaultProgressBarStyle" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">

    <item name="android:indeterminate">true</item>

</style>

<style name="DefaultButtonStyle" parent="@style/Widget.AppCompat.Button.Borderless">

    <item name="android:padding">@dimen/defaultPadding</item>

</style>


<style name="ClearActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">

    <item name="android:background">@android:color/transparent</item>
    <item name="background">@android:color/transparent</item>
    <item name="elevation">0dp</item>


</style>

<style name="DefaultFABStyle">

    <item name="elevation">@dimen/defaultElevation</item>
    <item name="android:layout_marginRight">@dimen/defaultMargin</item>

</style>

</resources>

If anyone knows how to start to get what I need.. It seems impossible at the moment. I actually had it nearly perfect, until I had to declare a Toolbar in XML, since then, themeing it has been near impossible. All to get the hamburger animation..

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
Morgan
  • 103
  • 9
  • 1
    "I had to put a Toolbar in my layout so I had a reference to it, to pass to ActionBarToggle." – It's not necessary to provide your own `Toolbar` for an `ActionBarDrawerToggle` in an `AppCompatActivity`. "I actually had it nearly perfect, until I had to declare a Toolbar in XML" – If you set the `Toolbar` as the support `ActionBar` in `AppCompatActivity`, it will take on the `ActionBar` styling you've set in your theme. – Mike M. May 05 '18 at 09:37
  • I did try a bunch of things and still couldn't get the ActionBarDrawerToggle working. Now that I do have it working, with an explicit Toolbar in XML, I don't see why I can't replicate the styling. I have tried dozens of different methods, but I still can't get my current setup to work the same as a system defined Toolbar. It's truly an awful setup. In my opinion a classic example of why Android programming is broken. Show me one page or reference that gives enough information for me to fix this problem.. I've exhausted my search filter bubble looking for answers. Still trial and error ftw. – Morgan May 05 '18 at 09:41
  • 1
    Uh, OK, what are you saying, then? Do you want to fix the `ActionBarDrawerToggle` with the default `ActionBar`? If so, then we'd need to see the Java code for that. Or do you want to stick with what you've got now, and try to fix the styling, and drawer placement? If this, you'll need to rearrange the layout, be sure to set the `Toolbar` as the support `ActionBar`, and possibly a couple of other things, depending on what exactly isn't working currently. – Mike M. May 05 '18 at 09:49
  • Honestly, I tried a bunch of solutions to get ActionBar toggle working without an XML defined Toolbar (because you pass Toolbar as a variable to ActionBarToggle right?). What I would really like is to keep the Toolbar as defined in XML and make the couple of styling adjustments that I know should be possible. I should be able to use a Dark.ActionBar theme parent to get a light Hamburger, Title and Options menu, but it seems easier said than done. I've tried moving the Toolbar/AppBar around in the Activity layout and I cannot get it to draw over the NavigationDrawer too. – Morgan May 05 '18 at 10:37
  • I've also tried every type of Elevation setting on AppBar, ToolBar etc.. I cannot get rid of the border around my ToolBar. Surely it shouldn't be this hard? – Morgan May 05 '18 at 10:38
  • 1
    To get the `Toolbar` above the drawer, remove the enclosing `` and ``, as they're not really doing anything, then rearrange your layout similar to https://stackoverflow.com/a/26555224. Removing the `` should take care of the shadow, too, I believe. Then make sure to call `setSupportActionBar()` with the `Toolbar` in your `Activity` to get it to take the `ActionBar` styling you've specified. – Mike M. May 05 '18 at 10:48
  • Thanks mate. I did find some joy in your link. I deleted the AppBarLayout. I had to keep my FrameLayout as a container for my Fragment. I wrapped the whole lot in a RelativeLayout and moved the Toolbar to be the last item and I've got exactly the behaviour I wanted. Much appreciated. I spent a lot of hours in trial and error to fix that. Have a good one! – Morgan May 05 '18 at 22:29
  • 1
    Oh, that's what the `FrameLayout` is for. You probably wanna change that to a vertical `LinearLayout` then, if you still have the `Toolbar` directly in it, otherwise you'll end up with `Fragment` content behind the `Toolbar`, covered by it. – Mike M. May 06 '18 at 00:19

0 Answers0