Android XML: Layout row changes on device change

Question

I am more into Swift than Android but am trying to learn it.

With Swift I used auto layout with constraints which allowed me to layout pretty easy. I can't seem to achieve what I want to with Android XML.

I am creating a custom list view row. I want the row to be the same height as the image (128px) no more or no less. Then I want the title centred and below the title, 2 images each with text.

With relative layout I am setting the image to be 128x128.
The scene title to be centre aligned and 30dp to the left of the main image.
The other 2 images and text views always below the title
The first 'SceneOptionImage' in line with the start of the title
The other views just go in a line after 'sceneOptionImage'

I thought I had it as on the smaller device preview it looked fine. But as I move up screen resolutions it is as if the row gets smaller in height.

4.0 inch screen:

6.0 inch screen:

So why does the height of the row appear to change?

Could I get some pointers? Thanks.

Here is the full XML code for reference:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="128px"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/sceneImage"
        android:layout_width="128px"
        android:layout_height="128px"
        android:layout_margin="0px"
        app:srcCompat="@mipmap/clipboard"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/sceneName"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:text="Scene Title"
        android:layout_toEndOf="@id/sceneImage"
        android:layout_marginLeft="30dp"
        android:gravity="center"/>

    <ImageView
        android:id="@+id/sceneOptionImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/forest"
        android:layout_below="@+id/sceneName"
        android:layout_alignStart="@+id/sceneName"
        android:layout_marginTop="18dp" />

    <TextView
        android:id="@+id/sceneOptionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_toEndOf="@+id/sceneOptionImage"
        android:layout_below="@id/sceneName"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <ImageView
        android:id="@+id/sceneColourImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        app:srcCompat="@mipmap/forest"
        android:layout_below="@+id/sceneName"
        android:layout_alignStart="@+id/sceneOptionText"
        android:layout_marginTop="18dp" />

    <TextView
        android:id="@+id/sceneColourText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_toEndOf="@+id/sceneColourImage"
        android:layout_below="@id/sceneName"
        android:layout_marginTop="20dp"
        android:text="TextView" />
</RelativeLayout>

Maybe you should try [ConstraintLayour](https://developer.android.com/training/constraint-layout/index.html) — artem_p, Aug 08 '17 at 09:48
Well thats was an easy fix. Thanks. Any chance you could explain why dp is the same for all devices and px isn't? — jackabe, Aug 08 '17 at 09:49
You should have layout file for each type of screen and always use dp for android:layout_width and android:layout_height. Layout rendering might change depends on screen density and screen width. — anhtuannd, Aug 08 '17 at 09:50
@jackabe refer [this](https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp-on-android) — V-rund Puro-hit, Aug 08 '17 at 09:52
you should use different layout folders for the layout design and you can also use Percent Relative layout which would also help you - https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html — Jeevanandhan, Aug 08 '17 at 09:52

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Image

Solution to your problem is weight sum. this will allows you to manage layout on different screen size

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="128dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:orientation="vertical">

            <LinearLayout
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Scene Title"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <LinearLayout
                    android:gravity="center"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text View"/>
                </LinearLayout>
                <LinearLayout
                    android:gravity="center"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/ic_launcher"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Text View"/>
                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Android XML: Layout row changes on device change

1 Answers1