1

So I have a PNG as shown below. The white inner in the image is transparent.

My problem is that this image isn't really scalable for different size screens on Android devices.

I would like to know how I can do this either in code or preferably, xml. Basically I am looking for a grey square with a transparent circle inset.

Also, there is a nice effect on the inner border of the grey, is this possible in code?

I know how to do the inverse (bitmap with rounded corners) but how would I do this? Any ideas appreciated, thanks.

container

Edit:

So, the only thing I have tried is android:scaleType="centerCrop"

jim
  • 8,670
  • 15
  • 78
  • 149
  • pls share some code what you did and results. coz question looks easly doable, I might misunderstand something. in xml-side match parent auto scale the png for different screens. – Mert Dec 11 '12 at 10:45
  • Hi, can you please elaborate on match parent auto scale. Thanks. – jim Dec 11 '12 at 11:01
  • Assuming that you need to have mask over your image, may be you looking for http://stackoverflow.com/questions/12614542/maskingcrop-image-in-frame – Mohammed Azharuddin Shaikh Dec 11 '12 at 12:01

2 Answers2

0
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter" 
            android:scaleX="0.7"/>
    </LinearLayout>

Can you try this one.

Mert
  • 6,432
  • 6
  • 32
  • 68
  • Ok, it looks like this is a false representation in the docs, as it's explained here scaleX/scaleY are properties added to the View class with Honeycomb and therefore unfortunately not available in Froyo. – Mert Dec 11 '12 at 12:45
  • You need to change your API Level or going to do manuel scaling. – Mert Dec 11 '12 at 12:51
-1

It's not clear from your question why the image is not scaling properly for different screen sizes.

Using NinePatch PNG format you have full control how the image scales. For example, this enables you to force that only the image gray areas are extended, keeping the circle format, if that is your problem.

The documentation can be found here: Draw 9-patch

Regards.

Luis
  • 11,978
  • 3
  • 27
  • 35
  • If the question isn't clear to you, better to ask in comment area instead posting an answer of assumed question. – Mohammed Azharuddin Shaikh Dec 11 '12 at 10:54
  • @hotveryspicy The question is clear (i.e. what he want´s to do), what's not clear is why. I didn't assume nothing for the answer. Only for the example I gave, a fairly assumption as been made. I went trough a couple of your questions, and seems that you make assumptions without even udestanding that you are making them ... The worst kind of fool is the one that doesn't know it :-) – Luis Dec 11 '12 at 11:17
  • its not hard feeling or something, `I said what I felt` and moreover FYI I dint downvoted. Don't take it personally Man :) – Mohammed Azharuddin Shaikh Dec 11 '12 at 11:57
  • Hi Luis, this answer seems nearly correct. I can use 9 patch to stretch out the gray parts to fill. But, how can I get the white circle to scale up also? Thanks. – jim Dec 11 '12 at 12:43
  • You cant have both, fill the screen and keep aspect ratio. As I said you need to be more specific on exactly is your issue and what you want to achive. In general, you should be able to get a fairly good result by ceating a separate images for different screen sizes (i.e. small, normal, large, etc.) and/or densities (ldpi, mdpi, hdpi) with the aproximate final circle size. Then the `NinePatch` will be used to extend only the grey areas to fit exactly the screen. – Luis Dec 11 '12 at 13:53