Как сделать этот вид? - PullRequest
0 голосов
/ 29 ноября 2018

Как сделать этот вид?Я пытаюсь сделать это представление (1-е изображение), но вывод кода (2-е изображение) ниже не то, что я намерен.Пожалуйста, помогите

What to build

What am able to do till now

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

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">


            <android.support.v7.widget.AppCompatImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:background="@drawable/bg_round_black"
                android:padding="4dp"
                app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_text_rounded_black"
                android:gravity="center"
                android:paddingLeft="8dp"
                android:paddingRight="8dp"
                android:text="15 days left"
                android:textColor="@color/white" />
        </LinearLayout>

Ответы [ 3 ]

0 голосов
/ 29 ноября 2018

файл макета:

<RelativeLayout
    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">


    <TextView
        android:background="@drawable/right_rounded_test"
        android:layout_toRightOf="@+id/imgWarning"
        android:layout_marginLeft="-5dp"
        android:layout_centerVertical="true"
        android:text="15 days left"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:layout_width="200dp"
        android:layout_height="35dp"/>
    <ImageView
        android:id="@+id/imgWarning"
        android:padding="18dp"
        app:srcCompat="@drawable/ic_warning_test"
        android:background="@drawable/circular_test"
        android:layout_width="70dp"
        android:layout_height="70dp" />
</RelativeLayout>

Изображение BG Drawable (round_test.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="#15151E"/>
    </shape>
</item>

    <item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
        <shape android:shape="oval">
            <solid android:color="#F71149"/>
        </shape>
    </item>

    <item android:top="10dp" android:left="10dp" android:right="10dp" android:bottom="10dp">
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>


</layer-list>

TextView BG right_tained_test.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners android:topRightRadius="30dp"
    android:bottomRightRadius="30dp"/>
    <solid android:color="#15151E"/>
</shape>

Здесьваш вывод: enter image description here

Я не нашел вашу иконку, поэтому использовал ее.

0 голосов
/ 29 ноября 2018

Так оно и было

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">


        <android.support.v7.widget.AppCompatImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/bg_round_black"
            android:padding="4dp"
            app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_text_rounded_black"
            android:gravity="center"
            android:paddingLeft="8dp"
            android:marginLeft = "-5dp"
            android:paddingRight="8dp"
            android:text="15 days left"
            android:textColor="@color/white" />
    </LinearLayout>
0 голосов
/ 29 ноября 2018

Вы можете использовать приведенный ниже код для достижения вашего результата.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.v7.widget.AppCompatImageView
    android:layout_centerHorizontal="true"
    app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:background="@drawable/bg_round_black"
    android:padding="4dp" />

<View
    android:id="@+id/empty_view"
    android:layout_centerHorizontal="true"
    android:layout_width="10dp"
    android:layout_height="10dp"/>

<TextView
    android:layout_toRightOf="@+id/empty_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_text_rounded_black"
    android:gravity="center"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:text="15 days left"
    android:textColor="@color/white" />

ПРИМЕЧАНИЕ. Вы можете поиграть с шириной 'View', чтобы перетащить текстовую область наружу или внутрь .Надеюсь, это поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...