title: Why is my floating action button not displaying its image properly?
body: <p><a href="http://i.stack.imgur.com/w3uGs.png" rel="noreferrer">This is what my floating action button is showing</a></p>
  
  <p>rather that just showing the actual circle part of the image, it tries to fit the background of my .png file into the floating action button.</p>
  
  <p>here is my xml code:</p>
  
  <pre><code>&lt;android.support.design.widget.FloatingActionButton
      android:id="@+id/addToKitchenButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="16dp"
      android:layout_gravity="bottom|end"
      android:layout_alignParentBottom="true"
      android:layout_alignParentEnd="true"
      android:src="@drawable/fab_icon"
      /&gt;
  </code></pre>
  
  <p><a href="https://lh6.ggpht.com/_KamEKPaB68jAwDVn1JZ5fJ7zmqV6nBygKAxY-lqRhW4q6pQ9iwL7v3Cu0aF9tBQCQsn=h900" rel="noreferrer">how do I get it to look like this?</a></p>
  
  <p>I've given my .png file a transparent background already, so I don't know what else  I need to do. Please Help.</p>
  
  <p>Thank You.</p>