Android, почему мой список слоев не будет масштабироваться, чтобы соответствовать моей кнопке?

Я пытаюсь создать причудливую градиентную границу для моей кнопки Android. Я создал чертеж со списком слоев и некоторыми градиентами, и предварительный просмотр выглядит хорошо. Но когда я пытаюсь применить этот рисунок к своей кнопке, он даже близко не выглядит так, как выглядит в предварительном просмотре. Я надеялся, что рисуемый объект растянется и масштабируется, чтобы соответствовать моей кнопке, но, похоже, этого не происходит.

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

Вот мой рисунок:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp"/>
            <solid android:color="@color/colorLightGray"/>
            <size android:width="40dp" android:height="10dp"/>
        </shape>
    </item>
    <item android:left="38dp">
        <shape android:shape="rectangle">
            <corners
                    android:topRightRadius="1dp"
                    android:bottomRightRadius="1dp"/>
            <gradient
                android:endColor="@color/colorDarkGreen"
                android:startColor="@color/colorLightGray"
                android:type="linear"/>
        </shape>
    </item>
    <item android:right="38dp">
        <shape android:shape="rectangle">
            <corners
                    android:topLeftRadius="1dp"
                    android:bottomLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:type="linear"/>
        </shape>
    </item>
    <item android:bottom="8dp">
        <shape android:shape="rectangle">
            <corners
                    android:topLeftRadius="1dp"
                    android:topRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:angle="270"
                    android:type="linear"/>
        </shape>
    </item>
    <item android:top="8dp">
        <shape android:shape="rectangle">
            <corners
                    android:bottomLeftRadius="1dp"
                    android:bottomRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorLightGray"
                    android:startColor="@color/colorDarkGreen"
                    android:angle="90"
                    android:type="linear"/>
        </shape>
    </item>
    <item
            android:bottom="8dp"
            android:right="38dp">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="100%"
                    android:centerY="100%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:bottom="8dp"
            android:left="38dp">
        <shape android:shape="rectangle">
            <corners android:topRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="0%"
                    android:centerY="100%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:top="8dp"
            android:left="38dp">
        <shape android:shape="rectangle">
            <corners android:bottomRightRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="0%"
                    android:centerY="0%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
    <item
            android:top="8dp"
            android:right="38dp">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="1dp"/>
            <gradient
                    android:endColor="@color/colorDarkGreen"
                    android:centerColor="@color/colorDarkGreen"
                    android:startColor="@color/colorLightGray"
                    android:centerX="100%"
                    android:centerY="0%"
                    android:gradientRadius="200%"
                    android:type="radial"/>
        </shape>
    </item>
</layer-list>

Вот xml моей кнопки:

<Button
            android:id="@+id/add_some_stuff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/gradient_border"
            android:textAllCaps="false"
            android:textStyle="normal"
            android:textSize="@dimen/settings_text_size"
            android:textColor="@color/colorSettingsText"
            android:text="@string/add_some_stuff"/>

Вот что показывает предварительный просмотр: Предварительный просмотр

Вот что я на самом деле вижу: введите здесь описание изображения


person SnoopDougg    schedule 29.05.2017    source источник
comment
У меня нет времени искать ответ, но макет работает на кнопке 40dpx10dp.   -  person Lionel Briand    schedule 30.05.2017


Ответы (1)


Ваш размер для рисования определяется статически и не будет правильно изменять размер, чтобы настроить его, когда он является фоном представления. Свойства списка слоев android:width, android:height, android:left и т. д. должны быть определены с определенным размером пикселя плотности. Как только ваше представление больше не соответствует этому размеру, оно не будет правильно соответствовать рисунку (это происходит, когда вы используете match_parent или wrap_content). Если вам необходимо использовать динамическое изменение размера (что я и предлагаю), я бы использовал векторное изображение вместо layer-list.

person Nathan Reline    schedule 30.05.2017