Unexpected margins in RelativeLayout showing up only on device

Question

I am facing a very unusual situation. I have defined a layout file with some icons arranged in a RelativeLayout and aligned vertically. The thing is that I did not set any margin between them and on the preview screen and on the emulator they appear as expected, but on the device they are always separated by a consistent margin.

My question is: why are those margins showing up? How can I remove them?

Here you can see the difference between the result on emulator (API 26) and physical device (API 19).

Speaking about code, here below there is my layout XML file.

<com.example.rusia.madcall.design.CustomSlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.rusia.madcall.MapsActivity"
android:id="@+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- PLEASE DO NOT CHANGE CHILDREN ORDER -->

<!-- CONTENT 1 (on the left): The Master Pane -->
<FrameLayout
    android:id="@+id/master_pane"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<!-- CONTENT 2 (on the right): The main view -->
<com.flipboard.bottomsheet.BottomSheetLayout
    android:id="@+id/bottomsheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Map -->
        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Icons on the left-top -->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <!-- Menu Icon -->
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start|top"
                android:layout_margin="5dp"
                android:src="@drawable/ic_menu_white_24dp"
                android:visibility="visible"
                app:backgroundTint="@color/colorPrimary" />

            <!-- Icons & Descriptions -->
            <RelativeLayout
                android:id="@+id/left_icons"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_below="@id/fab_menu"
                android:visibility="visible"
                android:layout_marginLeft="5dp">

                <!-- 1st icon: NEAR ME -->
                <RelativeLayout
                    android:id="@+id/near_me_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_near_me_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="21dp"
                        android:layout_marginStart="21dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal"
                        android:text="@string/near_me"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_near_me"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_near_me_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

                <!-- 2nd icon: ADVANCED SEARCH -->
                <RelativeLayout
                    android:id="@+id/advanced_search_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/near_me_box"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_search_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="22dp"
                        android:layout_marginStart="22dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal|center"
                        android:text="@string/advanced_search"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_search"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_search_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

                <!-- 3rd icon: SETTINGS -->
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/advanced_search_box"
                    android:layout_marginTop="0dp">

                    <TextView
                        android:id="@+id/fab_settings_description"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="22dp"
                        android:layout_marginStart="22dp"
                        android:background="@drawable/bg_description_left_icon"
                        android:gravity="center_vertical|center_horizontal|center"
                        android:text="@string/settings"
                        android:textColor="@color/white"
                        android:textSize="18sp"
                        android:visibility="gone" />

                    <android.support.design.widget.FloatingActionButton
                        android:id="@+id/fab_settings"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="start|top"
                        android:src="@drawable/ic_settings_white_24dp"
                        android:visibility="visible"
                        app:backgroundTint="@color/colorPrimary" />

                </RelativeLayout>

            </RelativeLayout>

        </RelativeLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|top"
            android:layout_margin="5dp"
            android:src="@drawable/ic_my_location_white_24dp"
            android:visibility="visible"
            app:backgroundTint="@color/colorPrimary" />

    </FrameLayout>

</com.flipboard.bottomsheet.BottomSheetLayout>

this may be because your preview screen is with lower dpi and the emulator is with higher dpi. — Pankaj Mundra, Nov 25 '17 at 09:58
they have different screen sizes, so the margins have different real sizes too. — Mykhailo Voloshyn, Nov 25 '17 at 10:13
@PankajMundra my preview screen and my emulator do match, the thing that does not match is the physical device. — rusiano, Nov 25 '17 at 10:19
@MykhailoVoloshyn I explicitly set android:layout_margintTop to 0dp. — rusiano, Nov 25 '17 at 10:21
[Use layout inspector](https://i.stack.imgur.com/rcwk6.png) and see what is going wrong. — azizbekian, Nov 25 '17 at 10:44

score 1 · Accepted Answer · answered Nov 25 '17 at 16:47

Thanks to @azizbekian suggestion I got to the true issue and I solved it. I am sharing my findings and my solution.

First of all I noticed in the Layout Inspector that the FloatingActionButton(s) had mPaddingTop, mPaddingBottom, etc. all set to 42dp. I investigated about FloatingActionButton(s) padding and indeed I found a well-known issue (discussed already here in StackOverflow). The problem is then related to FloatingActionButton and not to RelativeLayout. More specifically, on older versions of Android, these buttons come with a default all-around padding.

By combining the answers, I solved the issue by adding the following properties to all my FloatingButton(s):

app:useCompatPadding="true"
app:elevation="0dp"
app:pressedTranslationZ="0dp"

This has the effect to remove the built-in padding and get the simple icon. You can then add your custom padding or margin with the common properties android:layout_margin or android:padding.

Here an example of the final result with a padding of 10dp between the buttons.

Hope it helps!

score -1 · Answer 2 · answered Nov 25 '17 at 10:19

You need to develop different XML for different screen sizes.

To check your device dpi you can download this app.

To create different layouts create a folder in resource and name it as layout-sw320dp

change sw320dp to sw600dp, sw700dp, according to your screen dpi.

Different devices will automatically take the accurate layout XML according to device dpi.

For reference check this

I hope this information will be useful to you.

Unexpected margins in RelativeLayout showing up only on device

2 Answers2