CODEWITHSUNDEEP
android
Mulgard
Mulgard

Reputation: 10589

Toolbar with Gradient Background set title background transparent

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?

Upvotes: 4

Views: 3048

Answers (4)

Mahendra Gunawardena
Mahendra Gunawardena

Reputation: 1976

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.

enter image description here

Upvotes: 0

Charles Durham
Charles Durham

Reputation: 2495

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

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

Upvotes: 5

Mulgard
Mulgard

Reputation: 10589

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>

Upvotes: 0

Ag.Pro. Dev
Ag.Pro. Dev

Reputation: 11

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

Upvotes: 0

Related Questions