Стиль нижняя линия в Android

Мне нужно создать форму андроида, чтобы только нижняя часть имела обводку (пунктирная линия). Когда я пытаюсь сделать следующее, штрих делит фигуру пополам прямо через центр. Кто-нибудь знает, как это сделать правильно? штрих должен быть нижней линией/границей. Я использую фигуру в качестве фона для TextView. Пожалуйста, неважно, зачем мне это нужно.

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

android android-styles android-drawable layer-list
person Cote Mounyo    schedule 08.10.2013    source источник
comment
Зачем мне смотреть ваш проект git ради чего-то такого простого? Вы ищете хиты для этого проекта?   -  person Cote Mounyo    schedule 08.10.2013
comment
просто из любопытства, почему вы используете px для указания размеров тире?   -  person Jose_GD    schedule 05.03.2014

Ответы (14)


arrow_upward
327
arrow_downward

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Объяснение:

Вторая фигура представляет собой прозрачный прямоугольник с пунктирным контуром. Ключ к тому, чтобы граница отображалась только внизу, заключается в отрицательных полях, установленных с других сторон. Эти отрицательные поля «выталкивают» пунктирную линию за пределы нарисованной области с этих сторон, оставляя только линию внизу. Один потенциальный побочный эффект (который я не пробовал) заключается в том, что для представлений, которые рисуются за пределами своих собственных границ, могут стать видны границы с отрицательным полем.

person Krylez    schedule 08.10.2013
comment
Действительно умный. Мне потребовалось некоторое время, чтобы понять, что это работает благодаря разнице в 1 dp (по абсолютной величине) между верхним, правым и левым краями и ширине штриха :) - person Jose_GD; 06.03.2014
comment
Это отлично работает, но может кто-нибудь дополнить ответ объяснением математики в этом (для бедных душ, таких как я и любой другой, кто прибудет сюда в ближайшие дни) :) - person source.rar; 31.03.2015
comment
Прекрасно работает. И вы даже можете использовать селектор, который указывает на xml-файлы списка слоев в зависимости от состояния. Я должен был понять это, и это тоже работает. - person Dacker; 04.04.2016
comment
Не вводите ненужный овердрафт. Я думаю, что решение @Anonan лучше. Попробуйте изменить его под свои нужды. - person Vlad; 27.08.2017

arrow_upward
46
arrow_downward

Это делает трюк ...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>
person Jongz Puangput    schedule 18.06.2014
comment
Два прямоугольника перекрывают друг друга и добавляют нижнее пространство, чтобы показать другой цвет в виде линии. Итак, вы можете применить это, чтобы сделать по-другому - person Jongz Puangput; 18.06.2014
comment
Хороший ответ, но с избыточным овердрафтом - person Lester; 17.05.2016
comment
а также не будет работать, когда у вас есть цвета с альфой - person Dirk; 05.06.2017

arrow_upward
22
arrow_downward

Я чувствую, что это просто, без всех этих негативных дополнений или аистов.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>
person Simon K. Gerges    schedule 16.10.2016
comment
Если вам не нужен специальный фон, вы можете удалить <item android:drawable="@color/main_bg_color"/> - person Overclover; 13.11.2016
comment
Работает с Android 27, не работает с Android 19... другие версии не проверял. - person Ridcully; 28.04.2018
comment
Он также не работает с Android 21. - person Viktor Brešan; 22.04.2021
comment
Требуется уровень API 23 (Marshmallow). - person devconsole; 17.05.2021

arrow_upward
19
arrow_downward

Этот ответ предназначен для тех пользователей Google, которые хотят отображать пунктирную нижнюю границу EditText, как здесь

образец

Создайте dotted.xml внутри папки drawable и вставьте их

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Затем просто установите для атрибута android:background значение dotted.xml, которое мы только что создали. Ваш EditText выглядит так.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />
person Shree Krishna    schedule 15.03.2016

