代码之家 › 专栏 › 技术社区 › tamtom

工具栏图标的圆形背景

android-layout android

-1

tamtom · 技术社区 · 7 年前

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

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

4 回复 | 直到 7 年前

Mohammad Sayed 7 年前

完整参考代码 这就是结果

在应用程序主题或活动样式中添加以下内容 NoActionBar 活动

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

将工具栏添加到 activity.xml 并根据需要自定义视图

<?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 在抽屉中,用于箭头的抽屉

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

Darish 7 年前

创建自定义工具栏并将自定义图标放在其中。

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

Yupi 7 年前

您可以创建包含自定义背景的容器 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" />

调整填充, 图片框 为了得到想要的外观,但基本上你会有这样的东西:

PÄ±nar Türkdal 7 年前

1) Btn_Ripple_背景

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