Linha inferior do estilo no Android


120

Preciso criar uma forma android para que apenas a parte inferior tenha traçado (uma linha tracejada). Quando tento o seguinte, o traçado corta a forma através do centro. Alguém sabe como fazer isso certo? o traçado precisa ser a linha inferior / borda. Estou usando a forma como plano de fundo para um TextView. Por favor, não importa por que eu preciso.

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

2
Por que eu iria ver seu projeto git para algo tão simples? Você está procurando hits para este projeto?
— Cote Mounyo

por curiosidade, por que você está usando px para especificar tamanhos de traço?
— 31514 Jose_GD

Respostas:


313

É meio que um hack, mas acho que essa é provavelmente a melhor maneira de fazer isso. A linha tracejada estará sempre na parte inferior, independentemente da altura.

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

Explicação:

A segunda forma é um retângulo transparente com um contorno tracejado. A chave para fazer a borda aparecer apenas na parte inferior está nas margens negativas definidas nos outros lados. Essas margens negativas "empurram" a linha tracejada para fora da área desenhada nesses lados, deixando apenas a linha na parte inferior. Um efeito colateral potencial (que eu não tentei) é que, para visualizações desenhadas fora de seus próprios limites, as bordas da margem negativa podem se tornar visíveis.


5
Inteligente mesmo. Levei algum tempo para descobrir que o que faz este trabalho é a diferença de 1 dp (em valor absoluto) entre o topo, direita e esquerda e da largura do traçado :)
— Jose_GD

5
Isso funciona perfeitamente, mas alguém poderia, por favor, complementar a resposta com uma explicação da matemática disso (para almas pobres como eu e qualquer outra pessoa que chegar aqui nos próximos dias) :)
— source.rar

Funciona bem. E você pode até usar um seletor que aponta para xmls da lista de camadas, dependendo do estado. Eu tive que descobrir isso e funciona também.
— Dacker

Não introduza um excesso desnecessário. Acho que a solução @Anonan é melhor. Tente modificar esse de acordo com suas necessidades.
— Vlad

44

Isso faz o truque ...

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

Existem dois retângulos que se sobrepõem e adicione espaço inferior para mostrar outra cor como uma linha. assim, você pode aplicar isto a ver outra maneira
— Jongz Puangput

3
Boa resposta, mas com overdraw redundante
— Lester

e também não vai funcionar quando você tem cores com alfa
— Dirk

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

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>

Funcionou perfeitamente para mim! Obrigado.
— hetsgandhi

19

Esta resposta é para os pesquisadores do Google que desejam mostrar a borda inferior pontilhada de EditTextcomo aqui

amostra

Crie uma pasta dotted.xmlinterna drawablee cole estes

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

Em seguida, basta definir o android:backgroundatributo dotted.xmlque acabamos de criar. Você se EditTextparece com isso.

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

13

Eu sinto que é direto, sem todo esse preenchimento negativo ou cegonha.

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

2
Se você não precisar de um plano de fundo especial, poderá remover o<item android:drawable="@color/main_bg_color"/>
— Overclover

1
Funciona com Android 27, não funciona com Android 19 ... não testou outras versões.
— Ridcully

10

Experimente o próximo código extraível 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>

7

Eu acho que você não precisa usar a forma se eu entendi você.

Se você estiver olhando como mostrado na imagem a seguir, use o seguinte layout.

insira a descrição da imagem aqui

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

EDITAR

brincar com essas propriedades, você obterá resultado

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

tente assim

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

meu acidente vascular cerebral é uma linha tracejada
— Cote Mounyo

Isso funciona, a única ressalva é quando a vista fica redimensionada muito pequeno, a forma fica invisível
— Jose_GD

Você sempre deve ter cuidado para não introduzir um excesso desnecessário.
— Vlad

5

Uma solução simples:

Crie um arquivo desenhável como edittext_stroke.xml na pasta desenhável. Adicione o código abaixo:

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

No arquivo de layout, adicione o drawable ao edittext como

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

Nesse caso, sua linha estará no centro, não no fundo
— Sviatoslav Zaitsev 06/10

4

Geralmente para tarefas semelhantes - criei drawable de lista de camadas como este:

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

A idéia é que primeiro você desenhe o retângulo com underlineColor e, em seguida, desenhe outro retângulo com o buttonColor real, mas aplicando bottomPadding. Isso sempre funciona.

Mas quando eu precisava do buttonColor para ser transparente, não podia usar o drawable acima. Eu encontrei mais uma solução

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

(como você pode ver aqui, o mainButtonColor é transparente e white_box é apenas um retângulo simples que pode ser desenhado com um sólido branco)


2

use este xml altere a cor com sua escolha.

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

Caso você queira programaticamente

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;
}

chame esse método como

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);

2

Isso funcionou melhor para mim:

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

Mostra a linha apenas na parte inferior. Você pode alterar facilmente a largura do traçado para o tamanho desejado e também atualizar a parte superior, esquerda e direita conforme necessário.


2

A maneira mais fácil de fazer isso é colocar depois dessa visualização onde você deseja a borda inferior

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

0

é completamente transparente Edittext com fundo transparente.

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


0

Uma solução simples :

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

E, finalmente, temos algo parecido :)

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.