Android-在xml / vector中制作信封形状背景

Question

I'm trying to do a shape as this one in xml :

It is a simple rectangle, with a solid color and a little transparent triangle in the top-center , from the inner side .

Can this be achieved using vectors?

Answer 1

Try this

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

OUTPUT

Answer 2

You can draw it with using shapeShifter even you can give some animations to your vector.

Try with this :

<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 3

This is a bit of a hack using ConstraintLayout and a vector drawable, but it works! It will expand to fill the width of its container.

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

Result

Answer 4

In general, a good starting point when looking for icons for your Android project is the icons section of the Material Design website. In particular, for the icon you are looking for you can try to find something very similar and worst case you can adapt it and tweak it a bit. Check the mail icon, is a very fine drawn envelope: https://material.io/tools/icons/?icon=mail&style=baseline

Select Android from the options, and press the SVG Button to obtain your vector asset.

For adding a different color, you can apply a tint on your vector directly on the xml:

android:tint="@color/your_color"

Answer 5

Use the Vector Asset Studio in latest Android Studio IDE and use the local file

Vector Asset Studio adds a vector graphic to the project as an XML file that describes the image. Maintaining one XML file can be easier than updating multiple raster graphics at various resolutions.

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