I have a general question about how to design dynamic UI elements in Android (with Java).
I would like to have a thermometer in my app that depending on some external information increases or decreases a red bar(shown below).
. How can i design something like this in Android?
I could for example just design the thermometer without the red bar as a jpeg with some drawing program and then somehow implement the red bar in Android as an object that can be changed programmatically whereas the 'rim' of the thermometer does not change.
The problem I see with this approach is that I believe it is extremely difficult to match the rim of the thermometer with the red bar for different screen sizes and resolutions. Do you have another suggestion on how I could do something like this? Is there maybe a library for this?
I'd appreciate every comment as I have no experience whatsoever generally with designing such dynamic UI objects.
Updated Answer:
I have created a demo project on Github here. This project has the Thermometer custom view in which the outer thermometer is drawn from an image file and the inside mercury view of the thermometer is drawn from the code. You can look over the project of user kofigyan I shared in my previous answer for other customizations.
Previous Answer:
I think what are you looking for is creating Custom Views in Android.
You can extend the Android View class and can create your Custom View. The View has a Canvas object on which you can draw the shape of a Thermo-meter and can build functionalities to change the state of your shape in your subclass itself. Moreover, with the Paint object, you can paint your drawn shape.
I found this project on Github by a user kofigyan.
For having a dynamic ui you can take two approaches.
Jetpack Compose(not being discussed since it's still in Beta)
LiveData and observer pattern
In LiveData and observer pattern. Give the temperature as a LiveData variable(in your ViewModel) and implement an Observer in your MainActivity which gets triggered automatically when the value of the temperature live data changes.
For getting the output graphic you can use a canvas and then draw on it and tie it to the temperature variable.
You could for example use the Canvas.drawRect function to create a short or long rectangle depending on the temperature. ( the part from the circle to the top of the thermometer can be the rectangle)
Related
Here is a scenario on which i done a lot of research on google but hopeless. the scenario is, i am going to develop a 2D game in which i want to use multiple backgrounds and i want to translate them as they are moving forward, it must look like one background is near and translating/moving fast and the other background is a bit far and translating/moving a little slow. the nearer background have almost full intensity and the farer background have a bit low intensity. you can say they have different transparency levels. the question is, how can i get this task done or is this possible to use multiple backgrounds.
any suggestion will be appreciated.
as an example, see the image of BADLAND game bellow.
I think as far as I got your question you want to put two or more images one over another. I mean if you are trying to overlap the multiple backgrounds and asking for it yes it can be done easily.
What you need to do is to use the FrameLayout. as
"FrameLayout represents a simple layout for the user interface of
Android applications. It is usually used for displaying single Views
at a specific area on the screen or overlapping its child views."
and then you can implements the animations on them and translate them You can find different types of translation over them.
Here is all about using the frame layout frameLayout1 framelayout2 and for animations and translation here are links. link , link2 , link3
I'm developing and Android application, but I have some doubts about the
feasibility of my project.
I have to implement a custom layout composed from a ImageView that show an image, in particular a VectorDrawable.
Overlapping the ImageView there is a SurfaceView that :
Capture every coordinates of the touches;
Draw a Bitmap (in a certain position) everytime I touch the screen.
The purpose is to show a background image and use it as a reference, each time the user touches the screen a marker on SurfaceView must be inserted, this technique allows to simulate the insertion of a marker on an image.
The question is:
There are other better method to do this?
I have implemented yet, the idea works, but I have some limitation about the SurfaView (for example I can't insert it in a ScrollView).
And at last:
Taking into consideration the reasoning made up to now, assuming to have a ImageView that show a VectorDrawable, is it possible create a function that magnify and lessen the image (VectorDrawable)?
p.s. I apologize for having put two questions but the whole is closely related, I thought it was foolish to open two threads
Task 1: Your task is doable using a SurfaceView but I'm assuming that after you draw your image you would want it to stay if that is the case you may have to keep track of each image separately. If your task is just drawing an image you can also override a View which can do the same task but will also provide transparency and basic layout implementations. Difference between View and SurfaceView is performance, SurfaceView is pretty low level with a double buffer and gives you more control. Also if the number of images are small you can override a FrameLayout and spawn ImageView. Its not very efficient but it will be easier to implement.
Task 2: You can scale an ImageView easily by using setScaleX and setScaleY. But this may pixelate the image. Loading a large Bitmap then drawing it on a custom view would be a better way.
In a game I have a GridPane displaying the Tiles of the world in square cells. The player can, using the keyboard, move what is displayed by a column\row. The approaches I've thought of are:
Having the GridPane change programmatically the displayed tiles by moving everything by x steps on player input.
Wrapping the GridPane in a ScrollPane and tying the ScrollPane's scroll to Keyboard input.
My question is, assuming that things that are off-sight but on the same map are always loaded, what are the pros and cons of each approach efficiency-wise? Most specifically, I'm wondering if wrapping the GridPane in a ScrollPane would keep the Images loaded even if they are off-screen, thus impacting performance and if in that case it would be better to just reload them when needed. I'm also wondering if there's a third, more efficient way I haven't thought about.
I'm using JavaFX8
General approach
The most efficient approach for providing a limited viewport onto a very large world is to use a tile based model for the world and to only load the graphics resources and display the tiles that are required for the current viewport.
Sample canvas based implementation
A nice overview of how to accomplish this is the eppleton JavaFX tile engine which is described in an eppleton blog post. That particular implementation uses a Canvas direct draw based approach rather than a scene graph node oriented approach.
Sample scene graph node based implementation
A scene graph based approach relies on what is termed a virtual control; where the control provides cells which are windows on to the underlying data model. The JavaFX ListView and TableView are examples of virtualized controls. These virtual controls can be backed my data structures which contain thousands of items but only visual items for the currently visible tens of items are actually shown on the screen. As the control is scrolled or its underlying data structure is modified, callbacks are invoked to refresh the graphical nodes for each displayed cell.
An example of a scene graph based virtual control for a grid is the ControlsFX GridView. Note that, unlike the canvas based eppleton Tile Engine, the ControlsFX GridView is not specifically built for and optimized to be the core tile based renderer for a game engine, so if you would use GridView in such a way, you would need to add significantly more features to a fork or extension of the GridView to bring it functionally on par with a full gameplay tile engine.
Existing specifications and toolsets
Note that there are existing specifications for Tile map formats such as TMX and existing editors to create files which conform to such formats. Usage of a tilemap is appropriate for both realtime and turn based games and may even be useful outside the gaming genre, though it's traditional usage is in the creation of video games.
Answers to additional questions
would you mind elaborating, even if just slightly about what you mean with GridView is not optimized?
Your primary application seems to be writing tile based game engine. Such an engine usually provides support for reading tile map data, tile image data, overlaying animated sprites on to the tiles, etc. Those kind of features aren't in a ControlsFX GridView because that has a different focus (e.g. displaying a viewport of thumbnail images for a file directory). The point is not that GridView is not optimized performance wise (because it is), the point is that GridView won't provide you with the optimal set of out of the box features which you might need for your particular application (a tile based game).
I forgot to mention in my case the Entities move Tile by Tile and not Pixel by Pixel
That makes implementation simpler as you only have to worry about tiles at discrete co-ordinates and the entity can be an exact tile co-ordinate without an offset for current location and rendering between tiles. However it doesn't really change the whole approach of using a virtualized viewport of only onto the world which only renders what you can currently see rather than rendering the entire world all the time.
Had I know all this a year ago I would had taken a very different route in my delevopment.
Sometimes it pays to do research and sometimes you learn by mistakes :-) I'm sure John Carmack would have written the original Doom differently if he knew then what he knows now. I wouldn't let such things worry you too much. Just assess where you are now and go from there.
I am conducting a learning experiment with Java. I am attempting to create a simple "Megaman" style game using Java and the 3rd party API "LibGDX". I have obtained a rather solid understanding of the relationship between the OrthographicCamera object from LibGDX and the World object from LibGDX's implementation of "JBox2d".
However, when I resize the window the objects inside World stretch. I have made use of the resize(int width, int height) method of the Screen interface. Inside of which i reset the OrthographicCamera's width and height. This does not seem to have any effect of the way the images looks or behaves in the physics simulation.
So my question is this: How do i properly resize a LibGDX/JBox2d application's window without distorting the objects being simulated?
here is the code (in the form of a git repo because i find GitHub faster, easier, and kinder to the SO server...)
EXTERNAL LINK
https://gist.github.com/konnerdroid/8113302
EXTERNAL LINK
AHA!!!! i wasnt updating my camera...
For any changes made to the camera to be visible and their effect to be felt you need to call camera.update() either in your loop or after any changes are made
well... at least i learned how to use github =)
I'm working on an Android application that requires 2D graphical view with a large set of objects. Here's what I basically need to display:
In my case, there could be hundreds of spatially distributed objects. This view is going to behave like a map, so the user is able to scroll in horizontally and vertically, zoom in and zoom out. It also requires click event handling, so the user is able to click any triangle and I then should display some extended information related with that particular triangle.
I'm mostly concerned about 3 things:
In case I re-draw all the objects per in my onDraw() handler, that would be really slow. Also, there I cases when I don't even need to draw all these objects since some of them are invisible depending on zoom level and scroll position. These requires using quad trees which I don't want to implement manually.
All these objects are defined as (x,y,rotation,type), so in case customer decides that we need a "show all" button, I'll have to implement a functionality to calculate bounding boxes.
I need to be able to handle click events and (probably) dragging for all these shapes.
Is there any library that can help me with these tasks? Just don't want to spend 3 days on stuff that I believe must already have been implemented.
All the methods in the Canvas class of the android.graphics package should suffice. The Canvas does clipping (meaning drawing commands get discarded if it's not visible) so if the image is static you could render it into a Picture and draw that on onDraw().
I think the drawing methods have methods to calculate bounds and return them. See Path's computeBounds(RectF bounds, boolean exact).