EDIT:
After doing a method trace, whenever I switch with the purple square, the graph rises a lot. When I switch with a blue or green circle, it stays low:
Here are the methods of the swap with the purple square:
I have an app which swaps two buttons. There is one red button, when it gets clicked, it picks a random button from the other three, and swaps.
I tried doing this one way by just swapping images. In the onClickListener, I only listened for clicks with buttons with the red button.
Get random image
Make it blank
Look for red button
Give red button background that random image had (swap)
Give random image (which is blank now) red background
If this is confusing...leave it. But:
Whenever I switch images from a larger image to a smaller image, the process takes a much longer time. It is much faster when swapping between two smaller images. How do I fix this. Is there a certain image size which is optimal for android?
Here is the layout code:
https://gist.github.com/anonymous/813883bce89606d2a82e
As you can see in the image, it takes a much (MUCH!) shorter time swapping background images with the blue circle than the purple square. Why...?
Why is the way (where I just change the images and check for a button with a red image) slower based on the image sizes? What image size should I use?
Thanks so much for your time
My first guess would be that you have some big PNGs that take a long time to load.
But, we have nice tools to help us actually find out -- so we don't have to guess!
Do a method trace (available in the CPU tab in Android Studio, or the DDMS view in Eclipse+ADT) while doing the switch, and you should see what is taking time.
I dont have the exact answer for your question but just 2 recommendations:
1) Make sure you scale the image first before drawing.
2) Using RelativeLayout causes your ViewGroup to measure your children twice instead of one. So Make sure that you dont do any that trigger re-layout on click events
3) I would suggest that you put these View in a GridView or GridLayout and then when you need to swap your views, just swap the positions of your view in an data (Array, for example), and call notifyDataSetChanged();
Hope this help
Apparently, the image size can affect the speed. So, what I did was re size my image. I did this in photo shop, but you can do it in paint or you can do it in an image-re sizer website. Just search that up in google, and enter the dimentions 56 x 56. For some reason, those dimensions work best.
Here is one image resizer tool:
http://www.picresize.com/
On this website, just select your image from your computer, and then the next screen will say to resize it:
To do it in paint:
Although the bounty is over, I have just posted this to help people know how to do it. I STILL DON"T KNOW WHY THE IMAGE SIZE MATTERS I would really appreciate it if someone explained why I must fix the image size, although I know how.
Thanks,
NullPointerException
Related
I'm not sure if this is possible, or If I am approaching this challenge wrong. I am making a 2D Platformer, so when you hit the edge of the screen(Width), a new portion of the map would appear. Currently, I made single Images for each Portion of the map. Problem is, on larger devices, this would leave a lot of blank screen, and the Image would only fit a specific device.
Now I am wondering, can I make my ImageView (MAP) at a negative X value then when the character hits the edge, the map would move right (X would go higher).
I am using XML (Java is also fine), and I have NO CLUE how to approach this.
Since you are using constraint layout, you need to set android:layout_width="0dip".
This will fit any image to its screen width.(Image width should be greater than screen horizontal width).
Apply some conditions something like,
If image width < screen width then call next image to remaining screen, else call next image for entire screen.
Hope it helps for code-flow.
:)
You could use android:translationX or Android:translationY which actually support negative values. But in your particular case I think you are trying to use a nail clipper to cut your hair... You are using stuff that are not designed for that purpose. Using multiple big Image views can become a performance issue (I don't know about your particular case), I recommended you instead to be brave and make your own wiew and paint it dynamically (it can sound difficult but I'm sure will be easier than what you are trying), or make a comprehensive googling for a view meant for what you want.
Specifically for games you should try andengine lib or something like that, believe me... It would be easier in the end and you may earn something new :)
An alternative solution is to draw a layout (e.g. RelativeLayout) larger than your screen size, with an equal amount of padding on all sides.
For example, if you want to make a 50dp x 50dp ImageView appear from off the right hand side of the screen, your RelativeLayout would be 100dp taller and wider than your screen (50dp on each side). You could then position your ImageView at the far right of the RelativeLayout, and move it onto the visible area at will. So drawing something at -20dp, would actually be drawing it at 30dp in this example.
Programmatically getting the screen size and resizing a layout is very straightforward, and this approach would let you control your map loading in the manner you described.
I'm starting to learn Java and i came across an excersize where i need to fade away one image and display by fading in another image.
My solution to this excersize is to have one imageView and fading out the first image, then switching the image source to the second image and fading the imageView in so it should display the new image. Doing that so it will display all the images i want by fading out then in with a new image.
this is my code for the program:
public void fade(View view){
ImageView simpsonImageView = findViewById(R.id.simpsonsImageView);
simpsonImageView.animate().alpha(0f).setDuration(3000);
simpsonImageView.setImageResource(R.drawable.bart);
simpsonImageView.animate().alpha(1f).setDuration(3000);
simpsonImageView.animate().alpha(0f).setDuration(3000);
simpsonImageView.setImageResource(R.drawable.lisa);
simpsonImageView.animate().alpha(1f).setDuration(3000);
}
Now i have seen in the tutorial i'm learning from that the tutor used different imageView for each image. I wanted to know which solution is correct or at least acceptable amoung these two. Or it dosent really matter and that both solutions are fine.
There is one thing which you can only achieve when using two ImageViews: you can crossfade the two images so that the screen is never entirely empty.
In the context of your exercise however, you only want to exchange images sequentially.
From a performance point of view, one ImageView may be better than two because it will obviously take less memory and CPU time but I doubt that this will have a noticeable impact on modern devices.
So as long as you don't animate lots of pictures simultaneously (think of football teams instead of the Simpsons), both solutions are fine.
Please note that with your code as-is there will be no animation visible at all and the ImageView will appear to only show the second picture. This is because animate() triggers an animation but it does not wait until the animation is finished. So you need to work with an AnimationListener or use Handler.postDelayed() to swap pictures and start the next animation only as soon as the previous one is finished.
I am working on a game using LibGDX, and right now, I am working on the menu screen. What I want to do, is have a small image, set a bounding box, and expand however large I need it. What I think would be optimal, would be to set 2 rectangles. One for width and one for height. If it needs to get bigger or smaller, it would take that rectangle, and duplicate it beside, or beneath the current one, depending if it is for the width or height. I believe there is a builtin class for this, but I cannot seem to find it.
You might want to take a look at NinePatch if I'm not misunderstanding your question. Link here: https://github.com/libgdx/libgdx/wiki/Ninepatches
Currently I seek a solution to simple situation, which appeares to become tricky. I need 7 togglebuttons in android app, which are a simple black circles, but I need them to be in the row and fill parent (screen) horizontally. As a resource I use big .jpeg image of a circle. To make them fill all screens in the same mode, I put them into LinearLayout with
#android:layout_width = "fill_parent";
#android:layout_height = "wrap_content";
#android:weight="70";
Weight is 70, so each button received 10. The problem is that source image is too big, which unfortunately results in...this:
(because I dont have enough reputation for posting images, here is the link
http://postimg.org/image/f8wvs5si1/ )
Sorry for small amount of code and this picture taken via phone, I do not have an internet access on the computer with eclipse and this project for some time. I tried of course to change layout_height on other possibilites, but it didnt work. I could put a weight sum also on the vertical position, but on different screens it wouldn't look same.
I also tried to change the height programmatically in onCreate method,
buttonX.setHeight(buttonX.getWidth());
or do the same with a layout, but nothing helped
Perhaps the question is dumm, but I would be glad to hear some ideas.
This is due to screen density variations. There are several things you can do to fix this:
Use different images for each density (but I'm assuming you're looking for another solution)
Use DisplayMetrics to get the actual width of the screen and then set width/height accordingly.
This code:
buttonX.setHeight(buttonX.getWidth());
probably doesn't work because you are calling it before the layout is drawn, and therefore the width is not the drawn width. You can fix this using ViewTreeObserver like here:
How can you tell when a layout has been drawn?
Use an XML attribute like scaleType="centerFit" Personally, I find these confusing because scaleType attributes don't always seem to behave the same way to me. You might have to try different ones, but sometimes they come in handy if you need an XML only solution.
This is my first post and i have (i think) a uncommon request...
I'm programming on the last Eclipse Mac, for every android SDK, and i'm using more XML for layout than runtime... So i search a solution in XML if possible.
Here is the situation: i work with an image background wich simulate item like buttons, image, text... etc. On this image, i put buttons, image, and text (buttonview textview etc...) and place it precisely on their places on the image. This solution is very powerful to have good design BUT, if i change the resolution of the screen, and/or its size, each item won't be at its place, and will be translated (horiz and/or vertic) for some "dp"... (and yes i use dp, not mm or px or whatever)
I'm really embarrased because i think thanks to "dp" it keep proportionnality but.. not !
My question is how can i fix my items at their places on the image background, for different screen size/resolution !!
Thanks in advance everyone,
My Best From Lyon,France
First realise that if you want to make it pixel perfect for all screen sizes your out of luck.
Second accept that you can't make it perfect for all screen sizes.
Third you can get far with creating different layout for different screen sizes. You can read a lot about supporting multiple screen sizes here. One important thing to take from here is that you can make layout for the different screen sizes or different density sizes.