android - 工具栏图标的圆形背景

Question

有没有办法为工具栏图标添加背景，
我想实现这个设计


或者还有另一种方法可以做到这一点。因为它有溢出图标

Answer 1

完整引用代码
这是结果

在您的应用主题或 Activity 样式中添加以下内容以使其成为 NoActionBar Activity

    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

在您的 activity.xml 中添加工具栏并根据需要自定义 View

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
 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:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="@color/colorPrimary"
 android:theme="@style/AppTheme"
 app:layout_collapseMode="parallax"
 app:popupTheme="@style/AppTheme">                     

<RelativeLayout
    android:layout_width ="match_parent"
    android:layout_height="match_parent">
    <ImageButton
        android:id="@+id/back_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:background="@drawable/cir_shape"
        android:onClick="clickBack"
        android:padding="6dp"
        android:visibility="visible"
        app:srcCompat="@drawable/ic_arrow_back_black_24dp"
        tools:ignore="VectorDrawableCompat" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/rect_shape"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="3dp">

        <ImageView
            android:id="@+id/app_bar_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerInside"
            android:visibility="visible"
            android:layout_marginRight="3dp"
            app:srcCompat="@drawable/ic_visibility_black_24dp"
            android:layout_marginEnd="3dp" />

        <TextView
            android:id="@+id/app_bar_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="1.3K"
            android:textAllCaps="false"
            android:textColor="@color/whiteColor"
            android:textSize="18sp"
            android:textStyle="bold"
            android:visibility="visible" />


    </LinearLayout>
</RelativeLayout>

3.添加支持操作栏为 toolbar在 MainActivity.java在 OnCreate()

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
    }

4. circle_shape.xml在arrow_back drawable的drawable中

 <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="#95686566" />
    </shape>

5. rectangle_shape.xml在可绘制的

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#95686566" />
    </shape>

6.自定义3个点(溢出图标)添加

<item  name="actionOverflowButtonStyle">@style/ThreeDotsStyle</item>

在你的 style.xml主旋律

     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->        
    <item name="actionOverflowButtonStyle">@style/ThreeDotsStyle</item>
</style>

并创建它的主题

 <style name="ThreeDotsStyle" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/my_threedots_menu</item>
    </style>

7. my_threedots_menu.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#95686566" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>

    </item>
    <item
        android:drawable="@drawable/ic_menu_dots"
        android:gravity="center" />

</layer-list>

8.给你的菜单充气

 @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.my_menu, menu);
        return true;
    }