Bouton de forme rectangulaire avec l'icône circulaire sur le dessus dans Android

Question

Comme je suis nouveau pour Android, je n'ai aucune idée de créer un bouton comme ci-dessous en 1:

Bouton doit posséder:

1. Le fond normal violet et lorsqu'il est cliqué doit devenir rouge. (atteint)
2. Icône circulaire en haut à gauche du bouton, demi-icône dans le bouton et demi-partie de l'icône en dehors du bouton.
3. Arrow image sur le bouton droit à l'intérieur. (Atteint)

Est-il possible de réaliser cette icône en haut à gauche de la touche. J'ai les images d'icône dans les deux couleurs rouge et pourpre pour chaque bouton séparément.

En dessous de la mise en œuvre, je suis en mesure d'obtenir le résultat de la partie 2 de l'image ci-dessus:

XML d'activité:

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

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

Sélecteur 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> 

Merci d'avance.

Answer 1

Essayez d'utiliser ci-dessous XML en tant que composant de mise en page séparée:

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

utilisant balise include pour l'utiliser dans votre mise en page XML respectifs. Votre sortie sera quelque chose comme ceci: