Differences between android studio preview and phone

Question

I have an ImageView called 'neura_bar_img' and two TextViews to its right:

The XML code:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/summaryCard"
    android:layout_below="@+id/topCard"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    app:layout_heightPercent="25%"
    app:layout_marginTopPercent="3%"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="3dp"
        android:paddingBottom="3dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
            <ImageView
                android:layout_width="270dp"
                android:layout_height="113dp"
                android:id="@+id/neura_bar_img"
                android:src="@drawable/detailed_daily_sum"
                android:layout_centerVertical="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/neura_bar_img"
                android:layout_alignBottom="@id/neura_bar_img"
                android:layout_alignLeft="@id/neura_bar_img"
                android:layout_alignRight="@id/neura_bar_img"
                android:gravity="center"
                android:id="@+id/detailed_goal_text"
                android:textStyle="italic"
                android:text="0"
                android:textSize="30sp"
                android:textColor="@color/graphicsBlue"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/detailed_bites_eaten_text"
                android:layout_alignTop="@id/neura_bar_img"
                android:layout_alignBottom="@id/neura_bar_img"
                android:layout_alignLeft="@id/neura_bar_img"
                android:layout_alignRight="@id/neura_bar_img"
                android:gravity="center"
                android:layout_marginRight="170dp"
                android:layout_marginTop="10dp"
                android:textStyle="bold|italic"
                android:text="0"
                android:textSize="45sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/sports_part_text"
                android:layout_alignTop="@id/neura_bar_img"
                android:layout_alignBottom="@id/neura_bar_img"
                android:gravity="center"
                android:layout_marginTop="58dp"
                android:layout_marginLeft="0dp"
                android:layout_toRightOf="@+id/neura_bar_img"
                android:text="---"
                android:textSize="30sp"
                android:textColor="@color/graphicsOrange"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/bites_part_text"
                android:layout_alignTop="@id/neura_bar_img"
                android:layout_alignBottom="@id/neura_bar_img"
                android:gravity="center"
                android:layout_marginBottom="54dp"
                android:layout_marginLeft="0dp"
                android:layout_toRightOf="@+id/neura_bar_img"
                android:text="0"
                android:textSize="30sp"
                android:textColor="@color/graphicsGrey"/>
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

On Android Studio's preview it looks just fine. But on some devices there is a gap between the ImageView and the Text View. Here is an example:

• This picture was taken from LG G3 for example but I saw the same problem on Moto G

I have no idea why this is happening, and didn't find any similar cases online.

Thanks in advance!

Answer 1

Your imageView is missing the scaleType attribute which is set by default as fitcenter making it depending on the device, try this

<ImageView
  android:id="@+id/ZKt_qF_kgP"
  android:layout_width="270dp"
  android:layout_height="113dp"
  android:src="@drawable/neura_bar_img"
  android:layout_centerVertical="true"
  android:scaleType="fitXY"
            />

Also different android often has different screen metrics:

LG 3 : 480dp x 835dp
Moto G : 360dp x 640dp
Nexus 4 (default android studio preview in my case ) : 384dp x 640dp
See this table for more devices metrics.

if you want to adjust your application for the three device above you need to specify a layout for each metric (here width) in the corresponding folders:

layout-sw360dp layout-sw480dp layout-sw384dp