How to set the image in button in android

Issue

I have always this problem while working in android , and that is setting the image in the button. I have an image which I want to set in the button so I have multiple resolution of this button image for different buckets so to support multiple screen sizes .

Following is my image , having resolution of 85*85

now when I want to set it in the button i got the image screw slightly. It seems like image in width is larger then the image in height where as it is not in reality. let me share you the picture after setting the image in the button. this screen short is of the android samsung galaxy s4 device which is xxhd device

Now you can easily see how bad it is looking .

this is how I am setting it in the xml

<Button
            android:id="@+id/btn_flip_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/flip_image"
            />

but when I set this image in the Imageview every thing looks great as expected. so the problem is not in the image nor in the xml but the way in using the Button . So can any one tell me what is the best way of using the image in button or in Imagebutton .

Please tell me why its happen all the time when I try to set image in button , whereas in the end when I use the imageview I always get my desired results.

(How ever using Imageview make me loose the touch effect that the button has naturally and by default.)

**Edit1 ** here is my part of xml where I am using buttons

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|top"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:background="@drawable/menu_bg"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:gravity="center"
        >

        <Button
            android:id="@+id/btn_flip_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/flip_image"

            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="5dp"
            />

        <Button
            android:id="@+id/btn_flip_suit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/flip_suit" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="5dp"
            />

        <Button
            android:id="@+id/btn_change_suit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/change_suit" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="5dp"
            />

        <Button
            android:id="@+id/btn_share"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_height="wrap_content"

            android:background="@drawable/share_btn" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="5dp"
           />

        <Button
            android:id="@+id/btn_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"

            android:background="@drawable/save_image"

            />
    </LinearLayout>

So Any one please make me understand What i am doing wrong or what the best way of using Button with the custom image. ??

Solution

I have tested your code, there is no problem in it...

As your image width problem, it is due to Screen Resolution on different devices, for that you can put your Linear Layout in ScrollView

your code output before scrollview :

<ScrollView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left|top"
    android:orientation="vertical"
    android:gravity="center">
    <Button
        android:id="@+id/btn_flip_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/flip"> 
   </LinearLayout>
</ScrollView>

your output after scrollview :

Answered By - Iamat8