I have a gridView I've created from an online example/tutorial and I'm trying to figure out how to change the behavior when a new item is dragged over a previously existing item in the GridView. Currently when a new item is dragged over the gridView it removes the current icon in place (leaving it with the red empty square [icon.png is a grid of empty squares the code uses as a background image])
I've poured through the example's source quite a few times and I can't figure out how to change the behavior of what happens when one item is dragged over the other
Screenshot:
Source code:
https://drive.google.com/file/d/0B6jCh_IJdtoFYWFJMlk5MHhlX3c/edit?usp=sharing
P.S.
I believe the issue may be in either the DragView or DropTarget class. (feel free to download the entire project - I've made the entire thing available for an easy download)
Look at methods onDragEnter and onDragExit in ImageCell. Those two methods are the ones called as your finger passes over a cell on the grid. They set the background of the image view.
onDragEnter:
int bg = mEmpty ? R.color.cell_empty_hover : R.color.cell_filled_hover;
setBackgroundResource (bg);
onDragExit:
int bg = mEmpty ? R.color.cell_empty : R.color.cell_filled;
setBackgroundResource (bg);
The color definitions are in mycolor.xml.
Reference: http://blahti.wordpress.com/2012/03/03/improved-drag-drop-for-gridview/
Related
I've been trying to create a bar chart/ loading bar where the text is half one colour and half one another and have been struggling to come up with a simple way to tackle this. My ideas thus far have revolved around creating both bars in their complete state and then having a pair of 'selective transparency' views which would show the respective halves to create the effect.
I've been unable to find how to do this selective transparency/ opacity view. Is this possible? Is there some other blindingly obvious way to achieve this effect?
Here's a quick drawing of what I'm trying to achieve.
For anyone stumbling across this, I managed to solve this by using setClipBounds. I did it by creating two textviews of the full size, one with a coloured number and transparent background and the second with a white number and coloured background. Then setClipBounds is applied to the coloured textview as follows -
textview.setClipBounds( new Rect(0, originalHeight*(1 - progress), originalWidth, originalHeight);
Here, the variable progress has a value between 0 and 1. The Rect has to be defined relative to the view, not relative to the screen.
This exact setup achieves an effect something like this, but it could easily be changed to a horizontal bar or whatever else is required.
Somehow misinterpreted the question. The best way to achieve this would be to create the images and set as background to an imageview instead of a textview.
You could just use a LinearGradient
With the parameters colors and positions you can indicate the loading progress.
You can use the gradient when you override the onDraw Custom Drawing
I am currently working on creating a custom progress bar and have so far managed to get the correct image I want to display, however I am trying to customise it so that it fill the white space within my drawable from bottom to top (bottom being 0 and top 100). I am using xml layouts.
I am not entirely sure if this is possible, the image I am trying to fill is;
Any guidance as to whether this is possible or if there are any libraries I would use that would be much appreciated.
I want to have an image on the android screen where different parts of the image can be clickable. What I mean is that, If its an image of 3 circles, I want to be able to click each of these circles,
Then I can add different functionalities to each of these clickable circles.
For an instance in this image below I want to be able to click each distinct color. Is it possible to have on-touch-listener and get you the color ? and can it be an image or has to be drawn in Java OR XML ?
I found a really good widget that helps you make any image muli-clickable. They have some good notes on how to use their widget as well.
The widget has a similar approach as Image mapping in html. The good thing about this widget is that the image can be zoomed and it will not lose the coordinates or areas associated to specific clicks.
Here is the link to their website. the guy who made the widget apparently had similar problem and came up with this widget.
Another solution would have been
creating an ImageView containing the png file referenced
making the whole ImageView clickable
setting an OnTouchListener to the ImageView which overrides the onTouch method
check the colors of the image pixel at the touch position
This is often done with an invisible mask image with one color for each zone (see the popular detailed tutorial), but here the image itself has distinct colors for each zone which makes it more interesting.
I am creating a reference app which has a navigation bar at the top and the information, in the form of an ImageView, below it surrounded by a ScrollView. I have worked out how to change the image when the next button is pressed. I noticed this being implemented on the below app. I am able to get all the programming working, but I am not to keen on visual editing.
http://media1.android-apps.com/images/pname/com.ninjacoders.mcanary/image1.png
What should the dimensions of the Image be in Gimp?
How would I go about creating customs home screen buttons, and what dimensions should I use for them?
Any further advice on how I should do this would be greatly appreciated.
From within GIMP, you should zoom enough your image - and work with the "pencil" tool, and the "pixel" brush (the one brush right after the pepper brush - they are sorted alphabetically) - this will allow you to proper edit pixel-art images.
You can use teh colorpicker and create a new palette resort to let it easier to pick the few grey tones you are using.
To get to know the exact dimensions, one of the tools in GIMP's toolbox is the "measure" tool - use it to get to know which icon size you need.
As a final tip: do your work on this larger image, and draw the icons you want in separate layers - whenever an icon is done, crop its layer using the crop tool, with the option "crop layers" on (else it will crop the whole image) - and then drage the thumbnail for the image layer containing your icon from the layers dialog into the toolbox - this will create a new image consisting of the icon alone (and is a quite faster workflow than copy + paste as new image).
so I have this problem with ImageButton class of libgdx, the problem is that in android the image doesnt expand to the full size of the button, and in desktop it does or at least it does more, so I have to ask if theres a way to force the image to get the size of the background(button)? so i can try to make an equal visualitation on both plataforms.
heres a screen shot, the back space button is the ImageButton...
edit: heres the code....
private void createButtons() {
ImageButtonStyle ibs = new ImageButtonStyle(buttonD,buttonD_p,buttonD,bsIcon,bsIcon,bsIcon);
buttonBS = new ImageButton(ibs); // This is the backspace button
....
}
private void addButtonsToTable() {
float pad = 1;
float BUTTON_SIZE = this.BUTTON_SIZE - pad *3;
table.top();
table.center();
table.add(buttonBS).width(BUTTON_SIZE).height(BUTTON_SIZE).pad(pad);
table.row();
...
}
If you want the image to be the background instead of just an icon, you should consider using plain Button or TextButton instead of ImageButton. ImageButton should be used only for buttons that draw an icon additionally to its background. An example of ImageButton usage could be the window closing button with the "X" (cross) image, or music toggle button with a loudspeaker icon.
When you need the image to fill the whole button area, set it as ButtonStyle#up - it will become button's background. ImageButton#imageUp is just an icon that will not be scaled in any way (by default), so that might be the reason why your application behaves differently on each platform.
(Although it still shouldn't, unless you use different assets.)
If you need an icon and still want to use ImageButton, consider that internally it is just a Button with an Image instance added to one of its cells (Button is a Table). You can use ImageButton#getImageCell() to access Cell in which the Image is stored and modify it - for example, force a specific width and height. You might also want to use ImageButton#getImage() to change scaling with Image#setScaling(Scaling).
Anyway, creating styles at runtime can be error-prone - the style constructor is huge and I'm honestly unable to guess which drawable draws what without checking out image button style sources. You should consider using Skin and define your styles with JSON files (you can find some free themes here).