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>

@John i you are try to add floating button try this http://stackoverflow.com/questions/27484126/adjust-icon-size-of-floating-action-button-fab?rq=1 — Adeel Javed, Jan 04 '17 at 06:26

score 4 · Accepted Answer · answered Jan 04 '17 at 06:15

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" />

score 1 · Answer 2 · answered Jan 04 '17 at 06:14

1

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.

answered Jan 04 '17 at 06:14

Piyush

18,895
5
32
63

After add a solid tag, whole image button turn green. I can't see the image – John Jan 04 '17 at 06:20

score 1 · Answer 3 · edited Jun 04 '19 at 15:48

1

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.

edited Jun 04 '19 at 15:48

Peter Mortensen

30,738
21
105
131

answered Jan 04 '17 at 06:14

Sergei Bubenshchikov

5,275
3
33
60

score 1 · Answer 4 · edited Jun 04 '19 at 15:49

1

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.

edited Jun 04 '19 at 15:49

Peter Mortensen

30,738
21
105
131

answered Jan 04 '17 at 06:17

Pankaj Lilan

4,245
1
29
48

I never tried using floating action button so far. Will let you know the result after try – John Jan 04 '17 at 06:28
1

@John if you try my solution then let me know that would it helped you! – Pankaj Lilan Jan 04 '17 at 10:30

score 1 · Answer 5 · answered Jan 04 '17 at 06:18

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" />

score 1 · Answer 6 · answered Jan 04 '17 at 06:20

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" />

score 1 · Answer 7 · answered Jan 04 '17 at 06:23

1

Add Solid Tag

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

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

answered Jan 04 '17 at 06:23

Tulsi

719
7
15

score 0 · Answer 8 · edited Jun 04 '19 at 15:50

0

Set width and height as below.

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

This works for me. Try this...

edited Jun 04 '19 at 15:50

Peter Mortensen

30,738
21
105
131

answered Jan 04 '17 at 06:39

Hiren Gondaliya

158
12

Add image in imageButton

8 Answers8