Photoshop Question posted in
The official user guide can be found here.

Why image changes when imported to eclipse? – Photoshop

First I should say that I’m completely new to android so maybe my question is very ordinary for you.

Problem : I’ve designed the following image (png-24 with transparent background) in the Photoshop
enter image description here

and added it to the res/drawable in my project to use it as the source of a ImageButton but it appears like this:
enter image description here

As you see the rounded shape has changed completely and a gray background is added to the image.
Please tell me how can I fix this? Is the way that I’ve used this image wrong or the image format or some thing else?

Edit: I just resized the image(simple png) as I’ve added to my post and suddenly a corner of the image appeared,isn’t it due to size or something like that?

enter image description here

This is the layout of the containing activity:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageButton
        android:id="@+id/showHistBtn"
        android:src="@drawable/showhistory" />

    <ImageButton
        android:id="@+id/findWordBtn"
        android:src="@drawable/find_aword" />

    <ImageButton
        android:id="@+id/insertNewWordBtn"
        android:layout_width="315dp"
        android:layout_height="200dp"
        android:src="@drawable/insertnewword" />

</LinearLayout>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I just added these to the ImageButton tag in the activity layout xml file and it fixed :)

    android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0dp"

    I found the answer completely by intuition but with trial and error found that none of the above statements should not get omitted (for future viewers).


  2. 0

    You can simply draw a 9-patch image with Photoshop drawing the shadows and put it into the drawable folders and set this in your ImageButton in xml:

    android:background="@drawable/your_9patch_image"

    I always do it by using Photoshop, it’s super simple. For more details see this: Draw 9-patch

    Login or Signup to reply.
  3. 0

    After our long discussion in comments, see what a 9 patch can do (it’s just to give you an idea of what you can really achive with just 1 image):

    By using this image (/res/drawable/my_btn.9.png):

    enter image description here

    I got this result

    enter image description here

    You’ll notice that the text isn’t well centered: it’s because I was in a hurry, and didn’t make it perfect (while resizing and black-bordering for 9 patch).
    And the starting image wasn’t high-quality.

    I used a 16sp font, probably you’ll use a 32sp or even a bigger one.

    Note: mind the extension: .9.png

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search