1

This is how the design looked in Preview tab

enter image description here

But when I run it on emulator or real device, valid until date not appearing.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/card_margin"
        android:elevation="3dp"
        card_view:cardCornerRadius="@dimen/sell_item_radius">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:background="@android:color/holo_blue_light">

                <TextView
                    android:id="@+id/date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/validUntil"
                    android:textColor="@color/colorPrimaryDark" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@+id/date"
                    android:text="date"
                    android:textColor="@color/colorPrimaryDark" />

            </RelativeLayout>

            <ImageView
                android:id="@+id/itemImage"
                android:layout_width="match_parent"
                android:layout_height="@dimen/sell_item_image_height"
                android:clickable="true"
                android:scaleType="fitXY"
                android:src="@drawable/ic_camera" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/itemImage"
                android:layout_alignParentRight="true"
                android:src="@drawable/ic_favourite" />

            <TextView
                android:id="@+id/imageCount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginTop="5dp"
                android:layout_marginRight="10dp"
                android:text="@string/imageCount"
                android:textColor="@color/blue" />

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/itemImage"
                android:layout_marginTop="-3dp"
                android:paddingLeft="@dimen/sell_item_image_padding"
                android:paddingTop="@dimen/sell_item_image_padding"
                android:paddingRight="@dimen/sell_item_image_padding"
                android:text="@string/title"
                android:textColor="@color/blue"
                android:textSize="@dimen/sell_item_title" />

            <TextView
                android:id="@+id/price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/title"
                android:layout_marginRight="10dp"
                android:paddingLeft="@dimen/sell_item_image_padding"
                android:paddingRight="@dimen/sell_item_image_padding"
                android:text="@string/price" />
        </RelativeLayout>

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

</LinearLayout>

Thanks

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
AI.
  • 934
  • 2
  • 14
  • 30

2 Answers2

4

The reason that you don't see some of your views is that all of your views width and height are wrap_content - so you created a layout that your views can expand according to the content of them (if you will add 200 dp on 600 dp image and set width and height to wrap_content this will be your view size) and you can see that even on your preview - your views are overlapping one another.

So you can either use fixed size on your views, but by doing so you are entering the danger zone - your layout won't be responsive to all screen sizes, that's because different phones got different screen size and what may look good on one phone won't look good on another phone.


Sure, you can fix this by creating a single layout for every screen size but that's a lot of work.

You can also define your relative layout with android:weightSum and layout_weight

But there is an even better option:


You can use ConstraintLayout to achieve a single layout that is responsive to all screen sizes, all of its view hierarchy is flat (no nested view groups) and is it really simple to use.

Here is an example for a layout that looks just like you want with constraintLayout :

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView12"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="0dp"
    android:layout_height="15dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toTopOf="@+id/textView12"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<TextView
    android:id="@+id/textView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="TextView"
    app:layout_constraintStart_toEndOf="@+id/textView10"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView14"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="heart"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/textView8" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/textView14"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView8"
    tools:src="@tools:sample/avatars[11]" />
</androidx.constraintlayout.widget.ConstraintLayout>

And here is how it looks in portrait :

enter image description here

And landscape:

enter image description here

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53
0

Finally I solved it ! I just move the imageView with id itemImage, place it after first RelativeLayout.

AI.
  • 934
  • 2
  • 14
  • 30