Idee für bessere Darstellung

  • Antworten:8
  • OffenNicht stickyBentwortet
  • Forum-Beiträge: 407

03.04.2021, 17:40:12 via Website

Hallo zusammen

In meiner App mache ich eine Aufzählung.

image

Hat mir jemand eine Idee wie ich das schöner darstellen könnte?
Ich möchte, dass links alle schwarzen Balken gleich lang sind und rechts die Spalte ausgerichtet sind. Ich möchte aber keine feste Breite verwenden, so dass es auf fast allen Handys gut aussieht.

Gruss Renato

Diskutiere mit!
Beste Antwort
  • Forum-Beiträge: 2.330

06.04.2021, 20:40:50 via Website

Jokel

android:layout_gravity="end" nicht sinnvol beser ist RIGHT

Naja empfohlen ist tatsächlich die Angaben start/end statt left/right zu benutzen, weil diese auch bei Right-To-Left Layouts funktionieren. z.B. im arabischen Raum.

@topic
Nimm bei den <TableRow> mal alles raus. Die brauchen keine width/height oder anderen Attribute.
Im TableLayout brauchen die TextViews du auch kein weight und kein layout_gravity. Kann alles weg.
Das TableLayout selbst übernimmt dann mit stretchColums die Verteilung der korrekten Breiten.
Zusätzlich kannst Du als Breite für die TextViews noch 0dp eintragen. Damit überträgst Du dem Layout explizit die Entscheidung über die Breite.

Beispiel:

<TableRow>

    <TextView
        android:id="@+id/txt_silber"
        style="@style/LabelTetel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:text="@string/lbl_silber"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/txt_silber_dat"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />

</TableRow>

— geändert am 06.04.2021, 20:44:05

Hilfreich?
Diskutiere mit!
  • Forum-Beiträge: 3.645

04.04.2021, 13:43:09 via Website

Hallo Renato,

recht einfach.

für den linken Container nimmst du dir z.b. einen eigenen RelativeLayout -> Hintergrund schwarz.

Liebe Grüße - Stefan
[ App - Entwicklung ]

Hilfreich?
Diskutiere mit!
  • Forum-Beiträge: 2.330

05.04.2021, 14:21:53 via Website

Ich würde ein TableLayout nehmen. Dann die Views in der linken Spalte auf match_parent und mit schwarzem Hintergrund.
Dann ist auch sichergestellt, dass die Zellen einer Zeile immer auf einer Höhe sind - sogar wenn z.B. die Schriftgröße der Spalten unterschiedlich ist.

Hilfreich?
Diskutiere mit!
  • Forum-Beiträge: 407

05.04.2021, 18:32:33 via Website

Ciao Rafael

Ich habe das Layout auch als TableLayout erstellt. Trotzdem werden die Spalten nicht gleich breit.

<?xml version="1.0" encoding="utf-8"?>

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/lay_festtage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layoutDescription="@xml/activity_fest_tags_kalender_scene"
tools:context=".FestTagsKalender">

<TableLayout
    android:id="@+id/lay_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow
        android:id="@+id/tab_eins"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_neujahr"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_neujahr"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_neujahr_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_zwei"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_konig"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_konig"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_konig_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_drei"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_asche"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_asche"
            android:textColor="@android:color/holo_purple" />

        <TextView
            android:id="@+id/txt_asche_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_vier"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start" >

        <TextView
            android:id="@+id/txt_palm"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_palm"
            android:textColor="@android:color/holo_red_dark" />

        <TextView
            android:id="@+id/txt_palm_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />

    </TableRow>

    <TableRow
        android:id="@+id/tab_fuenf"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_grund"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_gruend"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_gruend_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_sechs"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_karrfrei"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_karrfrei"
            android:textColor="@android:color/holo_red_dark" />

        <TextView
            android:id="@+id/txt_karrfrei_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_sieben"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_osternacht"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_osternacht"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_osternacht_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_acht"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_ostern"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_ostern"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_ostern_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_neun"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/txt_osterm"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_osterm"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_osterm_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_zehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_pfingst"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_pfingst"
            android:textColor="@android:color/holo_red_dark" />

        <TextView
            android:id="@+id/txt_pfingst_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_elf"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_pfingstm"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_pingstm"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_pfingstm_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_zwoelf"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_allerh"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_allerh"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_allerh_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_dreizehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_allers"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_allers"
            android:textColor="@android:color/holo_purple" />

        <TextView
            android:id="@+id/txt_allers_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_vierzehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_hilabend"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_heilabend"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_heilabend_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_fuenfzehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_weihnacht"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_weihnacht"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_wehinacht_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_sechzehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_stefan"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_stefan"
            android:textColor="@android:color/holo_red_dark" />

        <TextView
            android:id="@+id/txt_stefan_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tab_siebzehn"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/txt_silber"
            style="@style/LabelTetel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:text="@string/lbl_silber"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/txt_silber_dat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight="1" />
    </TableRow>
</TableLayout>

Oder muss ich noch was ändern?

Gruss Renato

Hilfreich?
Diskutiere mit!
  • Forum-Beiträge: 1.433

06.04.2021, 18:13:45 via Website

Hallo

Ich würde nicht für jede Tabellen Zeile einen Row im Layout machen sondern ein ListView oder RecyclerView machen und da auch das
android:stretchColumns="*" oder android:stretchColumns="0,1" benutzen.

Somit ist es auch in jedem Row enthalten.

https://abhiandroid.com/ui/tablelayout

auch finde ich dein
android:layout_gravity="end" nicht sinnvol beser ist RIGHT
oder android:gravity="rigth"

Das Gewicht brauchst du hier nicht.

— geändert am 06.04.2021, 19:43:12

Hilfreich?
Diskutiere mit!
Beste Antwort
  • Forum-Beiträge: 2.330

06.04.2021, 20:40:50 via Website

Jokel

android:layout_gravity="end" nicht sinnvol beser ist RIGHT

Naja empfohlen ist tatsächlich die Angaben start/end statt left/right zu benutzen, weil diese auch bei Right-To-Left Layouts funktionieren. z.B. im arabischen Raum.

@topic
Nimm bei den <TableRow> mal alles raus. Die brauchen keine width/height oder anderen Attribute.
Im TableLayout brauchen die TextViews du auch kein weight und kein layout_gravity. Kann alles weg.
Das TableLayout selbst übernimmt dann mit stretchColums die Verteilung der korrekten Breiten.
Zusätzlich kannst Du als Breite für die TextViews noch 0dp eintragen. Damit überträgst Du dem Layout explizit die Entscheidung über die Breite.

Beispiel:

<TableRow>

    <TextView
        android:id="@+id/txt_silber"
        style="@style/LabelTetel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:text="@string/lbl_silber"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/txt_silber_dat"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />

</TableRow>

— geändert am 06.04.2021, 20:44:05

Hilfreich?
Diskutiere mit!
  • Forum-Beiträge: 407

06.04.2021, 20:59:43 via Website

Ciao Jokel

Das werde ich mal versuchen.

In einem Punkt irrst du dich. Man sollte kein left oder right verwenden. Android hat mit Absicht start und end. Und zwar aus einem ganz wichtigen Grund. Denn nicht alle schreiben von links nach rechts. Verwendet man start und end, dann wird je nach Sprache alles in der richtigen Reihenfolge dargestellt. Macht doch Sinn?

Gruss Renato

Hilfreich?
Diskutiere mit!