Я пытаюсь создать эту форму в xml, как это сделать? - PullRequest
0 голосов
/ 05 февраля 2020

Я связал изображение, как его создать в android xml

Прямоугольник с закругленными углами и круг
Код написан для получения круга в прямоугольнике. Мне нужно создать прямоугольник с кругом внутри. как показано на рисунке ниже.

код, который я пробовал

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Larger blue circle in back -->
    <item>
        <shape
            android:shape="rectangle"
            >
            <solid android:color="#FFFFFF"
                />
            <corners
                android:topLeftRadius="30dp"
                android:topRightRadius="30dp"
                android:bottomRightRadius="30dp"
                android:bottomLeftRadius="30dp"

                />

            <size
                android:width="89dp"
                android:height="22dp"/>

            <stroke android:width="1dp"
                android:color="#fff" />



        </shape>
    </item>
    <!-- Smaller red circle in front -->
    <item>
        <shape android:shape="oval">
            <!-- transparent stroke = larger_circle_size - smaller_circle_size -->
            <stroke android:color="@android:color/transparent"
                android:width="5dp"/>
            <solid android:color="#f00"/>
            <size
                android:width="5dp"
                android:height="5dp"/>
            <padding
                android:bottom="0dp"
                android:left="10dp"
                android:right="40dp"
                android:top="0dp"
                />
        </shape>
    </item>
</layer-list>

Expected Output

Expected Output

1 Ответ

1 голос
/ 05 февраля 2020

форма круга может быть такой:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#B41D1D" />
    <size
        android:width="48dp"
        android:height="48dp" />
</shape>

Другая форма, подобная этой:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FAFAFA" />
    <corners android:radius="12dp" />
    <size
        android:width="120dp"
        android:height="40dp" />
    </shape>

И затем

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#E4E4E4"
android:padding="8dp">

<View
    android:id="@+id/view_rectangle"
    android:layout_width="200dp"
    android:layout_height="56dp"
    android:background="@drawable/rectangle"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/view_circle"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_marginStart="4dp"
    android:background="@drawable/circle"
    app:layout_constraintBottom_toBottomOf="@+id/view_rectangle"
    app:layout_constraintStart_toStartOf="@+id/view_rectangle"
    app:layout_constraintTop_toTopOf="@+id/view_rectangle" />

 </androidx.constraintlayout.widget.ConstraintLayout>

Если вы используете API 23 или выше может быть так:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in back -->
<item
    android:width="220dp"
    android:height="56dp">
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
        <corners android:radius="36dp" />
    </shape>
</item>
<!-- Smaller red circle in front -->
<item
    android:width="48dp"
    android:height="48dp"
    android:gravity="center|start"
    android:start="4dp">
    <shape android:shape="oval">
        <solid android:color="#f00" />
    </shape>
</item>
</layer-list>
...