XML : How to properly position elements in Android FrameLayout?

I am trying to overlay an ImageButton on top of a fragment of a GoogleMap. I have also tried to use the following StackOverflow post for reference, with no luck. In order to do this, this is my xml:

  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context=".MapActivity" >        <fragment xmlns:android="http://schemas.android.com/apk/res/android"          xmlns:map="http://schemas.android.com/apk/res-auto"          xmlns:tools="http://schemas.android.com/tools"          android:id="@+id/map"          android:name="com.google.android.gms.maps.SupportMapFragment"          android:layout_height="fill_parent"          android:layout_width="fill_parent"          tools:context="com.example.beckah.myapplication.Citisplore"/>        <ImageButton          android:id="@+id/imageButton1"          android:background="@drawable/transit_icon"          android:layout_width="55dp"          android:layout_height="55dp"          android:scaleType="fitCenter"          android:layout_gravity="right|bottom" />    </FrameLayout>    

Which produces this view:

My goal is to position the ImageButton so it looks something like this:

I'm also pretty certain that hard-coding the height/width of an image is not best practice.

How can I position the ImageButton more precisely?