Applying a gradient background on a toolbar

Issue

I have created a custom gradient drawable file that i want to use as my Toolbar's background but i can't seem to apply it. It just shows up as plain gray (see the image). Am i doing something wrong? I looked at multiple posts but nothing has worked for me so far.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <Toolbar
        android:id="@+id/home_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/home_toolbar_gradient"
        android:elevation="4dp"
        android:minHeight="70dp"
        android:theme="@style/customToolbar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <TextView
            android:id="@+id/title_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/Montserrat-Bold"
            android:gravity="center"
            android:text="@string/home"
            android:textAlignment="center"
            android:textColor="@android:color/white" />
    </Toolbar>

    <!-- Using a view with a gradient to create a drop navbar_shadow effect for the navbar -->
    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_above="@id/bottom_nav_bar"
        android:background="@drawable/navbar_shadow" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:labelVisibilityMode="labeled"
        android:id="@+id/bottom_nav_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@drawable/nav_selected_item_color"
        app:itemTextColor="@drawable/nav_selected_item_color"
        app:menu="@menu/bottom_nav_bar">


    </com.google.android.material.bottomnavigation.BottomNavigationView>

</RelativeLayout>

home_toolbar_gradient.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:type="linear"
        android:startColor="@color/toolbar_starting_color"
        android:endColor="@color/toolbar_ending_color"
        android:angle="75" />
</shape>

styles.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:fontFamily">@font/montserrat_medium</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- Custom Rounded Dialog style -->
    <style name="RoundedDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:windowBackground">@drawable/rounded_corners</item>
    </style>

    <style name="customToolbar" parent="Theme.AppCompat.Light.NoActionBar" />

</resources>

in MainActivity.java:

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar homeToolbar = findViewById(R.id.home_toolbar);

setSupportActionBar(homeToolbar);

and in the manifest:

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

Solution

For anyone interested, i actually found the issue. The angle attribute in a gradient drawable needs to be a multiple of 45 otherwise you'll get a subtle rendering error in the layout preview. Just change it to a multiple of it that suits your needs and the gradient will take effect.

Answered By - Stelios Papamichail