Agregar una imagen de fondo para dar forma en Android XML


148

¿Cómo se agrega una imagen de fondo a una forma? El código que probé a continuación pero no tuvo éxito:

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

Necesita extender y crear una clase con forma personalizada. Mire en RoundedImageView por ejemplo. Crea una vista de imagen redonda, por lo que cualquier imagen que establezcas como fondo, aparecerá como redondeada
Rahul Gupta

Respuestas:


221

Use lo siguiente 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>

44
Gracias, esto funcionó sin embargo, los bordes ya no son redondeados?
DevC

¿Quieres una imagen con bordes redondos? porque parece que tu forma no tiene color
vipul mittal

1
Mi forma tenía un color blanco y bordes redondeados. Pensé que los bordes redondeados permanecerían si eliminaba el color y usaba una imagen en su lugar. Si esto no es posible, está bien
DevC

Entonces, ¿la imagen con esquinas redondeadas no es posible?
bvsss

Es posible, pero debe redondear mediante programación las esquinas de la imagen. vea este stackoverflow.com/questions/2459916/…
vipul mittal

199

Usé lo siguiente para una imagen dibujable con un fondo 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>

Así es como se ve

ingrese la descripción de la imagen aquí

Espero que ayude a alguien.


¿Hay algo para establecer la gravedad de la imagen?
Sagar Devanga

@SagarDevanga para el dibujable en el código anterior o cuando incluye la imagen en su diseño?
Ray Hunter

En primer lugar, intenté usar la altura y el ancho para establecer el icono interno en 24dp (su tamaño real). Esto cambió de tamaño perfectamente en la Vista previa en AS, pero no tuvo ningún efecto en la tableta. Por eso utilicé tu método. Configuré la altura y el ancho de la forma en 40dp y luego la parte superior, inferior, izquierda y derecha del ícono del icono en 8dp cada uno. (40-24) / 2 = 8. Sin embargo, la imagen resultante se ve del tamaño correcto pero está borrosa, lo que sospecho se debe a algún tipo de cambio de tamaño de PNG. ¿Alguna sugerencia?
Luke Allison

TLDR; ¿Cómo crearías tu imagen arriba con un círculo de 40dp de diámetro y un ícono de 24dp sin perder calidad de imagen?
Luke Allison

@LukeAllison, ¿cómo está agregando el icono a su interfaz de usuario y qué tan grande es la imagen que está colocando en el óvalo?
Ray Hunter

21

Esta es una forma circular con un icono 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>

más perfecto para quienes desean mostrar la imagen de caret y el borde
Masum

7

Esta es una imagen de esquina

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

Usé lo siguiente para una imagen dibujable con un borde.

Primero cree un archivo .xml con este código en la carpeta dibujable:

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

En segundo lugar, cree un archivo .xml de vista en la carpeta de diseño y llame al archivo .xml anterior de esta manera

<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

Aquí hay otra forma más fácil de obtener una forma personalizada para su imagen (Vista de imagen). Puede ser útil para alguien. Es solo un código de línea única.

Primero necesitas agregar una dependencia:

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

Y luego solo escribe una línea 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);   
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.