CODEWITHSUNDEEP
androidimagebuttonandroid-imagebutton
John
John

Reputation: 694

Add image in imageButton

I trying to make a circular image button like WhatsApp.

Enter image description here

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>

Enter image description here

Upvotes: 2

Views: 3883

Answers (8)

Hiren Gondaliya
Hiren Gondaliya

Reputation: 156

Set width and height as below. 

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

This works for me. Try this...

Upvotes: 0

Pankaj Lilan
Pankaj Lilan

Reputation: 4453

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.

Upvotes: 1

Sergei Bubenshchikov
Sergei Bubenshchikov

Reputation: 5361

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.

Upvotes: 1

Tulsi
Tulsi

Reputation: 719

Add Solid Tag

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

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

Upvotes: 1

W4R10CK
W4R10CK

Reputation: 5550

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

Upvotes: 1

Gulnaz Ghanchi
Gulnaz Ghanchi

Reputation: 485

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

Upvotes: 1

Ankita Shah
Ankita Shah

Reputation: 1904

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

Upvotes: 4

Piyush
Piyush

Reputation: 18933

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.

Upvotes: 1

Related Questions