长方形按钮，顶部的圆形图标中的Android

Question

由于我是新来的Android，我不知道在1到创建类似下面的按钮：

按钮应该posses：

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布局，使用此。你的输出将是这样的：