เพิ่มภาพพื้นหลังเพื่อกำหนดรูปร่างใน XML Android


148

คุณจะเพิ่มภาพพื้นหลังให้กับรูปร่างได้อย่างไร รหัสที่ฉันลองด้านล่าง แต่ไม่สำเร็จ:

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

คุณต้องขยายและสร้างคลาสรูปร่างที่กำหนดเอง ดู RoundedImageView เป็นตัวอย่าง มันสร้างภาพมุมมองแบบวงกลมดังนั้นสิ่งที่ iamge ที่คุณตั้งไว้เป็นพื้นหลังของมันจะปรากฏเป็นรูปกลม
Rahul Gupta

คำตอบ:


221

ใช้ดังต่อไปนี้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
ขอบคุณมันใช้งานได้ดี แต่ขอบจะไม่มน
DevC

คุณต้องการภาพที่มีขอบกลมหรือไม่? เพราะดูเหมือนว่ารูปร่างของคุณจะไม่มีสีใด ๆ
vipul mittal

1
รูปร่างของฉันมีสีขาวและขอบมน ฉันคิดว่าขอบมนจะคงอยู่หากฉันลบสีและใช้รูปภาพแทน หากเป็นไปไม่ได้นั่นก็โอเค
DevC

ภาพที่มีมุมมนเป็นไปไม่ได้ใช่ไหม
bvsss

เป็นไปได้ แต่คุณต้องเขียนโปรแกรมให้มุมของภาพโดยทางโปรแกรม ดูstackoverflow.com/questions/2459916/
vipul mittal

199

ฉันใช้สิ่งต่อไปนี้สำหรับภาพที่วาดได้ด้วยพื้นหลังวงกลม

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

นี่คือสิ่งที่ดูเหมือนว่า

ป้อนคำอธิบายรูปภาพที่นี่

หวังว่าจะช่วยใครซักคน


มีบางอย่างที่จะกำหนดแรงโน้มถ่วงของภาพไหม
Sagar Devanga

@SagarDevanga สำหรับ drawable ในรหัสด้านบนหรือเมื่อคุณรวมภาพในเลย์เอาต์ของคุณ?
เรย์ฮันเตอร์

ก่อนอื่นฉันพยายามใช้ความสูงและความกว้างเพื่อตั้งค่าไอคอนภายในเป็น 24dp (ขนาดจริง) การปรับขนาดนี้สมบูรณ์แบบบน Preview ใน AS แต่ไม่มีผลกับแท็บเล็ต ดังนั้นฉันใช้วิธีการของคุณ ฉันตั้งค่าความสูงและความกว้างของรูปร่างเป็น 40dp จากนั้นด้านบนด้านล่างซ้ายและขวาของรายการไอคอนเป็น 8dp (40-24) / 2 = 8 อย่างไรก็ตามภาพที่ได้ดูมีขนาดที่เหมาะสม แต่เบลอซึ่งฉันสงสัยว่าเป็นเพราะการปรับขนาด PNG อีกครั้ง ข้อเสนอแนะใด ๆ
ลุคอัลลิสัน

TLDR; คุณจะสร้างภาพด้านบนด้วยวงกลมขนาด 40dp และไอคอน 24dp ได้อย่างไรโดยไม่สูญเสียคุณภาพของภาพ
ลุคอัลลิสัน

@LukeAllison คุณเพิ่มไอคอนให้กับ UI ของคุณอย่างไรและรูปภาพที่คุณวางไว้ในวงรีมีขนาดใหญ่แค่ไหน?
Ray Hunter

21

นี่คือรูปวงกลมพร้อมไอคอนภายใน:

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

สมบูรณ์แบบมากขึ้นสำหรับผู้ที่ต้องการแสดงภาพคาเร็ตและเส้นขอบ
Masum

7

นี่คือภาพมุม

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

ฉันใช้สิ่งต่อไปนี้สำหรับภาพที่วาดได้ด้วยเส้นขอบ

ก่อนอื่นให้สร้างไฟล์. xml ด้วยรหัสนี้ในโฟลเดอร์ 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"/>

ขั้นที่สองสร้างไฟล์. xml ในโฟลเดอร์เลย์เอาต์แล้วเรียกไฟล์. xml ด้านบนด้วยวิธีนี้

<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

นี่เป็นอีกวิธีที่ง่ายที่สุดในการสร้างรูปร่างที่กำหนดเองสำหรับภาพของคุณ (มุมมองภาพ) มันอาจจะเป็นประโยชน์สำหรับใครบางคน มันเป็นเพียงรหัสบรรทัดเดียว

ก่อนอื่นคุณต้องเพิ่มการพึ่งพา:

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

จากนั้นก็เขียนบรรทัดโค้ดดังนี้

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);   
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.