Radinator Radinator - 3 months ago 10
Android Question

Android - Layout on phone differs from designer in size

Currently i'm developing a mobile application that shows some values (they will never change, so they are saved in a List). When i'm designing the page in the designer with device 4.7 WXGA i have much space to the bottom but on my real phone (Motorola Moto G3) there is no space.

Now i worry about what happens if i deploy the app on different phones (Samsung, etc). I always thought the advantage of creating a UI with something like AXML makes the app "responsive" in a meaning that it fits to the device which it is running on. But why is this not happening?

May someone give me a hint how to archieve this?

Edit:
Here is my AXML Code - for here i replaced the real text with Text

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout1"
android:layout_marginTop="5dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout2"
android:layout_margin="5dp"
android:gravity="center">
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/linearLayout6">
<ImageView
android:layout_width="32dp"
android:layout_height="40dp"
android:id="@+id/imgLeft"
android:src="@drawable/arrow_left"
android:layout_marginRight="50dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/linearLayout5"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/tbDin"
android:textSize="35dp"
android:layout_marginRight="15dp"
android:textColor="@android:color/black" />
<TextView
android:layout_width="60dp"
android:layout_height="match_parent"
android:id="@+id/tbDinWert"
android:textSize="35dp"
android:textColor="@android:color/black"
android:gravity="center"
android:text="XX" />
<ImageView
android:layout_width="32dp"
android:layout_height="40dp"
android:id="@+id/imgRight"
android:src="@drawable/arrow_right"
android:layout_marginLeft="50dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linearLayout3"
android:background="@android:color/transparent"
android:layout_marginTop="5dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb1"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:inputType="none"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb2"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:inputType="none"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb3"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:inputType="none"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb3"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:inputType="none"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb4"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:inputType="none"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb5"
android:textSize="16dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb6"
android:textSize="10dp"
android:layout_marginRight="142dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/linearLayout4"
android:layout_margin="5dp"
android:background="@android:color/transparent"
android:paddingLeft="15dp">
<TextView
android:layout_width="90dp"
android:layout_height="match_parent"
android:id="@+id/tb7"
android:textSize="10dp"
android:textColor="@android:color/black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="142dp"
android:gravity="center" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/TextView4"
android:textSize="35dp"
android:background="@android:color/transparent"
android:textColor="@android:color/black"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Answer

Ok, so first you cannot use same ids for views like linearLayout4. Second, correct practise is best practise so insted of creating so many layouts, create header and ListView and then populate it. Weather you have 3 item or 333 use ListView.

Next thing dont use android:layout_marginRight="142dp" like this. Margin and padding should be much smaller and for acheaving efect of streaching items use something like this:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/linearLayout4"
    android:layout_margin="5dp"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="16dp"
        android:textColor="@android:color/black"
        android:text="Value"
        android:layout_weight="0.5"
        android:gravity="center"/>
    <TextView
        android:text="Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="35dp"
        android:textColor="@android:color/black"
        android:layout_weight="0.5"
        android:gravity="center"/>
</LinearLayout>

You can paste it to see the result.

Try to practise design in program that u are creating your app. If you are using AndroidStudio it has preview so you can check diferent size of screens.

And for any layout or view if you set android:layout_width="match_parent" android:layout_height="match_parent" it will always fit to the device.

Try creating layouts and view, with different background, while changing height and width so you can see what is happening.