XML Android'de şekle bir arka plan resmi ekleyin


154

Bir şekle nasıl arka plan resmi eklersiniz? Aşağıda denediğim kod başarılı olmadı:

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

Özel şekilli bir sınıfı genişletmeniz ve oluşturmanız gerekir. Örneğin RoundedImageView'a bakın. Yuvarlak bir görüntü görünümü oluşturur, böylece arka plan olarak ayarladığınız her ne olursa olsun, yuvarlak olarak görünecektir
Rahul Gupta

Yanıtlar:


226

Aşağıdakileri kullanın 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
Teşekkürler, bu işe yaradı ancak kenarlar artık yuvarlak değil mi?
DevC

Yuvarlak kenarlı görüntü ister misiniz? çünkü şeklinizin rengi yok gibi görünüyor
vipul mittal

1
Şeklim beyaz bir renge ve yuvarlak kenarlara sahipti. Rengi kaldırıp bunun yerine bir resim kullanırsam yuvarlak kenarların kalacağını düşündüm. Bu mümkün değilse sorun değil
DevC

yani yuvarlak köşeli görüntü mümkün değil mi?
bvsss

Bu mümkündür, ancak görüntünün köşelerini programlı olarak yuvarlamanız gerekir. bu stackoverflow.com/questions/2459916/…
vipul mittal

205

Aşağıdakileri dairesel bir arka plana sahip çekilebilir bir resim için kullandım.

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

İşte böyle görünüyor

görüntü açıklamasını buraya girin

Umarım bu birine yardım eder.


Görüntünün ağırlığını ayarlayacak bir şey var mı?
Sagar Devanga

@SagarDevanga yukarıdaki koddaki çekilebilirlik için mi yoksa düzeninize resmi eklediğinizde mi?
Ray Hunter

İlk olarak, dahili simgeyi 24dp'ye (gerçek boyutu) ayarlamak için yüksekliği ve genişliği kullanmaya çalıştım. Bu, AS'deki Önizleme'de mükemmel bir şekilde yeniden boyutlandırıldı, ancak tablet üzerinde hiçbir etkisi olmadı. Bu nedenle yöntemini kullandım. Şeklin yüksekliğini ve genişliğini 40dp ve ardından ikon öğesinin üst, alt, sol ve sağını 8dp olarak ayarladım. (40-24) / 2 = 8. Bununla birlikte, ortaya çıkan görüntü doğru boyutta görünüyor ancak bulanık, bunun nedeni PNG'nin bir tür yeniden boyutlandırılmasından kaynaklanıyor. Herhangi bir öneri?
Luke Allison

TLDR; Yukarıdaki görüntünüzü 40dp çapında bir daire ve 24dp bir simge ile görüntü kalitesini kaybetmeden nasıl oluşturursunuz?
Luke Allison

@LukeAllison, simgeyi kullanıcı arayüzüne nasıl ekliyorsunuz ve ovalin içine yerleştirdiğiniz görüntü ne kadar büyük?
Ray Hunter

22

Bu, içinde simge bulunan bir daire şeklidir:

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

imge ve bordür göstermek isteyenler için daha mükemmel
Md. Rashidul Hasan

7

Bu bir köşe resmi

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

Aşağıdakileri kenarlıklı çekilebilir bir resim için kullandım.

İlk önce bu kodla çekilebilir klasörde bir .xml dosyası oluşturun:

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

İkinci olarak, layout klasöründe bir .xml dosyası oluşturun ve yukarıdaki .xml dosyasını bu şekilde çağırın

<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

İşte resminiz için özel bir şekil almanın en kolay yolu (Resim Görünümü). Birisi için faydalı olabilir. Bu sadece tek satırlık bir kod.

Öncelikle bir bağımlılık eklemeniz gerekir:

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

Ve sonra şöyle bir satır kod yazın:

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);   
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.