如何在“物料底部”应用程序栏中自定义视图?

时间:2019-05-14 04:45:26

标签: android android-layout

我正在我的应用程序中设置“物料底部应用程序栏”,一切正常。根据文档,我可以设置Menu,Fab以及Bottom App Bar的某些行为。但是我的问题是如何自定义底部应用栏的视图?下面是我的布局xml。

 <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <androidx.appcompat.widget.Toolbar
                app:titleTextAppearance="@style/AppToolbarAppearance.Main"
                android:background="@color/colorPrimary"
                android:id="@+id/toolbar"
                app:titleTextColor="@android:color/white"
                app:title="Job Detail"
                app:navigationIcon="@drawable/ic_material_left_white"
                android:layout_width="match_parent"
                app:layout_scrollFlags="scroll|enterAlways"
                android:layout_height="?attr/actionBarSize"
        />

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

    <include layout="@layout/layout_job_detail"
             android:id="@+id/main_layout"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

    <com.google.android.material.bottomappbar.BottomAppBar
            tools:backgroundTint="@color/colorPrimary"

            app:fabCradleVerticalOffset="8dp"
            app:fabCradleRoundedCornerRadius="8dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="4dp"

            style="@style/bottom_bar"
            android:layout_width="match_parent"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/grey_100"
            app:hideOnScroll="true"
            android:id="@+id/bottomappbar"
            android:layout_height="?attr/actionBarSize"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            app:srcCompat="@drawable/ic_star_solid"
            app:fabSize="normal"
            app:layout_anchor="@id/bottomappbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    />

</androidx.coordinatorlayout.widget.CoordinatorLayout> 

我真正想做的就像下面的图片enter image description here

  

我只想在底部的应用程序栏中喜欢,左侧的Apply按钮,右侧的两个菜单。

1 个答案:

答案 0 :(得分:1)

尝试一下

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:layout_gravity="bottom">


    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorPrimaryDark">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:background="?android:attr/selectableItemBackground"
                android:gravity="center"
                android:text="Apply"
                android:textColor="#FFFFFF" />

            <ImageView
                android:id="@+id/ivOne"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:layout_toStartOf="@id/ivTwo"
                android:contentDescription="@string/app_name"
                android:src="@drawable/ic_drawer" />

            <ImageView
                android:id="@+id/ivTwo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:contentDescription="@string/app_name"
                android:src="@drawable/ic_favorite" />

        </RelativeLayout>

    </com.google.android.material.bottomappbar.BottomAppBar>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

输出

enter image description here