Как создать заполненную форму полукруга с помощью xml, доступного в Android?

Я хочу создать форму наполовину заполненного круга с помощью xml drawble?

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

Вот мои усилия, которые я пробовал до сих пор

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FCD83500"/>
    <size
        android:width="10dp"
        android:height="5dp"/>
    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"/>
</shape>

Используя приведенный выше код, я могу создать полукруг, но я не знаю, как сделать полукруг прозрачным.

Я также посетил какой-то пост SO, но не смог найти никакого решения

Если вам нужна дополнительная информация, дайте мне знать. Заранее спасибо. Ваши усилия будут оценены.


person Goku    schedule 07.03.2019    source источник
comment
Нужно ли использовать xml drawable? В противном случае вы также можете использовать векторную графику.   -  person Balvinder Singh    schedule 07.03.2019
comment
@BalvinderSingh не стесняйтесь публиковать решение, используя vector graphics   -  person Goku    schedule 07.03.2019


Ответы (4)


Я создал код из векторной графики:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="314.015"
    android:viewportHeight="314.015">
    <path
        android:fillColor="#FCD83500"
        android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>

Результат будет:

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

Теперь, если вы хотите отображать в соответствии с вашим углом:

Вы можете использовать, как показано ниже:

android:rotation="90"

в вашем ImageView

Обновление для TextView Drawable:

Создайте собственный метод для поворота.

private Drawable rotate(Drawable drawable, int degree) {
    Bitmap iconBitmap = ((BitmapDrawable) drawable).getBitmap();

    Matrix matrix = new Matrix();
    matrix.postRotate(degree);
    Bitmap targetBitmap = Bitmap.createBitmap(iconBitmap, 0, 0, iconBitmap.getWidth(), iconBitmap.getHeight(), matrix, true);

    return new BitmapDrawable(getResources(), targetBitmap);
}

Используйте, как показано ниже:

Drawable result = rotate(ContextCompat.getDrawable(mContext, R.drawable.ic_round), 90);
yourTextView.setCompoundDrawablesWithIntrinsicBounds(result, null, null, null);

Примечание. Если вы найдете изображение SVG таким, каким хотите, то теперь вам нужно выполнить приведенный выше код. Я пытался найти изображение, но не нашел, поэтому здесь необходим код вращения.

Надеюсь, это поможет тебе.

Спасибо.

person Pratik Butani    schedule 07.03.2019
comment
Это хорошая идея, но я хочу использовать это внутри TextView как android:drawableEnd, поэтому я не могу использовать android:rotation="90" - person Goku; 07.03.2019
comment
@Goku Просто попробуйте, как указано выше. - person Pratik Butani; 07.03.2019
comment
привет, спасибо за ваше время, я нашел, как повернуть vector проверьте мой ответ ниже +1 для вашей помощи - person Goku; 07.03.2019
comment
Здесь я разместил вопрос и получил answer. - person Pratik Butani; 07.03.2019
comment
спасибо, я уже проверил ваш вопрос, значит, пока вы можете обновить свой ответ, спасибо за помощь, я приму ваш ответ - person Goku; 09.03.2019

Попробуй это:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:color="#FCD83500"
                android:width="1dp"/>
            <size
                android:width="20dp"
                android:height="20dp"/>
            <corners
                android:radius="50dp"/>
        </shape>
    </item>
    <item android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#FCD83500"/>
            <size
                android:width="20dp"
                android:height="10dp"/>
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp"/>
        </shape>
    </item>
</layer-list>
person Sdghasemi    schedule 07.03.2019
comment
Спасибо, но ваш код не работает, проверьте вывод, используя свой код - person Goku; 07.03.2019
comment
@Goku вы проверили это на реальном устройстве? - person Sdghasemi; 07.03.2019

ОБНОВЛЕНИЕ

Использовать это

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90">
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="314.015"
        android:viewportHeight="314.015">
        <path
            android:fillColor="#FCD83500"
            android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
    </vector>
</rotate>

ВЫХОД

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

Наконец, я получил решение с использованием layer-list Достичь этого

  • LayerDrawable - это drawable объект, который управляет массивом других drawables. Каждый drawable в списке отображается в порядке списка - последний drawable в списке отображается сверху.

МОЙ КОД

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="26px"
        android:right="26px">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval"
            android:useLevel="false">
            <solid android:color="#00006AC5" />
            <size
                android:width="50dp"
                android:height="50dp" />
            <stroke
                android:width="2dp"
                android:color="#00BCD4" />
        </shape>

    </item>

    <item
        android:width="50dp"
        android:height="25dp"
        android:end="2dp"
        android:gravity="center"
        android:start="2dp"
        android:top="22dp">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid android:color="#00BCD4" />
            <size
                android:width="10dp"
                android:height="5dp" />
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp" />
        </shape>

    </item>

</layer-list>

ВЫХОД

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

Примечание. Не стесняйтесь публиковать ответ, если у вас есть другое решение.

person Goku    schedule 07.03.2019
comment
Предупреждение: Attribute end is only used in API level 23 and higher (current min is 16) - person Pratik Butani; 07.03.2019
comment
Думаю, вы получите ошибку: Element vector is not allowed here - person Pratik Butani; 07.03.2019

Используйте этот код для создания векторного изображения полукруга. Если вы хотите повернуть векторное изображение, используйте групповой тег с элементом поворота. См. Эту ссылку

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"

android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateX="314.015"
    android:rotation="90">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />

</group>
</vector>
person jeevashankar    schedule 07.03.2019