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

问题描述 投票:0回答:1

标题足够描述。

Google maps app bar buttons

android background android-toolbar android-appbarlayout appbar
1个回答
0
投票

像(bg_transluecent.xml)一样创建一个drawable:

<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>

qazxsw poi是半透明的颜色代码。

此外,创建自定义工具栏,然后将此drawable设置为imageView的背景。

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

#99000000

然后在你的活动中设置它,比如

<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);
© www.soinside.com 2019 - 2024. All rights reserved.