Android Layout Preview not matching with the Deployed App in Device?

Question

I used the Andorid Support Library to make a Card layout and implemented TextView and Image view in it.

Card View XML

   <?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view_1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        card_view:cardElevation="5dp"
        card_view:contentPadding="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="10dp">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:id="@+id/originLayout">

                <TextView
                    android:id="@+id/tvOrigin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="BOM"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="40sp" />

                <TextView
                    android:id="@+id/tvDeparture"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="20:45"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="20sp" />

            </LinearLayout>

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="50sp"
                android:layout_height="50sp"
                android:layout_margin="18dp"
                android:layout_toEndOf="@+id/originLayout"
                android:src="@drawable/flight" />

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@+id/imageView"
                android:layout_margin="10dp"
                android:id="@+id/destiLayout">

                <TextView
                    android:id="@+id/tvDesti"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="GOA"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="40sp" />

                <TextView
                    android:id="@+id/tvArrival"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="21:45"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="20sp" />

            </LinearLayout>
        </RelativeLayout>


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

</LinearLayout>

However, when I deploy this in my App, the Relative Layout gets cluttered and all the TextViews and ImageView gets on top of each other.

How can I fix this?

`toEndOf` is api17+. check that your device has the right android version. — njzk2, Oct 30 '15 at 16:30
Also, your elements are one after the other. A LinearLayout would be simpler and equivalent — njzk2, Oct 30 '15 at 16:31

Pavan · Accepted Answer · 2015-10-30T16:35:20.637

2

instead of

 android:layout_toEndOf

better use

android:layout_below

toEndOf and toStartOf is added recently in API level 17 i.e. android 4.2 versions so it will not be found in lower versions of android

edited Oct 30 '15 at 16:35

answered Oct 30 '15 at 16:31

Pavan

5,016
1
26
30

1

a/ no. b/ you say that, but why? – njzk2 Oct 30 '15 at 16:31

score 0 · Answer 2 · answered Oct 30 '15 at 17:37

0

XML Layout is not bad designed. I messed up with layout_toEndOf as it is not supported by devices below API 17. However, my test device was of API 14. I added the tag layout_toRightOf to the XML and now, it renders perfectly in the Test Device.

answered Oct 30 '15 at 17:37

Swapnil Dey

31
6

Android Layout Preview not matching with the Deployed App in Device?

2 Answers2