So I have this canvas on where I paint bitmaps
An example would be a bitmap as a background.. so I will make this full screen on my 533x320 dip Samsung S2
So, when I load this same app on a, lets say, HTC with 480x320 dip.. my background image will now be larger then the screen - how is this normally handled?
I know some would might answer that I can just check the DIP sizes and use that.. which would also work for this background image.. but what about the 10 chess pieces I have where one of them is not out of the screen because it extends the 480dp of the HTC but works great on my 533dp S2?
How is this normally handled?
There are lot of ways to do that. Make sure you always use fill_parent or wrap_Content for your width and height attributes. In case of percentage based width's use LinearLayout for your layouts and use Layout_weight attribute for giving the width or height.
Remember to give width or height as 0dp if you are using layout weight attribute.
The way I did it is to make a drawable for the background /drawable/backrepeat.xml that repeats an image (metalgrid.jpg) in both directions.
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/metalgrid"
android:tileMode="repeat"
android:dither="true" />
Then I have a style
<style name="page_background_gen">
<item name="android:background">#drawable/backrepeat</item>
</style>
And then I use that style in my layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1"
style="#style/page_background_gen"
android:layout_width="fill_parent">
....
</RelativeLayout>
This will fill the background with a repeated image without messign with the scale of the image.
Related
So in my App, when the keyboard appears, the whole layout is resized to fit above it, which is exactly what I want except for the background image, I want it to stay the same size.
After some research, I saw a solution was to set the background programmatically (not using an ImageView in the XML):
getWindow().setBackgroundDrawableResource(R.drawable.background);
Which works to some extent, as it dosn't get resized when the keyboard appears, but the image is stretched to fit the screen's ratio. I found another solution to combine using xml resources:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat">
</bitmap>
Using this, the drawable stays the right ratio but isn't scaled down to the size of the screen (tried using the gravity attribute but it didn't do anything).
You don't have control over scaling with a background drawable. What you could do is put an image view over the root layout taking the entire size. Then you can use the scale options of the ImageView to scale it as you would any other image (probably FITX in this case, since you don't want it to scale with a change in Y). Just make the ImageView the first view inside the parent so it takes the bottom of the z order.
Good day, I am a little confused and sorry if it is dublicated, but I cant find correct answer. My task is to create widget (RadioButton, RatingBar) with custom drawables + make them high quality and not blur.
Here comes my problems and what I have tried. So, for example, I have custom drawable for radio buttons:
radioButtonArray[i].setButtonDrawable(R.drawable.radio_button_selector);
radio_button_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rb_unchecked" android:state_checked="false"/>
<item android:drawable="#drawable/rb_checked" android:state_checked="true"/>
</selector>
Now the problem is in quality of drawables. If I will add rb_unchecked.png and rb_checked.png in different folders (hdpi,mdpi,xhdpi...) with different px size, then my radio buttons will be enourmous big on some phone screens. Ok, next thing that I tried was to set programmatically width and height of my radio buttons, but found that it is hard and unefficient (for example, I have the same situation with RatingBar and I cant find how to set custom width and height of items in it). Another solution that I tried is to add rb_unchecked.png and rb_checked.png only to drawable folder with size of 18px*18px and, on the one hand it solved the problem, size is correct, but the radio buttons now are low resolution and kind of blur.
My quastion is what I am doing wrong? I expected that on devices with different dp android will take specific image in hdpi/xhdpi folder and scale it to specific size, but instead of this images from specific folders just wrap_content | crop in my custom widget?
I found the reason why my radiobutton drawable was enourmous big, I used following layout:
<RadioButton
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="30dp"
android:layout_height="30dp"
android:button="#drawable/radio_button_selector"/>
The right aproach:
<RadioButton
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/radio_button_selector"
android:button="#android:color/transparent"/>
I have a PNG file which is a one-pixel-wide, 283-pixel-tall gradient image, which I need to stretch across the background of an ImageView, stretching only horizontally. I attempted to set the asset as a background to an ImageView like this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient_tile"
android:layout_gravity="bottom|center"
android:scaleType="matrix"/>
but that just creates a one-pixel line in the middle of the parent view.
Is there a way to do this, or do I need to request a wider image, and use a 9-patch?
Thanks in advance.
UPDATE:
I ended up having to set minimum height properties in the XML as follows:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="119dp"
android:background="#drawable/gradient_tile_drawable"
android:id="#+id/tiledGradientBackground"
android:layout_gravity="bottom|center"
android:scaleType="matrix"/>
...and then set minimumWidth to the width of the parent view in code. Not sure why this solved it, but it did...
int width = holder.container.getResolvedWidth();
holder.tiledGradientBackground.setMinimumWidth(width);
Try this (tiling instead of stretching):
Put in your drawable folder a file called bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_1px_wide_image"
android:tileMode="repeat"
/>
and set it as your layout background
android:background="#drawable/bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
I tested it and it works fine.
This image
is giving this result.
Note that I put some extra padding - this screen is 320*480 wide, so the gradient is approx 1/3rd the total screen height (including title and status bars + the extra padding)
scaletype effects the src image of ImageView and not the background, if the image view is used only for background set the image as src and used fitXY scaletype.
You should create a drawable like Klaus66 & CommonsWare suggested and set it as a background.
Actually if you have a 1px gradient you probably can just create a GradientDrawable xml, will look better across different devices.
http://developer.android.com/reference/android/graphics/drawable/GradientDrawable.html
You shouldn't use an extra ImageView just set it as the background of your top layout or even the background of your theme, see my answer here: Android SplashScreen
I have a ViewPager with a graphic in between:
mPager.setPageMarginDrawable(R.drawable.margin);
I have set the image to repeat in y direction.
margin:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/image"
android:tileMode="repeat"
android:dither="true" />
The problem is that it does not align to margin space. It seems that its repeated independently of the size of the ViewPager. On one device I mangaged to get the size that it fits into because its a multiple of the screen width in landscape and portraint, but on other devices it wont work.
Is there a solution for my problem?
thanks
okay solved it my own.
I scale the margin drawable programatically so that the display width is a multiple of it.
not beautiful, but working. better solutins are welcome.
I have a RelativeLayout which currently has a fixed size. Widths, heights, margins, font heights of child views are specified so everything looks just right.
I now want to scale the layout (to fit screen size). The layout should scale as if it was a flat image, so everything gets smaller in proportion (fonts, margins etc.)
I made a simplified example, below. Scaled to 0.5, this would display the text "ONE QUARTER" with margin left 200dip and margin top 120dip.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="1600dip"
android:layout_height="960dip"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:text="ONE QUARTER"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="400dip"
android:layout_marginTop="240dip"
></TextView>
</RelativeLayout>
Of course, I'm not asking anyone to help me hand code an algorithm to scale all these values: just wondering if there's some simple way to achieve this...
Thanks!
If you just want your app to look ok on another device then specifying things in dip and sp should do the trick.
If you actually want to shrink or expand the scale of your app on the same device then you would have to do it manually, perhaps using themes or styles.