How it works that XML show all on display?

Question

How it works, that android show me all boxes on display, whatever I have a 4" Display or a 7" Display? It's okay, that android show the boxes a little bit smalls, but I must have all the boxes on display.

<?xml version="1.0" encoding="UTF-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1"
    android:background="@drawable/box_ressourcen">


        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:background="@drawable/box"
            android:id="@+id/box1"
            android:showDividers="beginning"
            android:layout_gravity="top"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="false"
            android:layout_below="@+id/imageView"
            android:layout_marginTop="-20dp"
            android:layout_alignParentEnd="false"
            android:gravity="center">

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/myimage1"
            android:src="@drawable/inventar"/>

    </LinearLayout>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentStart="false"
        android:src="@drawable/inventar_ressourcen"
        android:layout_marginTop="-25dp" />

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/box"
        android:id="@+id/box2"
        android:showDividers="beginning"
        android:layout_gravity="top"
        android:layout_alignTop="@+id/box1"
        android:layout_toEndOf="@+id/box1"
        android:gravity="center">

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/imageView2"
            android:src="@drawable/inventar" />
    </LinearLayout>

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/box"
        android:id="@+id/box3"
        android:showDividers="beginning"
        android:layout_gravity="top"
        android:layout_alignTop="@+id/box2"
        android:layout_toEndOf="@+id/box2"
        android:gravity="center">

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/imageView3"
            android:src="@drawable/inventar" />
    </LinearLayout>

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/box"
        android:id="@+id/box4"
        android:showDividers="beginning"
        android:layout_gravity="top"
        android:gravity="center"
        android:layout_alignTop="@+id/box3"
        android:layout_toEndOf="@+id/box3">

        <ImageView
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@+id/imageView4"
            android:src="@drawable/inventar" />
    </LinearLayout>

</RelativeLayout>

And how I can change it, that the boxes was show in a line and break on the end of the line and go to the next line?

Example:

MyBoxes:
B1 B2 B3 B4 B5 B6 B7 B8 B9 B10

Display:
B1 B2 B3 B4
B5 B6 B7 B8
B9 B10

Answer 1

For each size you should make a different layout, in order to do that you create another layout with the same name that the one you already have but you add a qualifier like this :

You click on size and choose the one you want. Do this for each size (sall, normal, large, X-Large) and it should be ok.

Answer 2

It depends with the sizes of your Views.

Its up to you to decide that you are going to show everything in the screen size or you let it to scroll in the screen.

You can divide your screen using XML , code or using both.

If you want you can go for flexed sizes (width / height) or wrap it and when you wrap it ,it will take the height of its child/children or you can separate layouts with a ratio again using XML ,code or both.

read about weight_sum and layout_weight also how to give sizes to layouts based on the screen size

What is android:weightSum in android, and how does it work?

https://developer.android.com/training/multiscreen/screensizes.html

https://developer.android.com/guide/practices/screens_support.html

https://developer.android.com/training/multiscreen/screendensities.html

easiest one for you at this stage will be this https://stackoverflow.com/a/12302811/5188159

also read about how to set sizes based on screen size which will display your XML in the same way in any screen

simple math - allocate my layout height 10% from the screen so the size will keep the ratio in any kind of a screen

as a code snippet this will give you the screen size height and width for the latest visions of android

 DisplayMetrics displaymetrics = new DisplayMetrics();
     this.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        int height = displaymetrics.heightPixels;
        int width = displaymetrics.widthPixels;

now you can set a size problematically using the ratios To learn it you can search ;) i'm not telling you that :) and good luck!

Answer 3

From the way you speak it is clear that you miss the theorical part.

Basically you have to do different layout for the major configurations you could need, in your case one basic one like you did it and then if I well understand one for smaller screens, in your case 4 inches. To understand how you should name them i would warmly recommend you to go trought he documentation for inches is considered a normal screen that are at least 470dp x 320dp

In particular I suggest you this passage, where is explained also why is not best practice to call the four inches screen as normal

Provide different layouts for different screen sizes

By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes. For example, on a larger screen, you might want to adjust the position and size of some elements to take advantage of the additional screen space, or on a smaller screen, you might need to adjust sizes so that everything can fit on the screen.

The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra-large screen should go in layout-xlarge/.

Beginning with Android 3.2 (API level 13), the above size groups are deprecated and you should instead use the swdp configuration qualifier to define the smallest available width required by your layout resources. For example, if your multi-pane tablet layout requires at least 600dp of screen width, you should place it in layout-sw600dp/. Using the new techniques for declaring layout resources is discussed further in the section about Declaring Tablet Layouts for Android 3.2.

This is a basic skill every Android developer should know, so I would highly recommend you to learn how it works.