CODEWITHSUNDEEP
androidmaterial-designandroid-toolbar
copolii
copolii

Reputation: 14506

Gradient background on material themed toolbar

I have a photo preview activity that has an overlay actionbar. I don't want this view to have a full opaque color because it would obstruct the image when zoomed. I created a gradient to set as the background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

<gradient
    android:type="linear"
    android:startColor="@color/theme_main_color_40pct"
    android:endColor="@color/theme_main_color_0pct"
    android:angle="270"/>
</shape>

I assign this background to my toolbar via the following theme:

<style name="my_toolbar" >
    <item name="android:background">@drawable/ab_gradient_purple</item>
    <item name="android:minHeight">?attr/actionBarSize</item>
    <item name="android:textColorPrimary">?attr/colorAccent</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

In my layout:

<android.support.v7.widget.Toolbar
    android:id="@id/toolbar"
    app:theme="@style/my_toolbar"
    android:elevation="5dp"
    android:layout_gravity="top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"/>

When I open this activity, it looks like the toolbar is taking that background and applies it to all subviews, resulting in the picture below. How do I prevent this overlay?

Overlaid backgrounds

I've tried playing with backgroundTint and backgroundTintMode, but it seems like they're not available for pre-lollipop.

Upvotes: 5

Views: 7062

Answers (1)

copolii
copolii

Reputation: 14506

It seems that applying the background through the style applies it too all nested items. I set the style background to @android:color/transparent and in my layout:

<android.support.v7.widget.Toolbar
    android:id="@id/toolbar"
    app:theme="@style/my_toolbar"
    android:background="@drawable/ab_gradient_purple"
    android:elevation="5dp"
    android:layout_gravity="top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"/>

The result is exactly what I was looking for: enter image description here

Upvotes: 7

Related Questions