Toolbar with Gradient Background set title background transparent

Question

I defined a Gradient Drawable:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:endColor="#2F3F59"
        android:startColor="#4078A7"
        android:type="linear"
        android:angle="90" />

</shape>

And I set it on my Toolbar:

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/textcolorsecundary</item>
    <item name="actionMenuTextColor">@color/textcolorsecundary</item>
    <item name="android:textColorSecondary">@color/textcolorsecundary</item>
    <item name="android:background">@drawable/custom_background_blue</item>
</style>

This is working! BUT:

enter image description here

This is what happens with the title. It gets the same gradient. This looks really ugly so I have to change this. How can I set the background of that info text to be transparent?

check this -- http://stackoverflow.com/questions/1492554/set-transparent-background-of-an-imageview-in-android — Ag.Pro. Dev, Mar 02 '15 at 18:47
Hello. I dont think that this can help me. I doubt that the title is an ImageView and i also dont know how to access the background of the title of the toolbar. — Mulgard, Mar 02 '15 at 18:49

score 5 · Answer 1 · answered Sep 02 '15 at 19:00

5

You can also solve this by setting the background of the toolbar to your drawable.

mToolbar().setDrawable(R.drawable.your_gradient)

answered Sep 02 '15 at 19:00

Charles Durham

2,445
16
17

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

link - Set transparent background of an imageview on Android

use this color in your color xml file and then give this color to your startcolor and end color

edited May 23 '17 at 12:32

Community

1
1

answered Mar 02 '15 at 19:43

Ag.Pro. Dev

11
3

This is totally wrong. I dont want my toolbar to be transparent.... i want the background of the title to be transparent...... – Mulgard Mar 03 '15 at 07:33
i sayed that just create translate color which you can use any where – Ag.Pro. Dev Mar 03 '15 at 14:15
and how to access the background of the title of the toolbar? Thats the core problem. setting a transparent background ist not the problem! – Mulgard Mar 03 '15 at 14:51

score 0 · Accepted Answer · answered Mar 03 '15 at 15:05

The solution is to disable the title of the toolbar:

this.getSupportActionBar().setDisplayShowTitleEnabled(false);

and to add a custom TextView:

<?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="?android:attr/actionBarSize"
    android:elevation="2dp"
    android:focusable="false"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    app:theme="@style/AppTheme.Toolbar" >

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:background="@null"
        android:text="Toolbar Title"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

</android.support.v7.widget.Toolbar>

score 0 · Answer 4 · answered May 28 '20 at 23:16

Changing the background color to transparent in the style section should fix the issue

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">#00000000</item>
</style>

The question How to make title background transparent on android app had similar issue above solution did the trick. The android app was for Renesas RX130 and Texas Instrument CC2650 BLE solution. Bellow is solution after the fix.

Toolbar with Gradient Background set title background transparent

4 Answers4

Linked