Mit RelativeLayout kann keine gute Überlappung erzielt werden

Question

Ich möchte eine Präsentation wie diese machen: (gemacht mit Gimp)

Und im Moment bekomme ich nur so etwas:

Meine Layout-XML-Datei sieht momentan folgendermaßen aus:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/itemRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4sp"
android:orientation="vertical">
<LinearLayout
    android:id="@+id/bigbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20px"
android:background="#caced4"
android:clipChildren="false"
android:onClick="itemClicked">
    <RelativeLayout
    android:id="@+id/box"
    android:layout_marginTop="-10px"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
        <TableLayout android:id="@+id/TableLayout01"
        android:layout_width="40dip" 
        android:layout_height="40dip"
        android:background="@drawable/corner"
        >
        <TextView android:text="03 sept."
        android:background="#424e5f" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3px"
        android:layout_marginBottom="3px"
        android:layout_marginRight="3px"
        android:layout_marginTop="3px"
        android:id="@+id/itemPubdate" 
        android:gravity="center" android:textStyle="bold"/>
        </TableLayout>
    </RelativeLayout>
    <LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="4sp">
        <TextView android:id="@+id/itemTitle"
        android:text="Arrêtez moi ces répondeurs d'email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="2"
        android:textColor="#424e5f"
        android:textSize="13sp"
        android:textStyle="bold"/>
        <TextView android:id="@+id/itemDescription"
        android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:maxLines="3"
        android:textSize="11sp"/>
    </LinearLayout>
</LinearLayout>

Ich habe viele Kombinationen mit android:clipChildren="false" ohne gutes Ergebnis ausprobiert. Wenn jemand eine Lösung dafür hat ... wird mir das sehr helfen.

Danke,

Answer 1

Sie können auch ein vereinfachtes Layout ausprobieren, z. B.:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemRoot" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingBottom="4sp">
    <LinearLayout android:paddingLeft="45dip" android:background="#caced4"
        android:layout_width="fill_parent" android:layout_height="wrap_content" 
        android:orientation="vertical" android:layout_marginTop="10dp"
        android:clipChildren="false" android:onClick="itemClicked">
        <TextView android:id="@+id/itemTitle"
            android:text="Arrêtez moi ces répondeurs d'email"
            android:layout_width="wrap_content" android:layout_height="wrap_content" 
            android:maxLines="2" android:textColor="#424e5f" android:textSize="13sp"
            android:textStyle="bold" />
        <TextView android:id="@+id/itemDescription"
            android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
            android:layout_width="wrap_content" android:layout_height="wrap_content" 
            android:textColor="#000000" android:maxLines="3" android:textSize="11sp" />
    </LinearLayout>
    <TableLayout android:id="@+id/TableLayout01" android:background="@drawable/corner"
        android:layout_width="40dip" android:layout_height="40dip">
        <TextView android:id="@+id/itemPubdate" android:text="03 sept."
            android:background="#424e5f" android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3px" android:layout_marginBottom="3px"
            android:layout_marginRight="3px" android:layout_marginTop="3px"
            android:gravity="center" android:textStyle="bold" />
    </TableLayout>
</RelativeLayout>

oder ein bisschen mehr darüber nachdenken, nutzen Sie den RelativeLayout voll aus.
Das würde nur Ihr Kalenderelement (TableLayout) und die beiden TextViews enthalten, aber dafür benötigen Sie wahrscheinlich ein benutzerdefiniertes Zeichenelement (ein einfaches einfarbiges mit einem android:top="10dp"-Satz.

Update :
Mit RelativeLayout und zwei benutzerdefinierten Zeichenelementen (von denen Sie eines bereits teilweise haben: corner) können Sie dieses Layout erreichen:

Für ein solches Ergebnis benötigen Sie das
row_layout.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemRoot" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:padding="4sp"
    android:background="@drawable/overlap" android:onClick="itemClicked">
    <TextView android:id="@+id/itemPubdate" android:text="03 sept."
        android:background="@drawable/overlap_calendar" 
        android:layout_width="40dip" android:layout_height="40dip"
        android:gravity="center" android:textStyle="bold" />
    <TextView android:id="@+id/itemTitle" android:paddingLeft="5sp"
        android:text="Arrêtez moi ces répondeurs d'email"
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:maxLines="2" android:textColor="#424e5f" android:textSize="13sp"
        android:textStyle="bold" android:ellipsize="end"
        android:layout_toRightOf="@id/itemPubdate" android:paddingTop="10dp"/>
    <TextView android:id="@+id/itemDescription" android:paddingLeft="5sp"
        android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:textColor="#000000" android:maxLines="3" android:textSize="11sp"
        android:layout_toRightOf="@id/itemPubdate"
        android:layout_below="@id/itemTitle" />
</RelativeLayout>

und die beiden referenzierten Drawables
res / drawable / overrap.xml :

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="2dp" android:left="2dp" 
        android:right="2dp">
        <shape>
            <solid android:color="#caced4" />
            <stroke android:width="3dp" color="#caced4" />
            <padding android:left="2dp" android:top="2dp" android:right="2dp"
                android:bottom="2dp" />
        </shape>
    </item>
</layer-list>

und res / drawable / überlappungskalender.xml :

<?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="#f0f0f0" />
            <corners android:bottomRightRadius="3dp"
                android:bottomLeftRadius="3dp" android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
        </shape>
    </item>
    <item android:top="2dp" android:left="2dp" android:right="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#424e5f" />
            <corners android:bottomRightRadius="3dp"
                android:bottomLeftRadius="3dp" android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
        </shape>
    </item>
</layer-list>

Answer 2

Versuchen Sie dies

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemRoot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="4sp"
    android:orientation="vertical"
>
    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
    >
        <View
            android:layout_width="fill_parent"
            android:background="#caced4"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/bigbox"
            android:layout_alignTop="@+id/bigbox"
        ></View>
        <RelativeLayout
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/box"
        >
            <TableLayout
                android:layout_width="40dip"
                android:id="@+id/TableLayout01"
                android:background="@drawable/corner"
                android:layout_height="40dip"
            >
                <TextView
                    android:textStyle="bold"
                    android:text="03 sept."
                    android:gravity="center"
                    android:layout_marginRight="3px"
                    android:id="@+id/itemPubdate"
                    android:layout_marginBottom="3px"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="3px"
                    android:background="#424e5f"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3px"
                ></TextView>
            </TableLayout>
        </RelativeLayout>
        <LinearLayout
            android:id="@+id/bigbox"
            android:layout_height="wrap_content"
            android:layout_marginTop="20px"
            android:onClick="itemClicked"
            android:layout_width="match_parent"
            android:clipChildren="false"
            android:orientation="horizontal"
            android:layout_toRightOf="@+id/box"
        >
            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:paddingLeft="4sp"
                android:orientation="vertical"
            >
                <TextView
                    android:textStyle="bold"
                    android:maxLines="2"
                    android:text="Arrêtez moi ces répondeurs d'email"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textColor="#424e5f"
                    android:id="@+id/itemTitle"
                    android:textSize="13sp"
                ></TextView>
                <TextView
                    android:maxLines="3"
                    android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textColor="#000000"
                    android:id="@+id/itemDescription"
                    android:textSize="11sp"
                ></TextView>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>