Android Cardview elements stack on top of each other

Rafa

I have a cardview layout like the one showed below, but both of the elements in my file stack on top of each other. I've read other posts that say to be able to space elements more efficiently you have to have another layout inside the cardview, but it's not working for me. If I add a android:layout_above... then one of the elements disappears. I want to one element above the other. Can anyone point out what I'm doing wrong?

enter image description here

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <RelativeLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_above="@+id/temperature"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="50sp" />

    </RelativeLayout>

</android.support.v7.widget.CardView>
Niko Adrianus Yuwono

You can use LinearLayout instead of RelativeLayout for that

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <LinearLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:weightSum="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_above="@+id/temperature"
            android:weight="1"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:weight="1"
            android:textSize="50sp" />

    </LinearLayout>

</android.support.v7.widget.CardView>

or if you want to use RelativeLayout you can use this trick

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/currentData"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor="@color/orange">

    <RelativeLayout
        android:id="@+id/cardviewLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:orientation="vertical">

        <View
            android:id="@+id/anchor_view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>

        <TextView
            android:id="@+id/time"
            tools:text="this is the time"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_above="@+id/anchor_view"
            android:textColor="@color/white"/>

        <TextView
            android:id="@+id/temperature"
            tools:text="50°"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_below="@+id/anchor_view"
            android:textSize="50sp" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

This way the anchorview will be located in the middle of the parent view but won't be drawed because the width and the height is zero but it will be come the reference for time and temperature so time will fill the upper half and temperature will fill the bottom half

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to stack HTML elements on top of each other

android image stack on top of each other horizontally

Make display: table-cell elements stack on top of each other?

How to stack html elements with same class on top of each other in Sass

Divs stack on top of each other

Elements overlapping on top of each other

How do I stack DIV elements on top of each other with position: relative

R: "stack" columns on top of each other

Stack groups in a DataFrame on top of each other

draggable items stack on top of each other in a sortable

How to Stack Divs on top of each other

Stack flex items on top of each other

How to stack items on top of each other?

How to Stack Arrays on top of Each Other

The Div's stack on top of each other

Stack elements above each other inside a container

Swift - vertical stack elements overlaying each other

Elements overlapping on top of each other in relativeLayout

How to position html elements on top of each other?

Trying to put elements on top of each other

How to stack data frames on top of each other in Pandas

How can you stack buttons on top of each other in Manifest XML

Pandas - Stack dataframes with different name and number of columns on top of each other

How can I stack two views on top of each other?

Stack divs on top of each other using bootstrap flexbox

How do I stack components on top of each other in React?

How to stack two ggplot points on top of each other with error bars

How to stack these circles on top of each other in D3.js?

How can I stack annotations on top of each other with matplotlib?