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.
Edit:
So, the only thing I have tried is android:scaleType="centerCrop"
<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.
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.
Related
I have got a very tiny image:
(image made on gimp, it would be invisible if I pasted it here)
It's 5x5px in size and it has some pixels with 100% transparency and others with 80%.
I'm trying to use it as a background for an ImageView. I want to scale it to higher dimensions. However, when I do that, the overall effect becomes blurry and not what I truly want.
XML Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<ImageView
android:layout_width="500dp"
android:layout_height="500dp"
android:background="#drawable/boxes"/>
</RelativeLayout>
Unwanted result
Question
How do I make it look good? That is, with sharp corner squares.
Investigate using an SVG for the background - these should appear sharp at all sizes
At first, try to resize it MS paint. If this process fails, take a screenshot of that picture to get a more clear view and then resize it again.
I am designing an android app and I need to implement the following interface. I need a round border around this number. For the round border I am using an image with a circle with a gradient border. For the numbers I am using the textview. The problem that I have is that when I debug it, the numbers extremely sharp and clean but the circle is not that sharp. The borders look quite rough. I took a screenshot of it but on the phone the thing is much more evident. I also noticed this when I was using an image and a background. The picture in the background was much more clear than the image on the screen. How can I fix this.
This is the XML that I am using
<ImageView
android:layout_width="270dp"
android:layout_height="270dp"
android:id="#+id/imageView"
android:background="#drawable/b"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
Not sure about that image sharpness but you should consider on below points with your ImageView,
Setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio!
You should also use android:adjustViewBounds="true" to make the ImageView resize itself to fit the resealed image.
You can change the way it default scales images using the android:scaleType parameter, use android:scaleType="centerCrop" and see if it gets more clear.
I've been trying to create a frame around my imageview using a picture of a wooden frame. I turned the woodenframe picture into a 9patch and its still not wrapping around the imageview.
<RelativeLayout
android:id="#+id/ChosenPic"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="3"
android:orientation="vertical"
android:padding="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical|fill_horizontal"
android:scaleType="fitXY"
android:src="#drawable/woodenframe" >
</ImageView>
</RelativeLayout>
So this is the ninepatch and i want it to fit around a picture of my choosing no matter the size.
EDIT:
This is what i want.
You have two options. I recommended the first one.
First option:
Put each image view in a separate LinearLayout and apply the 9patch to the LinearLayout it self not the image view
Second option:
Use or set the background resource of the image view in Java to the 9patch resource or the background attr in xml to the 9 patch resource and the src to the image it self.
Note that it better to use a Layer-List and add a combination of two shapes or whatever rather than using a 9patch resource.
Reference:
https://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
The "nine-patch" frame image that you upload is not a proper nine-patch.
First, it is a jpg. The extension should be .9.png.
Second, the contents are not correct. Specifically:
You need to have a 1px transparent border around the entire image. I do not see that in your jpg, though that just be an artifact of exporting it as a jpg.
You need to define a stretchable region by drawing black pixels in that 1px border. I see no black pixels defining such a region in the uploaded image.
I highly recommend going back and reading the nine-patch documentation again, and trying the draw 9-patch tool for creating a proper nine-patch.
Your 9-Patch is not configured correctly.
It isn't enough to just rename your file. To get it working properly, you have to define certain areas that should be stretched to fit the dimensions of your view.
You can also define paddings for that 9-Patch to inset the content when applying the 9-Patch to your view.
There's a handy tool called "Draw 9-Patch" in the android SDK that helps you defining these areas:
http://developer.android.com/tools/help/draw9patch.html
To start it, simply run the
draw9patch.bat
located in
...\sdk\tools\
Hi I am stuck with an issue and need some expert suggestions. I have a custom circular progress par whose boundary rotates as an animating light in my splash screen
It looks like this:
The boundary light continuously rotates till splash screen is there.
Now my splash screen has a background image which has a circle drawing at upper half of image:
It looks like this:
Now my circular progress bar should fit on that background circle boundary. What ever i do, it fails for some phone screens (circle is misplaced).
How can i fit into background circle and it can work on all phones and tablets.
Please let me know if further clarification is needed.
This is how I have defined circular progressbar:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/my_splash_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/splashscreen" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="170dp"
android:layout_height="170dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:indeterminateDrawable="#drawable/my_progress_indeterminate"
android:visibility="visible"/>
</RelativeLayout>
I think you need to change the style attribute and set your android:layout_width="match_parent". The problem is you are setting the style to large which by default has its size pre-defined. Further in your width and height attribute you are trying to resize it. So this might be the problem.
Try out with the HoloCircular ProgressBar is a Custom View implementation for Android.
Checkout the HoloCircular ProgressBar which might help you.
Other Library that you can use are as below:
1) Progress Wheel
2) ProgressBar
3) Customize the Spinner
Thanks.
This link helped me resolve the issue to some extent as it now suppots majority of devices. Still I could get a general solution to the problem. But I can consider this as answer:
Application Skeleton to support multiple screen
I have a 9-patch background image for my layout and it works fine when the display resoluton is smaller then the image (800x480px). But when I test it on a device with a bigger resoluton, for example 1280x800px, than the layout is broken. Here are two pictures:
The normal and broken layout
The 9-patch image
Here is the relevant layout-code:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/chalkboard"
android:gravity="top|center"
android:orientation="vertical" >
All in all, the 9-patch doesn't work when the image scales up. But what's the reason and how can I handle it?
Best regards!
You are stretching the frame as well. Just don't stretch the frames on the side. This should do the work: