隐藏在工具栏后面的自定义浮动操作按钮
custom floating action button hidden behind toolbar
我想在屏幕左上角显示自定义浮动操作按钮。有扩展的浮动操作按钮，但它不符合我的目的，因为我想要一个带有两个图像 、一个后退图标和另一个 activity 图像图标的 按钮。所以为了实现这种外观，我使用了自定义卡片视图。但问题是按钮隐藏在工具栏后面。如何提出来，我用了 elevation 好像没用。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/height_toolbar"
android:background="@drawable/background_small"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/nav_button_image"
android:orientation="horizontal"
android:paddingBottom="5dp">
<!-- toolbar counter 1-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_plants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="@id/linearLayout_app_bar_toolbar_to_do"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/plants"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/plant_count_appbar_main"
android:layout_width="wrap_content"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:text="0/0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
<!-- toolbar counter 2-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_to_do"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/linearLayout_app_bar_toolbar_warnings"
app:layout_constraintStart_toEndOf="@id/linearLayout_app_bar_toolbar_plants"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/to_do"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/todo_count_appbar_main"
android:layout_width="wrap_content"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:text="0/0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
<!-- toolbar counter 3-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_warnings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/linearLayout_app_bar_toolbar_to_do"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/warnings"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/warning_count_appbar_main"
android:layout_width="@dimen/textView_size_actionbar"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:background="@drawable/red_circle"
android:text="0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="@dimen/height_imageView_actionbar_logo"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="@drawable/gardify_logo_header" />
</RelativeLayout>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_gravity="right"/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
app:cardBackgroundColor="@color/colorPrimary"
android:elevation="10dp"
android:layout_marginTop="80dp"
app:cardCornerRadius="0dp"
app:popupTheme="@style/AppTheme.AppBarOverlay"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/margin_padding_size_small"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:src="@drawable/ic_back_arrow" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/gardify_app_icon_to_do_kalender" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
尝试将 <CardView /> 元素移动到 <AppBarLayout /> 元素上方
尝试使用
app:elevation
而不是
android:elevation
然后将 cardview 的高度设置为大于 appbar/toolbar。
我想在屏幕左上角显示自定义浮动操作按钮。有扩展的浮动操作按钮，但它不符合我的目的，因为我想要一个带有两个图像 、一个后退图标和另一个 activity 图像图标的 按钮。所以为了实现这种外观，我使用了自定义卡片视图。但问题是按钮隐藏在工具栏后面。如何提出来，我用了 elevation 好像没用。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/height_toolbar"
android:background="@drawable/background_small"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/nav_button_image"
android:orientation="horizontal"
android:paddingBottom="5dp">
<!-- toolbar counter 1-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_plants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="@id/linearLayout_app_bar_toolbar_to_do"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/plants"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/plant_count_appbar_main"
android:layout_width="wrap_content"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:text="0/0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
<!-- toolbar counter 2-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_to_do"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/linearLayout_app_bar_toolbar_warnings"
app:layout_constraintStart_toEndOf="@id/linearLayout_app_bar_toolbar_plants"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/to_do"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/todo_count_appbar_main"
android:layout_width="wrap_content"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:text="0/0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
<!-- toolbar counter 3-->
<LinearLayout
android:id="@+id/linearLayout_app_bar_toolbar_warnings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/linearLayout_app_bar_toolbar_to_do"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/warnings"
android:textAllCaps="true"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar" />
<TextView
android:id="@+id/warning_count_appbar_main"
android:layout_width="@dimen/textView_size_actionbar"
android:layout_height="@dimen/textView_size_actionbar"
android:layout_gravity="center"
android:background="@drawable/red_circle"
android:text="0"
android:textAlignment="center"
android:textColor="@color/bg_color"
android:textSize="@dimen/text_size_textView_actionbar"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="@dimen/height_imageView_actionbar_logo"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="@drawable/gardify_logo_header" />
</RelativeLayout>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:layout_gravity="right"/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
app:cardBackgroundColor="@color/colorPrimary"
android:elevation="10dp"
android:layout_marginTop="80dp"
app:cardCornerRadius="0dp"
app:popupTheme="@style/AppTheme.AppBarOverlay"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/margin_padding_size_small"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:src="@drawable/ic_back_arrow" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/gardify_app_icon_to_do_kalender" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
尝试将 <CardView /> 元素移动到 <AppBarLayout /> 元素上方
尝试使用
app:elevation
而不是
android:elevation
然后将 cardview 的高度设置为大于 appbar/toolbar。