Aggiungi un'immagine di sfondo per modellare in XML Android


148

Come si aggiunge un'immagine di sfondo a una forma? Il codice che ho provato di seguito ma senza successo:

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

È necessario estendere e creare una classe personalizzata. Guarda in RoundedImageView per esempio. Crea una visualizzazione di immagini rotonda in modo che qualunque iamge imposti come sfondo, appaia arrotondato
Rahul Gupta

Risposte:


221

Utilizzare quanto segue 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
Grazie, ha funzionato ma i bordi non sono più arrotondati?
DevC

vuoi Immagine con bordi arrotondati ?? perché sembra che la tua forma non abbia alcun colore
vipul mittal

1
La mia forma aveva un colore bianco e bordi arrotondati. Pensavo che i bordi arrotondati sarebbero rimasti se avessi rimosso il colore e usato invece un'immagine. Se ciò non è possibile, va bene
DevC

così immagine con angoli arrotondati, impossibile?
bvsss

È possibile ma è necessario arrotondare programmaticamente gli angoli dell'immagine. vedere questo stackoverflow.com/questions/2459916/...
Mittal Vipul

199

Ho usato quanto segue per un'immagine disegnabile con uno sfondo circolare.

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

Ecco come appare

inserisci qui la descrizione dell'immagine

Spero che aiuti qualcuno.


C'è qualcosa per impostare la gravità dell'immagine.
Sagar Devanga,

@SagarDevanga per il disegno nel codice sopra o quando includi l'immagine nel tuo layout?
Ray Hunter,

In primo luogo, ho provato a utilizzare l'altezza e la larghezza per impostare l'icona interna su 24dp (la sua dimensione effettiva). Questo ridimensionato perfettamente sull'anteprima in AS ma non ha avuto alcun effetto sul tablet. Pertanto ho usato il tuo metodo. Ho impostato l'altezza e la larghezza della forma su 40 dpi e quindi in alto, in basso, a sinistra e a destra dell'elemento icona su 8 dpi ciascuno. (40-24) / 2 = 8. Tuttavia, l'immagine risultante ha le dimensioni giuste ma è sfocata, cosa che sospetto sia dovuta a una sorta di ridimensionamento del PNG. Eventuali suggerimenti?
Luke Allison,

TLDR; come creeresti la tua immagine sopra con un cerchio del diametro di 40dp e un'icona di 24dp senza perdere la qualità dell'immagine?
Luke Allison,

@LukeAllison come stai aggiungendo l'icona alla tua UI e quanto è grande l'immagine che stai posizionando nell'ovale?
Ray Hunter

21

Questa è una forma circolare con l'icona all'interno:

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

più perfetto per chi vuole mostrare l'immagine e il bordo del cursore
Masum,

7

Questa è un'immagine d'angolo

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

Ho usato quanto segue per un'immagine disegnabile con un bordo.

Per prima cosa crea un file .xml con questo codice nella cartella disegnabile:

<?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"/>

In secondo luogo creare un file .xml di visualizzazione nella cartella di layout e chiamare il file .xml sopra riportato in questo modo

<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

Ecco un altro modo molto semplice per ottenere una forma personalizzata per la tua immagine (Image View). Potrebbe essere utile per qualcuno. È solo un codice a riga singola.

Per prima cosa devi aggiungere una dipendenza:

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

E poi basta scrivere una riga di codice come questa:

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);   
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.