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.