Thêm một hình nền để định hình trong XML Android


148

Làm thế nào để bạn thêm một hình ảnh nền cho một hình dạng? Mã tôi đã thử dưới đây nhưng không thành công:

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

Bạn cần mở rộng và tạo một lớp hình tùy chỉnh. Nhìn vào RoundedImageView chẳng hạn. Nó tạo ra một hình ảnh tưởng tượng tròn để bất cứ thứ gì bạn đặt làm nền cho nó, nó sẽ xuất hiện dưới dạng tròn
Rahul Gupta

Câu trả lời:


221

Sử dụng như sau 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
Cảm ơn, điều này đã làm việc tuy nhiên các cạnh không còn tròn?
DevC

Bạn có muốn hình ảnh với các cạnh tròn ?? bởi vì dường như hình dạng của bạn không có bất kỳ màu nào
vipul mittal

1
Hình dạng của tôi đã có một màu trắng và các cạnh tròn. Tôi nghĩ rằng các cạnh tròn sẽ vẫn còn nếu tôi loại bỏ màu sắc và sử dụng một hình ảnh thay thế. Nếu điều này là không thể thì không sao
DevC

Vì vậy, hình ảnh với các góc tròn, không thể?
bvsss

Có thể nhưng bạn cần lập trình làm tròn các góc của hình ảnh. xem stackoverflow.com/questions/2459916/
vipul mittal

199

Tôi đã sử dụng như sau cho một hình ảnh có thể vẽ với một nền tròn.

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

Đây là những gì nó trông giống như

nhập mô tả hình ảnh ở đây

Hy vọng rằng sẽ giúp được ai đó.


Có một cái gì đó để thiết lập trọng lực của hình ảnh.
Sagar Devanga

@SagarDevanga cho drawable trong đoạn mã trên hoặc khi bạn đưa hình ảnh vào bố cục của bạn?
Ray Hunter

Đầu tiên, tôi đã cố gắng sử dụng chiều cao và chiều rộng để đặt biểu tượng bên trong thành 24dp (kích thước thực tế của nó). Điều này đã thay đổi kích thước hoàn hảo trên Bản xem trước trong AS nhưng không có tác dụng trên máy tính bảng. Vì vậy, tôi đã sử dụng phương pháp của bạn. Tôi đặt chiều cao và chiều rộng của hình thành 40dp rồi lên trên, dưới, trái và phải của mục biểu tượng thành 8dp mỗi hình. (40-24) / 2 = 8. Tuy nhiên, hình ảnh thu được trông có kích thước phù hợp nhưng bị mờ, điều mà tôi nghi ngờ là do một số loại kích thước lại của PNG. Bất kỳ đề xuất?
Luke Allison

TLDR; Làm thế nào bạn có thể tạo hình ảnh của bạn ở trên với vòng tròn đường kính 40dp và biểu tượng 24dp mà không làm giảm chất lượng hình ảnh?
Luke Allison

@LukeAllison làm thế nào để bạn thêm biểu tượng vào giao diện người dùng của bạn và hình ảnh mà bạn đang đặt trong hình bầu dục lớn như thế nào?
Ray Hunter

21

Đây là một hình tròn với biểu tượng bên trong:

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

hoàn hảo hơn cho những ai muốn hiển thị hình ảnh và đường viền caret
Masum

7

Đây là một hình ảnh góc

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

Tôi đã sử dụng như sau cho một hình ảnh có thể vẽ với một đường viền.

Đầu tiên tạo một tệp .xml với mã này trong thư mục 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"/>

Thứ hai tạo tệp xem .xml trong thư mục bố cục và gọi tệp .xml ở trên bằng cách này

<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

Đây là một cách dễ dàng nhất để có được hình dạng tùy chỉnh cho hình ảnh của bạn (Chế độ xem hình ảnh). Nó có thể hữu ích cho một ai đó. Nó chỉ là một mã dòng duy nhất.

Trước tiên, bạn cần thêm một phụ thuộc:

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

Và sau đó chỉ cần viết một dòng mã như thế này:

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);   
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.