I'm implementing a custom header for my app. In AppBarLayout I'm using Toolbar and my custom layout (named CustomHeader).
My CustomHeader has bottom left and bottom right rounded corners. To show properly I set android:background="@null".
Layout for appBarLayout with custom header:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/logoAppbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
android:elevation="@dimen/_4sdp">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/imgToolbarLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_toolbar_logo" />
</android.support.v7.widget.Toolbar>
<CustomHeader
android:id="@+id/stepOneHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF"
app:selected_step="1"/>
<ProgressBar
android:id="@+id/stepProgressBar"
style="@style/AppTheme.StepProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="0"
android:visibility="gone" />
</android.support.design.widget.AppBarLayout>
And this is my CustomHeader's layout. I omitted some parts for brevity:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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="wrap_content"
android:background="@drawable/header_bg">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_marginStart="@dimen/_18sdp"
android:layout_marginEnd="@dimen/_18sdp"
android:layout_marginTop="@dimen/_12sdp"
android:layout_marginBottom="@dimen/_12sdp">
<View
android:id="@+id/headerDivider"
android:layout_width="match_parent"
android:layout_height="@dimen/_2sdp"
android:background="@drawable/bg_divider_border"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
...
</android.support.constraint.ConstraintLayout>
</FrameLayout>
This is CustomHeader's background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:width="2dp"
android:color="@color/colorPrimary" />
<corners
android:bottomLeftRadius="22dp"
android:bottomRightRadius="22dp"/>
</shape>
What is going on is: no matter what I do, at the AppBarLayout bottom borders I always have a white background. The image is below:
Notice the screens continues after header.
I tried 2 solutions founded on SO: ActionBar with rounded edges How to make toolbar with rounded corners and elevation inside appbarlayout? Like this picture
My issue is pretty much the same as the second link. Any of them worked for me. I only want this white background transparent.
