Tambahkan gambar latar belakang untuk dibentuk di XML Android


148

Bagaimana Anda menambahkan gambar latar belakang ke suatu bentuk? Kode yang saya coba di bawah ini tetapi tidak berhasil:

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

Anda perlu memperluas dan membuat kelas berbentuk kustom. Lihatlah ke RoundedImageView misalnya. Ini menciptakan imageview bulat sehingga apa pun yang Anda tetapkan sebagai latar belakang, itu akan tampak bulat
Rahul Gupta

Jawaban:


221

Gunakan yang berikut 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
Terima kasih, ini berhasil namun ujungnya tidak lagi membulat?
DevC

Anda ingin gambar dengan ujung bundar ?? karena sepertinya bentuk Anda tidak memiliki warna
vipul mittal

1
Bentuk saya memang memiliki warna putih dan ujung yang membulat. Saya pikir ujung yang membulat akan tetap ada jika saya menghilangkan warna dan menggunakan gambar sebagai gantinya. Jika ini tidak mungkin, tidak apa-apa
DevC

jadi gambar dengan sudut bulat, tidak mungkin?
bvsss

Itu mungkin, tetapi Anda harus secara program membulatkan sudut-sudut gambar. lihat stackoverflow.com/questions/2459916/…
vipul mittal

199

Saya menggunakan berikut ini untuk gambar yang dapat digambar dengan latar belakang melingkar.

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

Berikut ini tampilannya

masukkan deskripsi gambar di sini

Semoga itu bisa membantu seseorang keluar.


Apakah ada sesuatu untuk mengatur gravitasi gambar.
Sagar Devanga

@SagarDevanga untuk dapat digambar dalam kode di atas atau ketika Anda memasukkan gambar dalam tata letak Anda?
Ray Hunter

Pertama, saya mencoba menggunakan tinggi dan lebar untuk mengatur ikon internal ke 24dp (ukuran sebenarnya). Ini mengubah ukuran sempurna pada Preview di AS tetapi tidak berpengaruh pada tablet. Karena itu saya menggunakan metode Anda. Saya mengatur tinggi dan lebar bentuk ke 40dp dan kemudian atas, bawah, kiri dan kanan item ikon untuk masing-masing 8dp. (40-24) / 2 = 8. Namun, gambar yang dihasilkan terlihat ukuran yang tepat tetapi buram, yang saya curigai adalah karena ukuran ulang PNG. Ada saran?
Luke Allison

TLDR; bagaimana Anda membuat gambar di atas dengan lingkaran berdiameter 40dp dan ikon 24dp tanpa kehilangan kualitas gambar?
Luke Allison

@LukeAllison bagaimana Anda menambahkan ikon ke UI Anda dan seberapa besar gambar yang Anda tempatkan di oval?
Ray Hunter

21

Ini adalah bentuk lingkaran dengan ikon di dalamnya:

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

lebih sempurna untuk yang ingin menampilkan gambar tanda tepi dan perbatasan
Masum

7

Ini adalah gambar sudut

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

Saya menggunakan berikut ini untuk gambar yang dapat digambar dengan perbatasan.

Pertama-tama buat file .xml dengan kode ini di folder drawable:

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

Kedua buat tampilan file .xml di folder layout dan panggil file .xml di atas dengan cara ini

<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

Berikut ini adalah cara lain yang paling mudah untuk mendapatkan bentuk khusus untuk gambar Anda (Tampilan Gambar). Mungkin bermanfaat bagi seseorang. Itu hanya satu baris kode.

Pertama, Anda perlu menambahkan ketergantungan:

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

Dan kemudian cukup tulis satu baris kode seperti ini:

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);   
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.