Adicionar uma imagem de plano de fundo à forma no XML Android


148

Como você adiciona uma imagem de plano de fundo a uma forma? O código que tentei abaixo, mas sem sucesso:

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

Você precisa estender e criar uma classe de formato personalizado. Veja RoundedImageView, por exemplo. Ele cria um ImageView rodada assim que o iamge você definir como pano de fundo a ele, ele aparecerá como arredondado
Rahul Gupta

Respostas:


221

Use o seguinte 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
Obrigado, isso funcionou, mas as bordas não são mais arredondadas?
DevC

você quer imagem com bordas arredondadas ?? porque parece que sua forma não tem cor
vipul mittal

1
Minha forma tinha uma cor branca e bordas arredondadas. Eu pensei que as bordas arredondadas permaneceriam se eu removesse a cor e usasse uma imagem. Se isso não for possível, tudo bem
DevC

então imagem com cantos arredondados, não é possível?
bvsss

É possível, mas você precisa arredondar programaticamente os cantos da imagem. veja este stackoverflow.com/questions/2459916/…
vipul mittal

199

Usei o seguinte para uma imagem desenhável com fundo circular.

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

Aqui está o que parece

insira a descrição da imagem aqui

Espero que ajude alguém.


Existe algo para definir a gravidade da imagem.
Sagar Devanga

@SagarDevanga para o drawable no código acima ou quando você inclui a imagem em seu layout?
Raio Hunter

Primeiramente, tentei usar altura e largura para definir o ícone interno como 24dp (seu tamanho real). Isso foi redimensionado perfeitamente na visualização no AS, mas não teve efeito no tablet. Portanto, eu usei seu método. Defino a altura e a largura da forma como 40dp e, em seguida, superior, inferior, esquerda e direita do item de ícone como 8dp cada. (40-24) / 2 = 8. No entanto, a imagem resultante parece ter o tamanho certo, mas está embaçada, o que suspeito ser devido a algum tipo de redimensionamento do PNG. Alguma sugestão?
Luke Allison

TLDR; como você criaria sua imagem acima com um círculo de 40dp de diâmetro e um ícone de 24dp sem perder a qualidade da imagem?
Luke Allison

@LukeAllison, como você está adicionando o ícone à interface do usuário e qual o tamanho da imagem que você está colocando na figura oval?
Raio do caçador

21

Esta é uma forma de círculo com ícone dentro:

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

mais perfeito para quem quer mostrar a imagem acento circunflexo e borda
Masum

7

Esta é uma imagem de canto

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

Usei o seguinte para uma imagem desenhável com uma borda.

Primeiro, crie um arquivo .xml com este código na pasta 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"/>

Segundo, crie um arquivo .xml de visualização na pasta de layout e chame o arquivo .xml acima dessa maneira

<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

Aqui está outra maneira mais fácil de obter um formato personalizado para a sua imagem (Image View). Pode ser útil para alguém. É apenas um código de linha único.

Primeiro você precisa adicionar uma dependência:

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

E então basta escrever uma linha de código como esta:

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);   
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.