CODEWITHSUNDEEP
androidmaterial-designandroidx
Jakub Gruber
Jakub Gruber

Reputation: 775

Transparent AppBarLayout

I'm developing an application where I'd like to have a transparent Toolbar (AppBarLayout), but still see the navigation icon button. Unfortunately, best I can achieve is transparent toolbar that still drops the shadow (elevation).

I have a full screen dialog fragment, see style:

<style name="FullScreenImageStyle" parent="AppTheme">
        <item name="android:windowNoTitle">true</item>

        <item name="android:windowFullscreen">false</item>
        <item name="android:windowIsFloating">false</item>


        <item name="android:windowEnterAnimation">@anim/slide_up</item>
        <item name="android:windowExitAnimation">@anim/slide_down</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

The layout for the fragment looks like this (only the beginning here):

<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </com.google.android.material.appbar.AppBarLayout>

Later when initializing the dialog fragment, I set the fullscreen style and the navigation icon's resource id.

The result looks like this. Note the toolbar's shadow on top of the screen: enter image description here

Any ideas how to solve the problem, please?

Upvotes: 11

Views: 7363

Answers (6)

Ali Azaz Alam
Ali Azaz Alam

Reputation: 1868

Remove AppBarLayout and directly use Toolbar:

<androidx.coordinatorlayout.widget.CoordinatorLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <androidx.appcompat.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@android:color/transparent"
     android:fitsSystemWindows="true"
     android:paddingStart="6dp"
     android:paddingEnd="16dp"
     android:translationZ="1dp"
     app:contentInsetStartWithNavigation="0dp"
     app:navigationIcon="@android:drawable/ic_menu_close_clear_cancel" />

  <FrameLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior">

     //your content

  </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

It will give you this view:

Transparent Toolbar

Upvotes: 0

LE24
LE24

Reputation: 365

do this

 <android.support.design.widget.AppBarLayout
  ...
  android:stateListAnimator="@null"
  ... />

Upvotes: 0

Rafael
Rafael

Reputation: 6369

Use this code

 <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null">

appBarLayout.setOutlineProvider(null)

Upvotes: 10

Jakub Gruber
Jakub Gruber

Reputation: 775

In the end I solved that by removing AppBarLayout, setting toolbar to transparent background and adding translationZ, thought it's a bit hacky.

Here's the code for reference:

<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:translationZ="2dp"
            android:fitsSystemWindows="true"/>

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <!-- Some other layouts -->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 5

Infusion Analysts
Infusion Analysts

Reputation: 489

Try this code .. and put your image and your needs. this code in toolbar icon and some text and right side also search icon..

  <com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        android:theme="@style/MyToolbar"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:titleTextAppearance="@style/MyToolbar">

        <ImageView
            android:id="@+id/headerIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_6sdp"
            android:src="@drawable/ic_edit_location_black"
            android:visibility="gone" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_6sdp">

            <TextView
                android:id="@+id/header"
                style="@style/MyToolbar"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center_vertical"
                android:textColor="@color/primary"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageView
                android:id="@+id/ivSearch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/_10sdp"
                android:src="@drawable/search_icon"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.appcompat.widget.Toolbar>


</com.google.android.material.appbar.AppBarLayout>

Upvotes: -1

Hasan Kucuk
Hasan Kucuk

Reputation: 2799

Try this ; 

 android:background="@color/transparent"
 android:elevation="0dp"
 app:elevation="0dp"

<color name="transparent">#00000000</color>

Upvotes: 18

Related Questions