Android中顶部带有圆形图标的矩形按钮

Question

由于我是 Android 新手，我不知道如何在 1 中创建如下所示的按钮：

按钮应该拥有：

1. 正常背景为紫色，单击时应变为红色。 （达到）
2. 按钮左上角的圆形图标，按钮中的一半图标和按钮外的一半图标。
3. 右侧按钮内的箭头图像。（已实现）

有什么办法可以在按钮的左上角实现这个图标。我为每个按钮分别设置了红色和紫色的图标图像。

通过以下实现，我能够达到上图第 2 部分中的结果：

活动 XML：

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn_ETOPUP"
        style="@style/btnServiceTheme"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="10dp"
        android:text="@string/service_etopup"
        android:textAlignment="center" />
    <Button
        android:id="@+id/btn_QuickPay"
        style="@style/btnServiceTheme"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="@string/service_QuickPay"
        android:textAlignment="center" />
    <Button
        android:id="@+id/btn_EVouchers"
        style="@style/btnServiceTheme"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="10dp"
        android:text="@string/service_EVouchers"
        android:textAlignment="center" />
</LinearLayout>

样式 XML：

<style name="btnServiceTheme" parent="AppTheme">
<item name="android:textSize">25sp</item>
<item name="android:textAllCaps">false</item>
<item name="android:textColor">@color/white</item>
<item name="android:drawableRight">@mipmap/arrow_right_white</item>
<item name="android:background">@drawable/button_service</item>
<item name="android:layout_marginLeft">20dp</item>
<item name="android:layout_marginRight">20dp</item>
<item name="android:paddingTop">20dp</item>
<item name="android:paddingBottom">20dp</item>
<item name="android:paddingRight">25dp</item>
<item name="android:drawablePadding">-25dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">match_parent</item>

选择器 XML：

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/purple" android:state_pressed="false" android:state_selected="false" />
    <item android:drawable="@color/red" android:state_pressed="true" />
    <item android:drawable="@color/red" android:state_pressed="false" android:state_selected="true" />
</selector>

提前致谢。

Answer 1

尝试使用下面的 XML 作为单独的布局组件：

<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="center">

   <ImageView
       android:layout_width="35sp"
       android:layout_height="35sp"
       android:elevation="3dp"
       android:layout_marginLeft="5dp"
       android:scaleType="fitCenter"
       android:src="@drawable/ic_logo_bmw" />
   <Button
       android:id="@+id/btn_get_data"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10dp"
       android:background="@drawable/rectangular_bg"
       android:text="Quick-Pay"
       android:textColor="@android:color/white" />

</FrameLayout>

使用包含标签在您各自的 XML 布局中使用它。您的输出将是这样的：