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

Question

由于我是 Android 的新手，我不知道如何在 1:

中创建如下所示的按钮

按钮应具备：

正常背景为紫色，点击后应变为红色。（达成）
按钮左上角的圆形图标，按钮内的一半图标和按钮外的一半图标。
右侧按钮内的箭头图像。（已实现）

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

通过以下实现，我能够获得如上图第 2 部分所示的结果：

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

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

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

Rectangle shape Button with Circular icon on top in Android

icons

android

button

android-custom-view

android-button