3

Tengo el siguiente diseño a cumplimentar para items de un ListView

introducir la descripción de la imagen aquí

las 3 barras en la parte derecha son indicativos que significan algo para el usuario.

El detalle es que no logro que las barras se ajusten al alto del item (tal como lo requiere la figura), he logrado lo siguiente:

introducir la descripción de la imagen aquí

con este xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp"
            android:layout_centerVertical="true">

            <TextView
                android:id="@+id/txt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name" />

            <TextView
                android:id="@+id/txt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/relativeLayout2"
                android:text="@string/app_name"
                android:textSize="16sp"
                android:textStyle="bold" />
        </LinearLayout>

        <ImageButton
            android:id="@+id/img_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="29dp"
            android:src="@drawable/ic_create_white_24dp"
            android:theme="@style/defaultButton" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/ind_1"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimaryDark" />

        <TextView
            android:id="@+id/ind_2"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/ind_3"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/green_app" />
    </LinearLayout>

</RelativeLayout>

¿Qué me falta para poder realizar ese efecto?

3
  • Hola Rosendo, estas seguro que ese es el layout que usas, me parece que esta incorrecto, podrías agregarlo completamente, saludos!
    – Jorgesys
    Commented el 11 abr. 2016 a las 19:26
  • @Elenasys por error olvidé colocar los 4 espacios antes de la primera línea del código xml, ahora sí se muestra completo. Commented el 12 abr. 2016 a las 15:47
  • Una pequeña observación, cambia el obsoleto valor fill_parent a match_parent
    – Codelaby
    Commented el 12 abr. 2016 a las 16:29

2 respuestas 2

1

En el LinearLayout que contiene los textViews usa la propiedad:

android:layout_height="?attr/actionBarSize"

Con eso aseguras que el alto que toma sea el de la barra:

introducir la descripción de la imagen aquí

Puedes definir como otra opción una medida fija pero eso no creo sea lo correcto:

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">
...
...
...

Este sería el Layout corregido de la primera opción:

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/txt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/relativeLayout2"
            android:text="@string/app_name"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ImageButton
        android:id="@+id/img_button"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="29dp"
        android:src="@drawable/ic_create_white_24dp"
        android:theme="@style/defaultButton" />
</RelativeLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="?attr/actionBarSize"
    android:layout_alignParentRight="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/ind_1"
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark" />

    <TextView
        android:id="@+id/ind_2"
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary" />

    <TextView
        android:id="@+id/ind_3"
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:background="@color/green_app" />
</LinearLayout>

4
  • He usado todas las combinaciones posibles en el layout padre (layout_width, layout_height) y se sigue mostrando de la misma manera. Commented el 12 abr. 2016 a las 15:49
  • ya vi cual es tu problema, permiteme un momento para explicarte.
    – Jorgesys
    Commented el 12 abr. 2016 a las 15:57
  • es lo más cerca que está de una solución, pero el alto de la action bar es un poco menor al alto del item por ende queda un diminuto espacio en blanco. Ahora con todo esto, al diseñador se le ha ocurrido la brillante idea de mostrar el grupo de indicadores como un semáforo vertical jajaja Commented el 12 abr. 2016 a las 17:13
  • jaja :)! ok bueno la otra opción podría ser como comento, una altura fija.
    – Jorgesys
    Commented el 13 abr. 2016 a las 1:32
1

Al primero RelativeLayout si le pones un height fijo cómo 68dp o bien heredar del valor alto de un elemento de lista de configuración ?android:attr/listPreferredItemHeight

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:background="@android:color/white"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp"
            android:layout_centerVertical="true">

            <TextView
                android:id="@+id/txt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name" />

            <TextView
                android:id="@+id/txt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/relativeLayout2"
                android:text="@string/app_name"
                android:textSize="16sp"
                android:textStyle="bold" />
        </LinearLayout>

        <ImageButton
            android:id="@+id/img_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="29dp"
            android:src="@drawable/ic_create_white_24dp"
            android:theme="@style/defaultButton" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/ind_1"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimaryDark" />

        <TextView
            android:id="@+id/ind_2"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/ind_3"
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="@color/green_app" />
    </LinearLayout>

</RelativeLayout>
1
  • 1
    A pesar de que en el preview (IDE) las barras toman todo el alto del item, al ejecutarlo se muestra como si no hubiera hecho cambio alguno. Commented el 12 abr. 2016 a las 17:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.