Dodaj obraz tła do kształtu w XML Android


148

Jak dodać obraz tła do kształtu? Kod, który wypróbowałem poniżej, ale bez powodzenia:

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

Musisz rozszerzyć i utworzyć klasę o niestandardowym kształcie. Na przykład zajrzyj do RoundedImageView. Tworzy okrągły widok obrazu, więc cokolwiek ustawisz jako tło, będzie wyglądało na zaokrąglone
Rahul Gupta

Odpowiedzi:


221

Użyj następujących 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
Dzięki, to zadziałało, ale krawędzie nie są już zaokrąglone?
DevC,

chcesz obraz z zaokrąglonymi krawędziami? bo wygląda na to, że twój kształt nie ma koloru
vipul mittal

1
Mój kształt miał biały kolor i zaokrąglone krawędzie. Myślałem, że zaokrąglone krawędzie pozostaną, gdybym usunął kolor i zamiast tego użył obrazu. Jeśli nie jest to możliwe, to jest w porządku
DevC

więc obraz z zaokrąglonymi rogami nie jest możliwy?
bvsss

Jest to możliwe, ale musisz programowo zaokrąglić rogi obrazu. zobacz ten stackoverflow.com/questions/2459916/…
vipul mittal

199

Użyłem poniższego do rysowania obrazu z okrągłym tłem.

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

Oto jak to wygląda

wprowadź opis obrazu tutaj

Mam nadzieję, że to komuś pomoże.


Czy jest coś, co ustawia wagę obrazu.
Sagar Devanga

@SagarDevanga do rysowania w powyższym kodzie lub po dołączeniu obrazu do układu?
Ray Hunter

Po pierwsze, próbowałem użyć wysokości i szerokości, aby ustawić wewnętrzną ikonę na 24 dp (jej rzeczywisty rozmiar). To idealnie zmieniło rozmiar na podglądzie w AS, ale nie miało wpływu na tablet. Dlatego zastosowałem twoją metodę. Ustawiam wysokość i szerokość kształtu na 40 dp, a następnie górną, dolną, lewą i prawą część ikony na 8 dp. (40-24) / 2 = 8. Jednak wynikowy obraz wygląda na właściwy rozmiar, ale jest rozmyty, co podejrzewam, że jest to spowodowane pewnym rodzajem zmiany rozmiaru PNG. Jakieś sugestie?
Luke Allison

TLDR; jak utworzyłbyś powyższy obrazek z kołem o średnicy 40 dp i ikoną 24 dp bez utraty jakości obrazu?
Luke Allison

@LukeAllison, w jaki sposób dodajesz ikonę do interfejsu użytkownika i jak duży jest obraz, który umieszczasz w owalu?
Ray Hunter

21

To jest kształt koła z ikoną w środku:

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

bardziej idealny dla tych, którzy chcą pokazać obraz karetki i obramowanie
Masum

7

To jest obraz narożny

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

Użyłem poniższego do rysowania obrazu z obramowaniem.

Najpierw utwórz plik .xml z tym kodem w folderze do rysowania:

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

Następnie utwórz plik widoku .xml w folderze układu i wywołaj powyższy plik .xml w ten sposób

<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

Oto kolejny najłatwiejszy sposób uzyskania niestandardowego kształtu obrazu (Widok obrazu). To może być pomocne dla kogoś. To tylko jeden wiersz kodu.

Najpierw musisz dodać zależność:

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

A potem po prostu napisz wiersz kodu podobny do tego:

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);   
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.