Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android

Holly Fox
Holly Fox
2,808 Points

How do I resize and position my images in the Android layout files?

Ok, so I have been researching and trying things all week but just can't find the answer anywhere.

I am trying to make a very simple android app (it's my first) showing 2 images, one at the top of the screen and one directly below., each taking up exactly half of the screen. Each of these buttons are ImageButtons. On clicking the button a new image appears.

I think I'm on track with the on click listener etc but it's the actual design that I'm struggling with. I have tried resizing the images in design view but it just won't work. I've tried various changes to the properties too, playing around with fill_parent, wrap_content etc. I've also tried writing some code in the text view based on something I've read in stack overflow about layout_weights... a concept I'm struggling to grasp.

Please help treehouse community! I thought I was starting with something simple so feeling a bit deflated that I can't get this to work :(

2 Answers

william parrish
william parrish
13,774 Points

I loaded that into one of my projects, the amber warnings i see are as follows:

each ImageButton is giving you a content description warning, any image resource in a layout file typically does this. A content description is a String you provide that will be provided to those visually impaired. These are not required, so it will always be a warning, rather than an error.

layout_alignParentBottom is sort of an invalid tag to use in a LinearLayout. A linearlayout will of course just lay items out in a linear fashion, either vertical or horizontal depending on how you have it set up, and it will lay them out, in the order that they are entered into the layout.xml file. In essence by then using _alignParentBottom you are trying to override the the nature of the linear layout. Again, not an error, just a warning.

alignParentBottom is part of a bunch of features that are associated with Relative layouts. These are incredibly powerful. Consider this, all those attributes for the relative layout that you may or may not have been using as "true" as in your alignParentBottom example above, can be made even more flexible by entering the ID of another associated layout file instead of using "true" or "false". You can even set up a regular linearlayout Within a relative layout, and use that linearlayout ID to anchor all of your other stuff off of.

You will sort this out more as you go along.

william parrish
william parrish
13,774 Points

Have you tried setting the layouts to a defined height or width, by specifying a pixel size?

Layout weights are not a bad way to go, but its a two step process. You can assign individual weights to each component, but you also have to assign a sum or total weight to the layout, for it to then partition off the appropriate allotment for the individual weights.

Post your layout file here, and i can help you sort it out a little better.

Holly Fox
Holly Fox
2,808 Points

Hi William Thank you for getting back to me. I have played around with the code a little more this morning and it seems to be working but I do have a few amber warning signs so would appreciate your input.

Firstly when I first created my project it set up a RelativeLayout on the layout files. I have manually amended this to LinearLayout as per a couple of forums and videos I've seen. Maybe this is the first problem??

I then tried WeightSum in conjunction with layout_weight as you mentioned and this seemed to work. I cropped my images using the property scaleType = CentreCrop.

If you could give me some additional pointers and shed some light on the amber warning signs that would be great.

""" xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:weightSum="2" tools:context=".MyActivity">

        <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:id="@+id/topButton"
        android:src="@drawable/photo2"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:scaleType="centerCrop" />

        <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:id="@+id/bottomButton"
        android:src="@drawable/photo1"
        android:layout_alignParentBottom="true"
        android:layout_weight="1"
        android:scaleType="centerCrop" />

</LinearLayout>

"""