Question

是否可以为工具栏图标添加背景，我想实现这个设计

或者还有另一种方法。因为它具有溢出图标

Answer 1

您可以在Toolbar内创建具有自定义背景的容器，将ImageView放入其中，并在其中添加一些填充，例如：

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/middle_background">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:src="@drawable/baseline_arrow_forward_white_24" />
</LinearLayout>

背景middle_background.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/holo_orange_dark" />

调整填充ImageView以获得所需的外观，但基本上您会得到以下内容：

Answer 2

创建一个自定义工具栏，并将您的自定义图标放入其中。

  <android.support.v7.widget.Toolbar 
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="@style/myCustomAppBarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark">
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <!-- your custom icons goes here -->
</RelativeLayout>
</android.support.v7.widget.Toolbar>

Answer 3

完整的参考代码 这就是结果

在您的应用主题或活动样式中添加以下内容，使其成为timer_t活动
```
NoActionBar
```
将工具栏添加到<item name="windowActionBar">false</item> <item name="windowNoTitle">true</item>中，并根据需要自定义视图
```
activity.xml
```

3。将支持操作栏添加为<?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>中toolbar中的MainActivity.java

OnCreate()

4。arrow_back可绘制对象的可绘制对象中的Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); if (toolbar != null) { setSupportActionBar(toolbar); }

circle_shape.xml

5。可绘制对象中的<?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>

rectangle_shape.xml

6。要自定义3个点（溢出图标），请添加

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

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

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

my_threedots_menu.xml

8。添加菜单

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

Answer 4

1） btn_ripple_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2） 波纹圆周形

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

最后android:foreground="@drawable/ripple_btn_background"

工具栏图标的圆形背景

4 个答案: