Как я могу воссоздать этот фон в xml?

Я пытался воссоздать фоновое изображение в xml (как рисуемое). Поскольку фон представляет собой простую форму, было бы лучше, если бы он был создан в виде xml drawable.

[background image] — это очень большой градиентный круг, который имеет квадратную форму слева, сверху и справа.


Что я пробовал

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
           android:shape="rectangle">
            <size
               android:height="20dp" />
            <gradient
               android:type="linear"
               android:startColor="@color/gradientLeft"
               android:centerColor="@color/gradientMiddle"
               android:endColor="@color/gradientRight"
               android:angle="0" />
        </shape>
    </item>
    <item>
        <shape
           android:shape="oval">
            <padding
               android:top="20dp" />
            <gradient
               android:type="linear"
               android:startColor="@color/gradientLeft"
               android:centerColor="@color/gradientMiddle"
               android:endColor="@color/gradientRight"
               android:angle="0" />
        </shape>
    </item>
</layer-list>

Я попытался создать список слоев. Этот список слоев содержит 2 формы, прямоугольник и овал.

Прямоугольник имеет градиент и высоту 20 dp (для проверки).

Овал также имеет такой же градиент и верхний отступ 20 dp.


Это, однако, не создает круглую форму, а заполняет всю форму градиентом. Кто-нибудь может мне помочь?


person Max    schedule 09.04.2018    source источник


Ответы (2)


Попробуй это

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" />
    </item>
    <item
        android:bottom="300dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <size android:height="20dp" />
            <gradient
                android:angle="0"
                android:centerColor="@color/colorAccent"
                android:endColor="@color/red"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

ВЫВОД

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

person AskNilesh    schedule 09.04.2018
comment
Можно ли создать анимацию в этом? Например, для выполнения задачи с анимацией анимация станет зеленоватой? Я очень хочу сделать этот фон одним из моих занятий. - person Woods; 05.05.2018
comment
@Woods, какую анимацию вы хотите - person AskNilesh; 06.05.2018
comment
Что-то вроде взмаха или уровня повышения уровня, который будет плавно менять цвет. Например, если у пользователя нет жизней, цвет должен быть красноватым, и если у пользователя есть одна жизнь/шанс, цвет изменится. - person Woods; 06.05.2018

Попробуй это

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item>
          <shape android:shape="rectangle" >
        <solid android:color="#ffffff"/>
    </shape>
 </item> <item
        android:bottom="400dp"
        android:left="-200dp"
        android:right="-200dp"
        android:top="-100dp">
        <shape android:shape="oval">
            <size android:height="20dp" />
            <gradient
                android:type="linear"
                android:startColor="#FD4F33"
                android:centerColor="#EE3A53"
                android:endColor="#DF2772"
                android:angle="0" />
        </shape> </item> </layer-list>

Фон будет таким

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

person Vinayak B    schedule 09.04.2018
comment
хорошая копипаста, пожалуйста, не делайте этого - person AskNilesh; 09.04.2018
comment
@NileshRathod, мне очень жаль, чувак. Я не проверял твой ответ. Я не делал этого намеренно. - person Vinayak B; 09.04.2018