Добавить фоновое изображение для формы в 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 для примера. Он создает округлое изображение, поэтому, какие бы изображения вы не указали в качестве фона, оно будет выглядеть округлым
Рахул Гупта,

Ответы:


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>

Вот как это выглядит

введите описание изображения здесь

Надеюсь, это поможет кому-то.


Есть ли что-то, чтобы установить гравитацию изображения.
Сагар Деванга

@SagarDevanga для рисования в коде выше или когда вы включаете изображение в свой макет?
Рэй Хантер

Во-первых, я попытался использовать высоту и ширину, чтобы установить для внутреннего значка значение 24dp (его фактический размер). Это изменилось идеально на Preview в AS, но не оказало влияния на планшет. Поэтому я использовал ваш метод. Я установил высоту и ширину фигуры на 40dp, а затем на верхнюю, нижнюю, левую и правую части элемента иконки 8dp каждая. (40-24) / 2 = 8. Тем не менее, результирующее изображение выглядит правильного размера, но размыто, что, как я подозреваю, связано с изменением размера PNG. Какие-либо предложения?
Люк Эллисон

TLDR; Как бы вы создали свое изображение выше с диаметром круга 40dp и значком 24dp без потери качества изображения?
Люк Эллисон

@LukeAllison, как вы добавляете значок в свой пользовательский интерфейс и насколько велико изображение, которое вы помещаете в овал?
Рэй Хантер

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>

более совершенным для тех, кто хочет показать каретный образ и границу
Масум

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);   
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.