Android - сделать фон в виде конверта в формате xml / vector

Question

Я пытаюсь сделать форму, как эта в xml :

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

Может ли это быть достигнуто с помощью векторов?

Answer 1

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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="150dp"
    android:viewportWidth="400"
    android:viewportHeight="230">
    <path
        android:fillColor="#24b44c"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.964 49.856 C 50.870 54.145,50.871 86.953,50.965 122.761 L 51.136 187.868 198.416 187.868 L 345.696 187.868 345.730 154.882 C 345.749 136.739,345.800 118.931,345.844 115.309 C 345.888 111.687,345.857 93.720,345.775 75.382 L 345.626 42.041 282.161 42.107 L 218.696 42.172 215.844 45.176 C 211.458 49.794,198.283 62.854,198.009 62.854 C 197.876 62.854,193.061 58.174,187.311 52.455 L 176.856 42.057 113.995 42.057 L 51.134 42.057 50.964 49.856" />
    <path
        android:fillColor="#74cc8c"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.923 48.296 C 50.923 49.630,50.961 50.176,51.008 49.509 C 51.055 48.842,51.055 47.750,51.008 47.083 C 50.961 46.415,50.923 46.961,50.923 48.296 M345.805 64.125 C 345.805 72.132,345.834 75.374,345.869 71.329 C 345.905 67.285,345.905 60.734,345.869 56.771 C 345.834 52.809,345.805 56.118,345.805 64.125 M345.750 79.723 C 345.750 80.168,345.797 80.350,345.855 80.127 C 345.914 79.905,345.914 79.541,345.855 79.318 C 345.797 79.096,345.750 79.278,345.750 79.723 M124.745 188.042 C 165.330 188.074,231.673 188.074,272.174 188.042 C 312.675 188.009,279.469 187.983,198.382 187.983 C 117.296 187.983,84.159 188.009,124.745 188.042" />
    <path
        android:fillColor="#9cdcac"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.912 44.598 C 50.912 45.425,50.954 45.763,51.005 45.350 C 51.056 44.936,51.056 44.261,51.005 43.847 C 50.954 43.434,50.912 43.772,50.912 44.598 M345.787 46.678 C 345.787 48.394,345.823 49.096,345.867 48.238 C 345.912 47.380,345.912 45.976,345.867 45.118 C 345.823 44.261,345.787 44.962,345.787 46.678" />
    <path
        android:fillColor="#b0e4c0"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M345.750 42.981 C 345.750 43.426,345.797 43.608,345.855 43.385 C 345.914 43.163,345.914 42.799,345.855 42.577 C 345.797 42.354,345.750 42.536,345.750 42.981 M202.531 58.521 L 201.618 59.503 202.600 58.590 C 203.513 57.740,203.688 57.539,203.513 57.539 C 203.475 57.539,203.033 57.981,202.531 58.521 M193.876 59.041 C 194.308 59.486,194.712 59.850,194.776 59.850 C 194.839 59.850,194.539 59.486,194.107 59.041 C 193.676 58.596,193.272 58.232,193.208 58.232 C 193.144 58.232,193.445 58.596,193.876 59.041" />
</vector>

ВЫХОД

Answer 2

Это что-то вроде хака, использующего ConstraintLayout и векторное изображение, но оно работает!Он расширится, чтобы заполнить ширину своего контейнера.

размеры. XML

<dimen name="toolbar_height">200dp</dimen>
<dimen name="toolbar_notch_width">100dp</dimen>

notch.xml

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

    <path
        android:fillColor="#000000"
        android:pathData="m0 0 12 12 12 -12 v12 h-24 v-12 z"/>

</vector>

toolbar.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"
    tools:layout_gravity="bottom">

    <View
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#F44336"
        app:layout_constraintEnd_toStartOf="@id/notch"
        app:layout_constraintStart_toStartOf="parent"/>

    <View
        android:id="@+id/notch"
        android:layout_width="@dimen/toolbar_notch_width"
        android:layout_height="0dp"
        android:background="@drawable/notch"
        android:backgroundTint="#4CAF50"
        app:layout_constraintDimensionRatio="1:0.5"
        app:layout_constraintEnd_toStartOf="@id/right"
        app:layout_constraintStart_toEndOf="@id/left"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/center"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFEB3B"
        app:layout_constraintTop_toBottomOf="@id/notch"
        app:layout_constraintStart_toStartOf="@id/notch"
        app:layout_constraintEnd_toEndOf="@id/notch"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <View
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#3F51B5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/notch"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Результат

Answer 3

Вы можете нарисовать его с помощью shapeShifter , даже если вы можете добавить анимацию к вашему вектору.

Попробуйте с этим:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M0.871,16L0.871,6L9.065,6L11.968,8.977L15.194,6L23.194,6L23.194,16Z"
      android:strokeWidth="1"
      android:fillColor="#6fb054"
      android:strokeColor="#6fb054"/>
</vector>

Answer 4

Используйте Vector Asset Studio в последней версии Android Studio IDE и используйте локальный файл

Vector Asset Studio добавляет векторную графику в проект в виде XML-файла, описывающего изображение. Ведение одного XML-файла может быть проще, чем обновление нескольких растровых изображений в различных разрешениях.

https://developer.android.com/studio/write/vector-asset-studio#svg

Answer 5

В целом, хорошей отправной точкой при поиске значков для вашего проекта Android является раздел значков веб-сайта Material Design.В частности, для значка, который вы ищете, вы можете попытаться найти что-то очень похожее, а в худшем случае вы можете адаптировать его и немного настроить.Проверьте значок mail, очень хорошо нарисованный конверт: https://material.io/tools/icons/?icon=mail&style=baseline

Выберите Android из вариантов и нажмите SVG Button, чтобы получить свой векторный актив.

Чтобы добавить другой цвет, вы можете применить оттенок к своему вектору прямо на xml:

android:tint="@color/your_color"