Fügen Sie ein Hintergrundbild hinzu, um es in XML Android zu formen


148

Wie fügt man einer Form ein Hintergrundbild hinzu? Der Code, den ich unten ausprobiert habe, aber kein Erfolg:

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

Sie müssen eine benutzerdefinierte Klasse erweitern und erstellen. Schauen Sie sich zum Beispiel RoundedImageView an. Es erstellt eine runde Bildansicht, so dass alles, was Sie als Hintergrund festlegen, als gerundet erscheint
Rahul Gupta

Antworten:


221

Verwenden Sie Folgendes 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
Danke, das hat funktioniert, aber die Kanten sind nicht mehr abgerundet?
DevC

Willst du Bild mit runden Kanten? weil es scheint, dass Ihre Form keine Farbe hat
vipul mittal

1
Meine Form hatte eine weiße Farbe und abgerundete Kanten. Ich dachte, die abgerundeten Kanten würden bleiben, wenn ich die Farbe entfernen und stattdessen ein Bild verwenden würde. Wenn dies nicht möglich ist, ist das in
Ordnung

also bild mit abgerundeten ecken nicht möglich?
Bvsss

Es ist möglich, aber Sie müssen die Ecken des Bildes programmgesteuert abrunden. siehe diese stackoverflow.com/questions/2459916/…
vipul mittal

199

Ich habe Folgendes für ein zeichnbares Bild mit kreisförmigem Hintergrund verwendet.

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

So sieht es aus

Geben Sie hier die Bildbeschreibung ein

Hoffe das hilft jemandem aus.


Gibt es etwas, um die Schwerkraft des Bildes einzustellen?
Sagar Devanga

@SagarDevanga für das Zeichen im obigen Code oder wenn Sie das Bild in Ihr Layout aufnehmen?
Ray Hunter

Zuerst habe ich versucht, mit Höhe und Breite das interne Symbol auf 24dp (seine tatsächliche Größe) einzustellen. Dies wurde in der Vorschau in AS perfekt angepasst, hatte jedoch keine Auswirkungen auf das Tablet. Deshalb habe ich deine Methode angewendet. Ich habe die Höhe und Breite der Form auf 40 dp und dann oben, unten, links und rechts des Symbolelements auf jeweils 8 dp eingestellt. (40-24) / 2 = 8. Das resultierende Bild sieht jedoch in der richtigen Größe aus, ist jedoch verschwommen, was meiner Meinung nach auf eine Größenänderung des PNG zurückzuführen ist. Irgendwelche Vorschläge?
Luke Allison

TLDR; Wie würden Sie Ihr Bild oben mit einem Kreis mit 40 dp Durchmesser und einem 24 dp-Symbol erstellen, ohne die Bildqualität zu verlieren?
Luke Allison

@LukeAllison Wie fügst du das Symbol zu deiner Benutzeroberfläche hinzu und wie groß ist das Bild, das du in das Oval platzierst?
Ray Hunter

21

Dies ist eine Kreisform mit einem Symbol im Inneren:

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

Perfekter für diejenigen, die Caret-Bild und Rand zeigen möchten
Masum

7

Dies ist ein Eckbild

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

Ich habe Folgendes für ein zeichnbares Bild mit einem Rand verwendet.

Erstellen Sie zuerst eine XML-Datei mit diesem Code in einem zeichnbaren Ordner:

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

Zweitens erstellen Sie eine XML-Ansichtsdatei im Layoutordner und rufen die obige XML-Datei auf diese Weise auf

<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

Hier ist eine weitere einfache Möglichkeit, eine benutzerdefinierte Form für Ihr Bild zu erhalten (Bildansicht). Es kann für jemanden hilfreich sein. Es ist nur ein einzeiliger Code.

Zuerst müssen Sie eine Abhängigkeit hinzufügen:

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

Und dann schreiben Sie einfach eine Codezeile wie folgt:

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);   
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.