Add image in imageButton

Question

I trying to make a circular image button like WhatsApp.

I tried the below code, but I am only able to create a circular imageButton. The image did not show in the imageButton.

 <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="70dp"
        android:paddingBottom="140dp"
        android:src = "@drawable/camera"
        android:scaleType="fitXY"
        android:layout_height="70dp"
        android:background="@drawable/round"
        android:layout_gravity="center_horizontal" />

round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="100dp" />

    <stroke
        android:width="5dp"
        android:color="#090" />

</shape>

Answer 1

You added android:paddingBottom=140dp. Issue with that. Check this

<ImageButton
        android:id="@+id/imageButton"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/round"
        android:tint="@android:color/black"
        android:scaleType="fitXY"
        android:padding="5dp"
        android:src="@drawable/camera" />

Answer 2

You just missed solid tag in your custom shape file.

<solid android:color="#090" /> 

Edit:

Never try to give margin or padding which has a larger value. Just like you are using android:paddingBottom="140dp". This is not a recommended way.

Answer 3

For drawing a solid circle, try the code below:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#090"/>

    <size
        android:width="100dp"
        android:height="100dp"/>
</shape>

Shape type oval is used for drawing circles.

Answer 4

WhatsApp used a floating action button, and you can implement it in two steps.

Add a dependency to your build.gradle file:

dependencies {
    compile 'com.github.clans:fab:1.6.4'
}

Add com.github.clans.fab.FloatingActionButton to your layout XML file.

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:src="@drawable/ic_message"
    fab:fab_colorNormal="@color/app_primary"
    fab:fab_colorPressed="@color/app_primary_pressed"
    fab:fab_colorRipple="@color/app_ripple"/>

Download image of camera by clicking here.

And you are done.

Answer 5

Try this

<ImageButton
        android:id="@+id/imageButton"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/round"
        android:scaleType="centerInside"
        android:src="@mipmap/ic_launcher" />

Answer 6

Use a shape and fill with your desire color.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="100dp" />
    <solid android:color="#090" />  // solid for filling empty space

</shape>

Use code in ImageButton

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="70dp"
    android:paddingBottom="140dp"
    android:src = "@drawable/camera"
    android:scaleType="fitXY"
    android:layout_height="70dp"
    android:background="@drawable/round"
    android:layout_gravity="center_horizontal" />

Answer 7

Add Solid Tag

<solid android:color="#090" /> 

and replace android:paddingBottom="140dp" with android:padding="whateversuitsyou"

Answer 8

Set width and height as below.

android:layout_width="match_parent"
android:layout_height="wrap_content"

This works for me. Try this...