Android - 如何在工具栏按钮上实现这种阴影背景效果？答案

【问题标题】：Android - How to achieve this shadowy background effect on toolbar's buttons?Android - 如何在工具栏按钮上实现这种阴影背景效果？
【发布时间】：2019-03-02 23:23:59
【问题描述】：

标题足够描述性。

【问题讨论】：

标签： android background android-toolbar android-appbarlayout appbar

【解决方案1】：

创建一个类似于 (bg_transluecent.xml) 的可绘制对象：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="false" android:state_focused="false">
    <shape
        android:shape="oval">
        <solid
            android:color="#99000000"/>
    </shape>
</item>

#99000000 是半透明的颜色代码。

另外，创建一个自定义工具栏，然后将此可绘制对象设置为 imageView 的背景。

要创建自定义工具栏，请创建这样的布局资源文件（或根据您的需要）， custom_toolbar.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/custom_bar_image"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_alignParentEnd="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/search"
    android:background="@drawable/bg_transluecent"
    android:layout_marginEnd="10dp"/>

<TextView
    android:id="@+id/name_custom_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:textColor="#fff"
    android:text="Display Name"
    android:textSize="18sp" />

<TextView
    android:id="@+id/last_seen_custom_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#f5f5f5"
    android:layout_alignStart="@+id/name_custom_bar"
    android:layout_below="@+id/name_custom_bar"
    android:text="Last Seen" />

</RelativeLayout>

然后将其设置在您的活动中，例如，

setSupportActionBar(findViewById<Toolbar>(R.id.you_toolbar_id));

ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);

LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View action_bar_view = inflater.inflate(R.layout.chat_custom_bar,null);
actionBar.setCustomView(action_bar_view);

或者您可以简单地在工具栏中添加一些视图，例如，

    <android.support.v7.widget.Toolbar
            style="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:titleTextColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:backgroundTint="@android:color/transparent">

       //Your views here with bg_transluecent.xml as background

    </android.support.v7.widget.Toolbar>

【讨论】：