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

时间:2019-03-02 23:24:00

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

标题具有足够的描述性。

Google maps app bar buttons

1 个答案:

答案 0 :(得分:0)

创建类似(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>