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>

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>

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.


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>

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>

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

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);   
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.