Transparent toolbar on Android

Asked

Viewed 667 times

0

I need to make mine toolbar be transparent, or at least remove that shaded line below it. Someone has been through a similar situation?

  • 1

    Welcome to the SOPT, before you take a tour http://answall.com/tour. and if you have tried something, put it to us to help you better

1 answer

0


Elevation

That "shaded line" that concerns you elevation. You can remove setting the value of it to 0dp. Then your code would look like this:

<android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="0dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Toolbar Transparente

Regarding transparency, one of the ways you do this is you work with your style. All you need is to define the theme that hides the toolbar, setting the style of the action bar with transparent background and setting this style for the widget toolbar.

<style name="Theme.Custom" parent="@android:style/Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="CustomActionBar" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Transparent Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Toolbar should be above content-->
    <include layout="@layout/toolbar" />

</RelativeLayout>

Toolbar Layout

<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="wrap_content"
    app:theme="@style/CustomActionBar"/>

Another way would be:

You can set the background for Android, transparent color pattern, which works great. Add this to the layout you want a transparent toolbar:

android:background="@android:color/transparent"

If you want to change alpha programmatically, you can modify alpha at the very bottom of the toolbar. Just get an instance of drawable and define the alpha:

mToolbar = findViewById(R.id.my_toolbar);
mToolbar.getBackground().setAlpha(0);
  • Thank you so much for your help, I’ll test it right here.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.