Home > Software engineering >  How to add a bottom margin to a parent bottom aligned button inside a relative layout?
How to add a bottom margin to a parent bottom aligned button inside a relative layout?

Time:12-02

I am using android studio to create an app currently but I am having issues placing a button in the bottom right of the screen. I opted to populate a relative layout with a few components and the android:layout_marginRight="<x>dp" has worked so far in enabling me to stop the views from touching the edges. An example of where I used it successfully looks like this (XML for a button that hovers in the top right):

<RelativeLayout blah>
    <com.google.android.material.button.MaterialButton
        android:id="someID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:align_parentEnd="true" 
        android:layout_marginEnd="20dp"
        android:layout_marginTop="20dp"
        and so on describing the button but no more geometric statements
    />
</RelativeLayout>

However, when I do the same for a button that I add the line android:layout_alignParentBottom and the line android:layout_marginBottom the bottom margin line is not effective and the button is glued to the bottom of the screen - here is the offender: XML of button next to android studio render.

Please can someone explain why this happens and how to fix it? I am trying to place a button in the bottom right with 20dp to its right and underneath it so it 'hovers' there.

Here is the rest of my XML as it is currently:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@ id/btn_add_review"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:paddingBottom="20dp"
        android:clickable="true"       
        app:backgroundTint="@color/themeColorOrange"
        app:srcCompat="@drawable/ic_baseline_add_24" />
    
</RelativeLayout>

CodePudding user response:

You can simply put a RelativeLayout around your FloatingActionButton and give it a padding of 20dp like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:paddingBottom="20dp"
        android:layout_height="wrap_content">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@ id/btn_add_review"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginEnd="20dp"
            android:clickable="true"
            app:backgroundTint="@color/themeColorOrange"
            app:srcCompat="@drawable/ic_baseline_add_24" />
    </RelativeLayout>
</RelativeLayout>

Unluckily marginBottom doesn't work combined with alignParentBottom.

  • Related