arrow_upward
10
arrow_downward

Попробуйте следующий код для рисования xml:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>
person Sviatoslav Zaitsev    schedule 06.10.2016

arrow_upward
7
arrow_downward

Я думаю, вам не нужно использовать форму, если я вас понял.

Если вы выглядите так, как показано на следующем изображении, используйте следующий макет.

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

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

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

ИЗМЕНИТЬ

поиграйте с этими свойствами, вы получите результат

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

попробуй так

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

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>
person Ketan Ahir    schedule 08.10.2013
comment
мой штрих - пунктирная линия - person Cote Mounyo; 08.10.2013
comment
Это работает, единственное предостережение: когда вид становится слишком маленьким, форма становится невидимой. - person Jose_GD; 05.03.2014
comment
Вы всегда должны быть осторожны, чтобы не ввести ненужный перерасход. - person Vlad; 27.08.2017

arrow_upward
5
arrow_downward

Простое решение:

Создайте файл с возможностью рисования как edittext_stroke.xml в папке с возможностью рисования. Добавьте приведенный ниже код:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

В файле макета добавьте рисуемый текст в edittext как

android:drawableBottom=@drawable/edittext_stroke

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />
person adhi    schedule 04.03.2016
comment
В этом случае ваша линия будет в центре, а не внизу - person Sviatoslav Zaitsev; 06.10.2016

arrow_upward
5
arrow_downward

Обычно для подобных задач я создал список слоев, который можно рисовать следующим образом:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

Идея состоит в том, что сначала вы рисуете прямоугольник с цветом underlineColor, а затем поверх него вы рисуете другой прямоугольник с фактическим цветом кнопки, но с применением bottomPadding. Это всегда работает.

Но когда мне нужно было, чтобы buttonColor был прозрачным, я не мог использовать приведенный выше рисунок. Я нашел еще одно решение

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(как вы можете видеть здесь, mainButtonColor прозрачен, а white_box — это просто прямоугольник, который можно нарисовать с помощью белого сплошного цвета)

person Lanitka    schedule 19.07.2017

arrow_upward
4
arrow_downward

самый простой способ сделать это - поставить после этого вида, где вы хотите нижнюю границу

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />
person Rachit Vohera    schedule 28.01.2020

arrow_upward
3
arrow_downward

Это сработало лучше всего для меня:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="0dp">
        <shape android:shape="rectangle">
            <stroke android:width="4dp" android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

Показывает линию только снизу. Вы можете легко изменить ширину обводки до нужного вам размера, а также соответственно обновить верхнюю, левую и правую части.

person Sileria    schedule 14.01.2019

arrow_upward
2
arrow_downward

используйте этот xml, измените цвет по вашему выбору.

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

В случае, если вы хотите программно

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

вызовите этот метод как

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);
person sourav pandit    schedule 29.03.2018

arrow_upward
1
arrow_downward

Просто добавьте -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Minus (-) how much dp you gave in the stroke width from left right top-->
    <item android:left="-10dp" android:right="-10dp" android:top="-10dp">
        <shape
            android:shape="rectangle">
            <stroke
                android:dashGap="10dp"
                android:dashWidth="10dp"
                android:width="10dp"
                android:color="@android:color/holo_red_dark" />
              <!--This is the main background -->
            <solid android:color="#FFDDDDDD" />
        </shape>
    </item>
</layer-list>

Предварительный просмотр –

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

person Gk Mohammad Emon    schedule 09.03.2021

arrow_upward
0
arrow_downward

это полностью прозрачный Edittext с прозрачным фоном.

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>

person Samet ÖZTOPRAK    schedule 01.11.2017

arrow_upward
0
arrow_downward

Простое решение:

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

        <shape android:shape="rectangle">

            <solid android:color="#AARRGGBB" />

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

Наконец-то у нас есть что-то подобное :)

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

person Amirhf    schedule 27.10.2019