Views are overlapping

Question

In my android application, I have a RelativeLayout which contains some Fragments. However, this layout does not scale to different screen sizes. Consider this screenshot when the screensize is 5.2" diagonally, 1080x1920 resolution 420dpi: (Desirable output)

When I change the phone to a 5.0", 1080x1920 resolution xxhdpi, I get this display:

As you can see the buttons on the two right-hand columns are overlapping, which is the problem I am asking about.

Here is the main activity XML file, which contains the various fragments

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:style="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="8dp">

    <!--This is the box appearing at the top of the layout-->
    <TextView
        android:id="@+id/window"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/window_border"
        android:fontFamily="monospace"
        android:minLines="1"
        android:text=""
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textIsSelectable="true"/>

    <!--This is the first row of buttons, there are 4 of them-->
    <fragment
        android:id="@+id/screenOps"
        android:name="net.magnistudio.deskcalculator.ScreenOps"
        android:layout_width="wrap_content"
        android:layout_alignEnd="@+id/digits"
        android:layout_height="wrap_content"
        android:layout_below="@+id/window"
        tools:layout="@layout/layout_screen_ops"/>

    <!--This is the 3x3 rectangle appearing directly below the screenOps
        frag -->
    <fragment
        android:id="@+id/digits"
        android:name="net.magnistudio.deskcalculator.Digits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        tools:layout="@layout/layout_digits"
        android:layout_alignBottom="@+id/basicOps"/>

    <!--This is the rightmost fragment-->
    <fragment
        android:id="@+id/basicOps"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="net.magnistudio.deskcalculator.BasicOps"
        tools:layout="@layout/layout_basic_ops"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/window"/>

    <!--Lower fragment, it is 6x4-->
    <fragment
        android:id="@+id/scientific"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="net.magnistudio.deskcalculator.Scientific"
        tools:layout="@layout/layout_scientific"
        android:layout_below="@+id/digits"/>
</RelativeLayout>

Each button has this style

<style name="calcBtnAppearance">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/calcBtn</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_width">0dp</item>
</style>

I think one solution would be to adjust programatically the sizes of the layouts based on the size of the current phone, but maybe that is just sweeping some other problem (of the layout itself) under the rug?

Also, each button is located within a LinearLayout, which is inside of the LinearLayout for the fragment. Consider this sample excerpt from a fragment layout file:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <Button
            android:id="@+id/dig7"
            style="@style/calcBtnAppearance"


            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text=""/>
        more buttons
    </LinearLayout>
<LinearLayout>

Answer 1

In the RelativeLayout the children are arranged according to their relative form to each other. As far as I remember, the RelativeLayout does not scale the contained elements if the resolution or the screen size changes.

Maybe you should take a look here: [ https://stackoverflow.com/a/21381065/6908102 ][1]

A possible solution:

To adjust the size of the buttons to the respective resolutions, create a separate "values" folder for each resolution. (See also picture 2 marked blue).

- Picture 2 -

Then create a new "dimens.xml" file in each of these folders.

As an example:

res/values/dimens.xml :

<resources>
<!-- ButtonSize -->
    <dimen name="dimenButtonHeight">15dp</dimen>
    <dimen name="dimenButtonWidth">25dp</dimen>
</resources>

res/values-xxhdpi/dimens.xml :

<resources>
<!-- ButtonSize -->
    <dimen name="dimenButtonHeight">10dp</dimen>
    <dimen name="dimenButtonWidth">20dp</dimen>
</resources>

Of course, you still have to adjust the size specifications to your layouts.

res/values/style.xml : In your Style.xml file you have to add the following lines:

<style name="calcBtnAppearance">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/calcBtn</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>

    <item name="android:layout_height">@dimen/dimenButtonHeight</item>
    <item name="android:layout_width">@dimen/dimenButtonWidth</item>
</style>

Maybe that will solve your problem. Otherwise, you can, as shown in Figure 2 well, synonymous for each Resolution create a separate "layout" folder. Then copy the files from the standard layout folder into the newly created folder and adjust them or you can also position the items in a different order. But is a little more work.