How to bottom app bar background color in kitkat

Question

I trying to set bottom app bar background color to transparent. But in kitkat, bottom app bar background color is not assigned properly. In kitkat, bottom app bar background is colored as kind of white. How to set bottom app bar background color as I want?

And I don't understand 'background' and 'backgroundTint'. Please let me know about this.

Thank you.

Here is my xml code.

 <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/circle_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/main_bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/view_transparent"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="2dp"
        app:hideOnScroll="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="@android:color/transparent">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@android:color/transparent"
                android:layout_toLeftOf="@id/empty_view"
                android:gravity="center_vertical">

                <LinearLayout
                    android:id="@+id/main_catalogue_btn"
                    android:layout_width="56dp"
                    android:layout_height="56dp"
                    android:layout_centerInParent="true"
                    android:background="@android:color/transparent"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/catalogue_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        app:srcCompat="@drawable/ic_format_list_bulleted_white_24dp" />

                    <TextView
                        android:id="@+id/catalogue_txt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Catalogue"
                        android:textColor="@android:color/white"
                        android:textSize="12dp" />
                </LinearLayout>
            </RelativeLayout>

            <View
                android:id="@+id/empty_view"
                android:layout_width="68dp"
                android:layout_height="?actionBarSize"
                android:layout_centerInParent="true" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@android:color/transparent"
                android:layout_toRightOf="@id/empty_view"
                android:gravity="center_vertical">

                <LinearLayout
                    android:id="@+id/main_info_btn"
                    android:layout_width="56dp"
                    android:layout_height="56dp"
                    android:layout_centerInParent="true"
                    android:background="@android:color/transparent"
                    android:gravity="center_vertical"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/main_info_img"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        app:srcCompat="@drawable/ic_info_white_24dp" />

                    <TextView
                        android:id="@+id/main_info_txt"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:text="Info"
                        android:textColor="@android:color/white"
                        android:textSize="12dp" />
                </LinearLayout>
            </RelativeLayout>
        </RelativeLayout>
    </android.support.design.bottomappbar.BottomAppBar>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/main_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:borderWidth="0dp"
        app:elevation="1dp"
        app:fabSize="normal"
        app:layout_anchor="@id/main_bottom_app_bar"
        app:layout_anchorGravity="center"
        app:pressedTranslationZ="1dp"
        app:srcCompat="@drawable/ic_play_arrow_white_24dp" />
</android.support.design.widget.CoordinatorLayout>

color:view_transparent => #3b3737

Answer 1

You should use app:backgroundTint. The BottomAppBar has its own background and tint is applied to that background using the backgroundTint attribute of support library, if instead android:backgroundTint is used then it will be applied to general View background from android framework as specified here which is supported from API 21 (LOLLIPOP).

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/main_bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/view_transparent"
    app:fabAlignmentMode="center"
    app:fabCradleRoundedCornerRadius="2dp"
    app:hideOnScroll="true">