Estilo de línea inferior en Android


120

Necesito crear una forma de Android para que solo la parte inferior tenga un trazo (una línea discontinua). Cuando intento lo siguiente, el trazo biseca la forma por el centro. ¿Alguien sabe cómo hacerlo bien? el trazo debe ser la línea inferior / borde. Estoy usando la forma como fondo de un TextView. Por favor, no importa por qué lo necesito.

<?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 qué debería ir a ver tu proyecto git por algo tan simple? ¿Está buscando éxitos para este proyecto?
Cote Mounyo

solo por curiosidad, ¿por qué estás usando px para especificar tamaños de guiones?
Jose_GD

Respuestas:


313

Es una especie de truco, pero creo que probablemente sea la mejor manera de hacerlo. La línea discontinua siempre estará en la parte inferior, independientemente de la 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>

Explicación:

La segunda forma es un rectángulo transparente con un contorno punteado. La clave para hacer que el borde solo aparezca en la parte inferior radica en los márgenes negativos establecidos en los otros lados. Estos márgenes negativos "empujan" la línea punteada fuera del área dibujada en esos lados, dejando solo la línea a lo largo de la parte inferior. Un efecto secundario potencial (que no he probado) es que, para las vistas que se dibujan fuera de sus propios límites, los bordes del margen negativo pueden volverse visibles.


5
Ciertamente inteligente. Me tomó un tiempo darme cuenta de que lo que hace que esto funcione es la diferencia en 1 dp (en valor absoluto) entre la parte superior, derecha e izquierda y el ancho del trazo :)
Jose_GD

5
Esto funciona perfectamente, pero ¿podría alguien complementar la respuesta con una explicación de las matemáticas en esto (para pobres almas como yo y cualquier otra persona que llegue aquí en los días venideros) :)
source.rar

Funciona genial. E incluso puede usar un selector que apunte a xmls de lista de capas según el estado. Tuve que resolver eso y también funciona.
Dacker

No introduzca sobregiro innecesario. Creo que la solución @Anonan es mejor. Intente modificar ese según sus necesidades.
Vlad

44

Esto hace el truco ...

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

Hay dos rectángulos superpuestos entre sí y agregan espacio en la parte inferior para mostrar otro color como una línea. entonces, puedes aplicar esto para hacerlo de otra manera
Jongz Puangput

3
Buena respuesta pero con sobregiro redundante
Lester

y tampoco funcionará cuando tenga colores con 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>

¡Funcionó perfectamente para mí! Gracias.
Hetsgandhi

19

Esta respuesta es para aquellos buscadores de Google que desean mostrar un borde inferior punteado EditTextcomo aquí.

muestra

Crea dotted.xmluna drawablecarpeta interior y pégalas

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

Luego, simplemente establezca el android:backgroundatributo dotted.xmlque acabamos de crear. Tu se EditTextve así.

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

13

Siento que es sencillo, sin todos estos acolchados negativos o cigüeñas.

<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
Si no necesita un fondo especial, puede eliminar el<item android:drawable="@color/main_bg_color"/>
Overclover

1
Funciona con Android 27, no funciona con Android 19 ... no probé otras versiones.
Ridcully

10

Pruebe el siguiente código dibujable 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

Creo que no necesitas usar la forma si te entendí.

Si está mirando como se muestra en la siguiente imagen, utilice el siguiente diseño.

ingrese la descripción de la imagen aquí

<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

juega con estas propiedades obtendrás resultado

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

prueba así

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

mi trazo es una línea discontinua
Cote Mounyo

Esto funciona, la única advertencia es cuando la vista cambia de tamaño demasiado pequeño, la forma se vuelve invisible
Jose_GD

Siempre debe tener cuidado de no introducir un sobregiro innecesario.
Vlad

5

Una solución simple:

Cree un archivo dibujable como edittext_stroke.xml en la carpeta dibujable . Agrega el siguiente código:

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

En el archivo de diseño, agregue el elemento de diseño para editar el texto 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"
      />

En este caso, su línea estará en el centro, no en la parte inferior
Sviatoslav Zaitsev

4

Por lo general, para tareas similares, creé una lista de capas que se puede dibujar como esta:

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

La idea es que primero dibujes el rectángulo con underlineColor y luego, encima de este, dibujes otro rectángulo con el buttonColor real pero aplicando bottomPadding. Siempre funciona.

Pero cuando necesitaba que buttonColor fuera transparente, no podía usar el elemento de dibujo anterior. Encontré una solución más

<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 puede ver aquí, mainButtonColor es transparente y white_box es solo un simple rectángulo que se puede dibujar con sólido blanco)


2

use este xml cambie el color con su elección.

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

En caso de que desee programáticamente

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

llamar a este método como

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

2

Esto funcionó mejor para mí:

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

Muestra la línea solo en la parte inferior. Puede cambiar fácilmente con el ancho del trazo al tamaño que desee y también actualizar la parte superior, izquierda, derecha en consecuencia.


2

La forma más fácil de hacer esto es poner después de esa vista donde desea el borde inferior

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

0

es Edittext completamente transparente con fondo 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

Una solución simple :

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

Y finalmente tenemos algo así :)

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.