example - propiedades shape android

Línea vertical usando XML dibujable

Question

Estoy tratando de encontrar la manera de definir una línea vertical (1dp de espesor) para usar como dibujable.

Para hacer uno horizontal, es bastante sencillo:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp" android:color="#0000FF"/>
    <size android:height="50dp" />     
</shape>

La pregunta es, ¿cómo hacer que esta línea sea vertical?

Sí, hay soluciones, como dibujar una forma de rectángulo de 1px de grosor, pero eso complica el XML dibujable, si consta de múltiples <item> .

Alguien tenía alguna posibilidad con esto?

ACTUALIZAR

El caso aún no está resuelto. Sin embargo, para cualquier persona en una cruzada de documentación de Android, puede que le resulte útil: Falta el manual XML de Android

ACTUALIZAR

No encontré otra manera que no sea la que marqué como correcta. Aunque funciona un poco "pesado", si usted sabe la respuesta, no se olvide de compartir;)

Answer 1

Creo que esta es la solución más simple:

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

    <item
        android:gravity="center">
        <shape android:shape="rectangle">
            <size android:width="1dp" />
            <solid android:color="#0000FF" />
        </shape>
    </item>

</layer-list>

Answer 2

Depende de dónde desee tener la línea vertical, pero si quiere un borde vertical, por ejemplo, puede hacer que la vista principal tenga un fondo dibujable a medida. Y luego puede definir el dibujable de esta manera:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="#000000" />
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
        </shape>
    </item>

</layer-list>

Este ejemplo creará una línea negra delgada de 1 pd en el lado derecho de la vista, que tendrá este dibujable como fondo.

Answer 3

En lugar de una forma, puedes probar una View :

<View
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:background="#FF0000FF" />

Solo he usado esto para líneas horizontales, pero creo que también funcionaría para líneas verticales.

Utilizar:

<View
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:background="#FF0000FF" />

para una linea horizontal

Answer 4

Muy simple y creo que mejor enfoque.

<TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Section Text"
            android:id="@+id/textView6"
            android:textColor="@color/emphasis"
            android:drawableBottom="@drawable/underline"/>

underline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <size android:width="1000dp" android:height="2dp" />
      <solid android:color="@color/emphasis"/>
</shape>

Answer 5

Necesitaba agregar mis vistas dinámicamente / programáticamente, por lo que agregar una vista adicional hubiera sido engorroso. La altura de mi vista era WRAP_CONTENT, por lo que no pude usar la solución de rectángulo. Encontré una publicación de blog here sobre la extensión de TextView, sobreescribiendo onDraw () y pintando en la línea, así que lo implementé y funciona bien. Ver mi código a continuación:

public class NoteTextView extends TextView {
    public NoteTextView(Context context) {
       super(context);
    }
    private Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#F00000FF"));
        paint.setStrokeWidth(0);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, 0, getHeight(), paint);
    }
}

Necesitaba una línea vertical a la izquierda, pero los parámetros de drawline son drawLine(startX, startY, stopX, stopY, paint) para que pueda dibujar cualquier línea recta en cualquier dirección a través de la vista. Luego en mi actividad tengo NoteTextView note = new NoteTextView(this); Espero que esto ayude.

Answer 6

Para hacer una línea vertical, simplemente use un rectángulo con ancho de 1dp:

<shape>
    <size
        android:width="1dp"
        android:height="16dp" />
    <solid
        android:color="#c8cdd2" />
</shape>

No utilice stroke , use solid (que es el color de "relleno") para especificar el color de la línea.

Answer 7

Puede anidar su forma dentro de una etiqueta de rotación.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape 
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#ff00ff"
            android:dashWidth="1dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

Sin embargo, el único problema es que los parámetros de diseño definidos en su diseño xml serán las dimensiones utilizadas para dibujar la forma original. Es decir, si desea que su línea tenga una altura de 30dp, debe definir un layout_width de 30dp en su diseño xml. Pero el ancho final también será de 30dp en ese caso, lo que probablemente sea indeseable para la mayoría de las situaciones. Esto significa esencialmente que tanto el ancho como la altura deben tener el mismo valor, el valor de la longitud deseada para la línea. No pude encontrar la manera de arreglar esto.

Esta parece ser la solución de "camino de Android", pero a menos que haya una solución o una solución para el problema de dimensiones que menciono, probablemente esto no funcione para la mayoría de las personas. Lo que realmente necesitamos es un atributo de orientación en <shape /> o <stroke />.

También puede intentar hacer referencia a otro dibujable en los atributos de la etiqueta de rotación, como por ejemplo:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/horizontal_line" />

Sin embargo, no he probado esto y espero que tenga los mismos problemas.

- EDITAR -

Oh, en realidad descubrí una solución. Puede usar un margen negativo en su diseño xml para deshacerse del espacio adicional no deseado. Como:

<ImageView
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="-15dp"
    android:layout_marginRight="-15dp"
    android:src="@drawable/dashed_vertical_line" />

Answer 8

Puede usar una forma, pero en lugar de una línea, conviértalo en rectángulo.

android:shape="rectangle">
<stroke
    android:width="5dp"
    android:color="#ff000000"
    android:dashGap="10px"
    android:dashWidth="30px" />

y en tu diseño utiliza esto ...

<ImageView
    android:layout_width="7dp"
    android:layout_height="match_parent"
    android:src="@drawable/dashline"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layerType="software"/>

Es posible que deba jugar con el ancho, según el tamaño de los guiones, para colocarlo en una sola línea.

Espero que esto ayude a Cheers

Answer 9

Puedes usar el atributo rotar

 <item>
    <rotate
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:shape="line"
            android:top="1dip" >
            <stroke
                android:width="1dip"
                 />
        </shape>
    </rotate>
</item>

Answer 10

Se me ocurrió una solución diferente. La idea es llenar el dibujante primero con el color que prefiera que tenga la línea y luego vuelva a llenar toda el área con el color de fondo mientras usa el relleno izquierdo o derecho. Obviamente, esto solo funciona para una línea vertical en el extremo izquierdo o derecho de su dibujo.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/divider_color" />
    <item android:left="6dp" android:drawable="@color/background_color" />
</layer-list>

Answer 11

es muy simple ... agregar una línea vertical en Android xml ...

<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:rotation="90"
android:background="@android:color/darker_gray"/>

Answer 12

 <View
        android:layout_width="2dp"
        android:layout_height="40dp"

        android:background="#ffffff"
        android:padding="10dp" />`

Answer 13

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

Funciona para mi . Ponlo como fondo de vista con fill_parent o tamaño fijo en altura dp

Answer 14

add this in your styles.xml

        <style name="Divider">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:background">@color/divider_color</item>
        </style>

        <style name="Divider_invisible">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
        </style>

then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table. 

     <TableLayout
                android:id="@+id/table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:stretchColumns="*" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:background="#92C94A" >

                    <TextView
                        android:id="@+id/textView11"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp" />
    //...................................................................    

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider_invisible" />
                    </LinearLayout>
        //...................................................................
                    <TextView
                        android:id="@+id/textView12"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/main_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
  //...............................................................  
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    //...................................................................
                    <TextView
                        android:id="@+id/textView13"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/side_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

                    <TextView
                        android:id="@+id/textView14"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/total"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
                </TableRow>

                <!-- display this button in 3rd column via layout_column(zero based) -->

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#6F9C33" >

                    <TextView
                        android:id="@+id/textView21"
                        android:padding="5dp"
                        android:text="@string/servings"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider" />
                    </LinearLayout>

    ..........
    .......
    ......