Додайте фонове зображення для формування в 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 файл із цим кодом у папці, що малюється:

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