Ajouter une image d'arrière-plan à la forme dans XML Android

148

Comment ajouter une image d'arrière-plan à une forme? Le code que j'ai essayé ci-dessous mais sans succès:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
//here is where i need to set the image
<solid android:color="@drawable/button_image"/>
    <corners
     android:bottomRightRadius="5dp"
     android:bottomLeftRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp"/>
 </shape>
DevC
la source
Vous devez étendre et créer une classe de forme personnalisée. Regardez par exemple RoundedImageView. Cela crée une vue d'image ronde, donc quel que soit l'image que vous définissez comme arrière-plan, il apparaîtra arrondi
Rahul Gupta

Réponses:

221

Utilisez ce qui suit layerlist:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners
                 android:bottomRightRadius="5dp"
                 android:bottomLeftRadius="5dp"
                 android:topLeftRadius="5dp"
                 android:topRightRadius="5dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/image_name_here" />
</layer-list>
vipul mittal
la source
4
Merci, cela a fonctionné mais les bords ne sont plus arrondis?
DevC
voulez-vous une image avec des bords arrondis ?? parce qu'il semble que votre forme n'a aucune couleur
vipul mittal
1
Ma forme avait une couleur blanche et des bords arrondis. Je pensais que les bords arrondis resteraient si je supprimais la couleur et utilisais une image à la place. Si ce n'est pas possible, c'est ok
DevC
donc image avec des coins arrondis, pas possible?
bvsss
C'est possible mais vous devez arrondir les coins de l'image par programmation. voir ce stackoverflow.com/questions/2459916/…
vipul mittal
199

J'ai utilisé ce qui suit pour une image dessinable avec un arrière-plan circulaire.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_select"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp"/>
</layer-list>

Voici à quoi cela ressemble

entrez la description de l'image ici

J'espère que cela aide quelqu'un.

Ray Hunter
la source
Y a-t-il quelque chose pour définir la gravité de l'image.
Sagar Devanga
@SagarDevanga pour le dessinable dans le code ci-dessus ou lorsque vous incluez l'image dans votre mise en page?
Ray Hunter
Tout d'abord, j'ai essayé d'utiliser la hauteur et la largeur pour définir l'icône interne sur 24dp (sa taille réelle). Cela a parfaitement redimensionné sur l'aperçu dans AS mais n'a eu aucun effet sur la tablette. Par conséquent, j'ai utilisé votre méthode. J'ai défini la hauteur et la largeur de la forme à 40dp, puis le haut, le bas, la gauche et la droite de l'élément icône à 8dp chacun. (40-24) / 2 = 8. Cependant, l'image résultante a la bonne taille mais est floue, ce qui, je suppose, est dû à une sorte de redimensionnement du PNG. Aucune suggestion?
Luke Allison
TLDR; Comment créeriez-vous votre image ci-dessus avec un cercle de 40dp de diamètre et une icône de 24dp sans perdre la qualité de l'image?
Luke Allison
@LukeAllison comment ajoutez-vous l'icône à votre interface utilisateur et quelle est la taille de l'image que vous placez dans l'ovale?
Ray Hunter
21

Il s'agit d'une forme de cercle avec une icône à l'intérieur:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ok_icon"/>
    <item>
        <shape
                android:shape="oval">
            <solid android:color="@color/transparent"/>
            <stroke android:width="2dp" android:color="@color/button_grey"/>
        </shape>
    </item>
</layer-list>
anagaf
la source
plus parfait pour ceux qui veulent montrer l'image du caret et la bordure
Masum
7

Ceci est une image d'angle

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

    <item
        android:drawable="@drawable/img_main_blue"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <corners android:radius="10dp" />
            <stroke
                android:width="5dp"
                android:color="@color/white" />
        </shape>

    </item>
</layer-list>
Mohsen
la source
4

J'ai utilisé ce qui suit pour une image dessinable avec une bordure.

Créez d'abord un fichier .xml avec ce code dans un dossier pouvant être dessiné:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/orange"/>
    </shape>
</item>
<item
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
    </shape>
</item>
<item
    android:drawable="@drawable/messages" //here messages is my image name, please give here your image name.
    android:bottom="15dp"
    android:left="15dp"
    android:right="15dp"
    android:top="15dp"/>

Ensuite, créez un fichier .xml de vue dans le dossier de mise en page et appelez le fichier .xml ci-dessus de cette façon

<ImageView
   android:id="@+id/imageView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/merchant_circle" />  // here merchant_circle will be your first .xml file name
Masum
la source
1

Voici un autre moyen le plus simple d'obtenir une forme personnalisée pour votre image (Vue Image). Cela peut être utile pour quelqu'un. C'est juste un code sur une seule ligne.

Vous devez d'abord ajouter une dépendance:

dependencies {
    compile 'com.mafstech.libs:mafs-image-shape:1.0.4'   
}

Et puis écrivez simplement une ligne de code comme ceci:

Shaper.shape(context, 
       R.drawable.your_original_image_which_will_be_displayed, 
       R.drawable.shaped_image_your_original_image_will_get_this_images_shape,
       imageView,
       height, 
       weight);   
Mafujul
la source