Images
Sometimes you just need to insert an image into your layout without expecting any interactivity with the user. The Image class is the answer for this. Image takes a Drawable and scales it according to the scaling strategy your select to fill the available space provided. This is great for title images and other static content.
Any sort of source image will work for our test. Be mindful that your image source is not too large or small for the target that you're intending to show the image. Otherwise you'll see hideous scaling effects.
Image requires a Drawable to function. Drawable is typically a TextureRegion from a TextureAtlas, but there are many special use drawables like NinePatchDrawable, TenPatchDrawable, TiledDrawable, etc.
TextureRegionDrawable drawable = new TextureRegionDrawable(new Texture(Gdx.files.internal("tiger.jpg")));
Image image = new Image(drawable);
table.add(image);There are many helper constructors that will create the drawable for you. For example, you can include the image directly as a texture from your assets:
Image image = new Image(new Texture(Gdx.files.internal("tiger.jpg")));
table.add(image);If you're just pulling an image from your Skin, use the following constructor:
Image image = new Image(skin, "tiger");
table.add(image);If your layout changes in any way, the image will scale accordingly. How it scales is determined by the Scaling strategy selected.
image.setScaling(Scaling.fit);Stretch is the default Scaling strategy. It hideously transforms a normal image when the widget is resized. This is not recommended.
image.setScaling(Scaling.stretch);
If you use an advanced drawable like NinePatchDrawable, you may actually want this functionality.
If you only want it to scale in one direction, use stretchX or stretchY
image.setScaling(Scaling.stretchX);
image.setScaling(Scaling.stretchY);
This ensures that no matter what your image is not going to be scaled. This affects the minWidth and minHeight of the image. This is great for smaller images or parts of your interface that don't change.
image.setScaling(Scaling.none);
This is not great when the layout is shrunken down below these preferred dimensions.
Fit keeps the image scaled so that it will fit in the dimensions of the widget while maintaining its original aspect ratio. That means it's going to be smaller in one direction if the size of the widget is changed.
image.setScaling(Scaling.fit);
Contain is like fit, but it will not scale the image if its smaller than the target.
image.setScaling(Scaling.contain);
Fill keeps the image scaled so that it will fill the entire space of the widget while maintaining its original aspect ratio. That means that some of the image can be cropped off depending on the size of the widget.
image.setScaling(Scaling.fill);
FillX is like fill, but will only make sure that horizontal space is filled. The rest of the image is cropped. FillY is the same for the vertical space.
image.setScaling(Scaling.fillX);
image.setScaling(Scaling.fillY);
You can further refine the appearance of your image by pairing an alignment to your scaling. Given enough space in your layout, you can control the placement of the drawable within the bounds.
image.setAlign(Align.topLeft);
Of course if you use a Scaling like fill, you will not see any difference with the alignment you choose.
Continue with 11 - Touchpads or return to the table of contents.