Develop Reference

Libgdx - Remove HTML greybackground/recompile button/ load splash

What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?

Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.
Grey background
The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.
Grey border
The border around the game can be removed by editing HtmlLauncher like so:
#Override
public GwtApplicationConfiguration getConfig () {
GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
config.padHorizontal = 0;
config.padVertical = 0;
return config;
}
Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.
Recompile button
Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.
Load/splash screen
You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.
Other changes
Things you might want to change before a final release:
styles.css isn't very important beyond changing the background colour, as noted earlier.
In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).

Multi-page application with corresponding pictures and text

I'm new to Java and Android. I have been trying for the past week to make an app for my phone. The app consists of 4 pages, which are diagrammed below:
Page 1: Contains a picture taking up the size of the screen. If I click on the picture it needs to go to "page 2".
Page 2: Consists of an icon on the left (say the flag for instance) followed by a text field (eg. USA). When "USA" strip is clicked it needs to go to page 3.
Page 3: Consists of text, picture and then more text from a string. This page needs to correspond to the strip clicked on in page 2 ("USA" in this example). There are also two buttons at the bottom of "page 3" and "page 4" which when pressed need to go to the corresponding page numbers.
Page 4: This page is displayed if the "More" button is pressed on "page 3".
I would like this phone to work on a minimum Android 2.2 or 2.3. All logos, pictures and string texts need to be locally available (resources folder) and not website based. I have tried all sorts of combinations of ListView's and buttons with OnClickListener's as well as toast screens. My limited knowledge of programming is frustrating.
My question is if there is a template around which will help me out with this app? Or if there are any web resources.

In Android, individual "pages" or "screens" can be implemented as Activitys. You need to extend the Activity class and add the components that you wish to display. Most of the layout can be done in an XML file. I strongly suggest that you google for a tutorial that illustrates the basics of Android programming. From there, you can start by creating an app with two pages. And then just keep adding a little bit at a time until you get the complete app that you want.

There some easy ways to do this. If you want to be backwards compatible to SDK 8 you can do this in two ways. You can use Fragments or Activities for each layout. If you implement fragments, I suggest reading http://developer.android.com/guide/components/fragments.html inside there you will about using the FragmentActivity instead of the Activity. Read this link http://developer.android.com/tools/extras/support-library.html as it will have the needed libraries to implement the Fragments in older versions of the SDK. It does looks like you looking for some navigation buttons that reside on the bottom of the layout. In order to fully implement a layout that has this view on the bottom of the screen in SDK 8, you will need to create your own View and place it on the bottom of the screen. RelativeLayout and alignParentBottom = "true" will accomplish this. There is also a way to do this using a ViewPager which will also work in the backwards compatibility requirements you have. I am sorry the amount of information I am throwing at you but I really would recommend looking into other questions posted by users on this topic. How to navigate to another page in android? for example. Good luck and everything you are looking for is able to be learned through a Google search. Maybe not all at once.

Android 4 settings style

I really like the androi 4 settings page and im trying to style my app the same way.
Here is a screenshot: http://cdn.androidtapp.com/wp-content/uploads/2011/10/Android-4.0-Settings-Screen.jpg.
Ive just gotten into java and android 3 or 4 days ago so style i havent really focused on style and dont know anything about it so i have a couple of questions:
1) How to set similar caption to list (Wiress and network on the picture for example)
2) How to set the same colors to my app? Is this somekind of a default style?
3) Is padding used on the picture to make list distance from borders? Can padding be applied thought whole application or does it have to be defined in every xml?
Thank you!

Yes you can apply a universal style to your app (this includes padding), it's quite straightforward
look here for a starting point http://developer.android.com/guide/topics/ui/themes.html

If you want to style your app the same, you should follow these guidelines about standard metrics and grids:
http://developer.android.com/design/style/metrics-grids.html
1) To set a similar caption you have to implement your own customized view and add it to your list.
2) You can set a theme you need in AndroidManifest.xml or you can use standard items. To find them have a look at android.jar/res.layout folder in your Android library in your project. There are all the standard layout files for Views.
3) What you need is to set margins in your layout-file.
You have to make a layout file and specify all the View-elements and margins in it.
However, if you want to make preferences there are ready classes available for that (PreferenceActivity or PreferenceFragment).

SMS Balloons / Long Chat Boxes

I want to be able to add a text-messaging balloon every time the user revives data from a HttpGet, I want it so that it looks nearly identical to the default Android text messaging UI. I'm fine with all the code, I just need a way to create the UI and create another text balloon every time data comes back from a HttpGet request.
Thanks ever so much, for the answering this questions and I'm sure there's an easy way to do it, yet I've found no way by using the 'ole Google.

I am doing something similar for my app am doing the following to achieve it:
You will need a 9-Patch-Image (a stretchable PNG, see here) that represents the bubble. You want to make the part stretchable that does not include the corners of the bubble. You can create the bubbles using an image editor of your choice (I'd recommend a vector graphics editor like Inkscape). Then use the 9-Patch editor included in the Android Developer Tools to transform the PNG image into a 9-Patch PNG.
Create a custom layout file for one bubble. Create a textview inside it, and add your bubble as a background resource. (android:background)
Use an arraylist with a custom adapter to inflate and fill your items.
So far, this will give you identical bubbles as background for all messages.
If you want to get fancy, you can create different bubbles for participants, and use the setBackgroundResource method in your Adapter to set the correct background.
Further, if you wish to align them left or right, like in the message app, you will need to add spacers to the left and right of your TextView in the layout file. I used FrameLayouts with a fixed width. Make sure to set their visibility to GONE.
As with swapping the different bubble colors, just set the visibility of the left/right spacer.

I want to create a red "night mode" for my Android app

I'm creating an app for use by pilots. It mostly uses TextView, EditText, Button, etc. In other words, not very graphics-heavy.
When used at night, I'd like for the user to be able to switch to a "night mode" where everything on screen is red and black... like the Google Sky Map app. (This is important for pilots because the color red does not destroy the eye's natural night vision adaptation as other colors do.)
What's the best way to do this? I found APIs like ColorFilter, etc. but I'm not sure how I'd apply these app-wide.

If you're simply talking about changing the colours of the various views within the layout and not the structure of the layout itself, then I'd suggest you simply do this using styles.
i.e. Define two sets of styles for the various views which make up your layout - one set for night mode and one for day mode. In your activity, it then becomes a case of calling setStyle() on each of your views to toggle it between night and day.
Coming up with a sensible naming convention and parentage scheme for your styles will make your life a lot easier. e.g. MyText.Large vs MyText.Large.Night.
The Android developer doc on Themes and Style is a good starting point.

Creating a day and night theme and setting it programmatically would work. But it also requires you to duplicate your styles, just to specify different drawables/colors.
Instead, you can maintain one style and use Android's built in day/night mode support. Just as you can have multiple variations of a single layout (for landscape or portrait screen orientations,) drawable (for different pixel densities) and string (for different locales,) you can also have day and night versions of your drawables and colors. The specifiers are "-night" and "-notnight" but you will probably want to use "-night" or nothing, making your day version the default. For example:
res/drawable/fancy-button-background.9.png
res/drawable-night/fancy-button-background.9.png
Android should be able to switch the day/night mode automatically but the details on how and when that happens are a little unclear to me. To change the mode yourself, you can use UiModeManager#setNightMode(). Just make sure car mode is enabled first, using enableCarMode(0).