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).
Related
I was wondering how to achieve this. Is it like you instantiate a textView and let the user position it and set properties and then when the user hit the save button you take the property from the textView and make a paint object an add it to bitmap image? (if yes how do you get and set the position because the image that user sees is normally scaled down so it fit on the screen)
or is it like you make a new bitmap combining TextPaint and DynamicLayout like this (i dont know how to get width and height of my text because it will change based on text size, font, text length, etc...)
I'm a beginner and this would be my first app and also new to Java.
You would want to use canvas or Surface view. You would use bitmap to draw the image and then you canvas.paintText(...) to 'draw' the text with a Paint() data type. Use MotionEvent to follow the User's input. I'm not certain on how to save the canvas but I've heard of it being done fairly easily. You can use this site for learning the basics of canvas, paint, bitmap, Motion Events, and more. http://gamecodeschool.com/android/coding-a-breakout-game-for-android/
I can't provide specific examples with out code.
Hope this Helps!
I am trying to a create a gui in libGDX, but I am having problems with my buttons.
I am currently using a 9patch image for my button, which looks like this:
This button scales perfectly well, it's just that when I add text to the button there is too much space between the top of the button, and the top of this text. Like this:
The red line marks the amount of space between the top of the button and the top of the text. This space is too large, and I am wondering if there is any way to reduce it.
The font I am using is not scaled, and it is a normal BitmapFont with no filter. Regardless of the scale, the space between the text and the top edge is always proportionate, meaning that the space still looks the same size when I am using a small font or a large font, relative to the text size.
Any suggestions would be appreciated.
To solve this problem I did the following.
When adding the button to the table, I used the following Code.
table.add(button).height(HEIGHT).width(WIDTH);
This did not solve the mentioned issue, but it allowed me to explicitly set the desired width and height of the button, which played a part in solving the actual issue.
When creating the button, the button, being an extension of Cell, I used to add() function to re-position the text.
button = new TextButton("button", style);
button.add(button.getLabel()).padBottom(CONSTANT);
combined with the Cell.height() function, I was able to use a constant padding variable to position the button's text (or label) in the middle of the button.
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/
I want to resize an ImageButton, but when i change the size of the ImageButton with the mouse on graphical layout on eclipse, and leave the left mouse button, the ImageButton returns to its original size. I have already tried this:
android:layout_width="50dip"
android:layout_height="50dip"
But it doesen't work for me.
The problem is that this button should be a hidden button, so i cut a part of background of my app to do this, but when i put this part on my app it is larger, so everyone can see the difference. The problem is that the app resize my background image to make it compatible with the screen.
The use of dip has been replaced by dp, which stands for Density Pixel.
Documentation on dp can be found here
Try using just 'dp' instead of 'dip'
"dp" is more consistent with "sp".
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).