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>
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!
