Créer une bulle de chat avec la forme comme dans le fichier .png

Question

Pourrais-je demander si quelqu'un sait comment créer une forme de xml de la bulle de discussion ci-dessous? Les seuls exemples que j'ai trouvés en ligne sont deux formes distinctes qui ont été placées en deux arrière-plans séparés dans une mise en page: un triangle et un rectangle. J'ai essayé de combiner le triangle et le rectangle en vain. Le triangle semble se cacher dans le rectangle. La définition d'un attribut top sur le triangle pour le déplacer vers le bas rend l'objet ImageView vide.

S'il vous plaît voir ce que j'ai essayé:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <!--rectangle with rounded corners--> 
    <item android:top="0dp" android:bottom="20dp"> 
     <shape xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle"> 
      <solid android:color="@android:color/black" /> 
      <size 
       android:width="106dp" 
       android:height="20dp"/> 
      <stroke 
       android:width="1dp" 
       android:color="#000" /> 
      <corners android:radius="8dp" /> 
     </shape> 
    </item> 
    <!--triangle--> 
    <item android:bottom="0dp" android:top="20dp" android:gravity="center_horizontal|bottom"> 
     <rotate 
      android:fromDegrees="45" 
      android:toDegrees="45" 
      android:pivotX="135%" 
      android:pivotY="15%"> 
      <shape android:shape="rectangle"> 
       <solid android:color="@android:color/black" /> 
       <size 
        android:height="10dp" 
        android:width="10dp"/> 
      </shape> 
     </rotate> 
    </item> 
</layer-list> 

C'est l'utilisation dans le imageView:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="net.eventilate.shapes.Balloon"> 
    <ImageView 
     android:layout_width="106dp" 
     android:layout_height="30dp" 
     android:id="@+id/imageView2" 
     android:contentDescription="@string/test" 
     android:background="@drawable/balloon" 
     android:layout_centerVertical="true" 
     android:layout_centerHorizontal="true" /> 
</RelativeLayout> 

Answer 1

Vous pouvez utiliser ce code

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

<item android:top="0dp" android:bottom="10dp"> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <solid android:color="@android:color/holo_blue_light" /> 
     <size 
      android:width="106dp" 
      android:height="20dp"/> 
     <stroke 
      android:width="1dp" 
      android:color="#40adc2" /> 
     <corners android:radius="4dp" /> 
    </shape> 
</item> 

<item android:bottom="0dp" 
    android:top="0dp" 
    android:gravity="center_horizontal|bottom"> 
    <rotate 
     android:fromDegrees="45" 
     android:toDegrees="45" 
     android:pivotX="135%" 
     android:pivotY="15%"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@android:color/holo_blue_light" /> 
      <size 
       android:height="10dp" 
       android:width="10dp"/> 
     </shape> 
    </rotate> 
</item> 
</layer-list> 

il obtiens t son résultat: