xml layout not aligned in middle

[Fleurtje Eliza]

Hi there,

Indeed, a greenhorn is what I am and I really like the expression! I prefer it above new bee, but then again: spring has only started, so I hope that this season will do me some good ;-)

Being trained both as an artist and art historian, I am completely new to this android stuff. I did a course on Coursera (https://class.coursera.org/androidapps101-001) and I enjoyed it thoroughly. However, now I am rather struggling with things I thought would be easier and I am so in need of someone helping me out...

I am building an android layout with two vertical rows of images and text views. Only the thing is: the alignment of both rows is not in the middle, therefore the left row (first linear layout with vertical orientation) is far wider than the right one.

Please, let me know how I can fix this. Thanks, Fleur

This is a short version of what my xml code looks like:

<?xml version="1.0"?>
<ScrollView xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android: orientation="vertical"
tools:context=".PortfolioActivity" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:baselineAligned="false"
android: orientation="horizontal"
android:weightSum="2" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android: orientation="vertical" >

<ImageView
android:id="@+id/Aint"
android:layout_width="140dp"
android:layout_height="185dp"
android:layout_gravity="center_horizontal"
android:contentDescription="@string/aint"
android:padding="8dp"
android:src="@drawable/aint" />

<TextView
android:id="@+id/TitleAint"
style="@style/TitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/aint" />

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android: orientation="vertical" >

<TextView
android:id="@+id/TextView2"
style="@style/BaseText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:textStyle="bold" />

<ImageView
android:id="@+id/Areyou"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="center"
android:contentDescription="@string/areyou"
android:padding="8dp"
android:src="@drawable/areyou" />

</LinearLayout>
</LinearLayout>

</ScrollView>

[Steve Luke]

So first up, welcome to the Ranch!

It looks like your XML has some errors in it, which makes it hard to just copy and paste. For example, there is a space between the colon and o in android:orientation. This may be on purpose to avoid smilies, but it makes copy and pasting the code harder. Next time, please disable smilies on posts with XML (there is an option underneath the message area to do so). It will make life easier on us.

Another thing that makes life easier is the use of code tags. See UseCodeTags (<- that is a link) to see how.

About your problem. You are trying to control sizes of things three different ways:
1) Using android:weight so the parent pushes the size to the child
2) Using android:width="wrap_content" to make sure the parent resizes to fit the child
3) Using android:width="xxxdp" to make the child define a specific size

These things are at crosses with each other. The first one makes the parent responsible for the sizes and the second two make the child responsible for the sizes. Since you want to make the two columns equal and consistent size, you should have the parent push the sizes to the children, rather than the children push the sizes to the parent. And that is what weights do (along with 'match_parent' and 'fill_parent' width options). So, for example, you have an outer LinearLayout and two inner ones, which you want to be columns of equal size. Your basic layout would have the outer LinearLayout define a weightSum of 2, each of the inner LinearLayouts have a weight of 1, and to define the width as 0dp so it does not interfere or push a size to the parent:
<LinearLayout android:layout_width="fill_parent" <!-- outer layout fills screen --> android:layout_height="wrap_content" android:weightSum="2" <!-- has room for two equal children --> android:orientation="horizontal" android:background="#aaa" > <LinearLayout android:layout_width="0dp" <!-- no inherent width, must get from parent --> android:layout_height="wrap_content" android:layout_weight="1" <!-- is one unit of parent's width --> android:background="#c00" android:orientation="vertical" > </LinearLayout> <LinearLayout android:layout_width="0dp" <!-- no inherent width, must get from parent --> android:layout_height="wrap_content" android:layout_weight="1" <!-- is one unit of parent's width --> android:background="#0c0" android:orientation="vertical" > </LinearLayout> </LinearLayout>

Then, to make sure this width is passed from the column defining LinearLayouts onto the children text fields and images, those text and image views should define their widths as either fill_parent or match_parent:
<LinearLayout android:layout_width="0dp" <!-- no inherent width, must get from parent --> android:layout_height="wrap_content" android:layout_weight="1" <!-- is one unit of parent's width --> android:background="#c00" android:orientation="vertical" > <ImageView android:id="@+id/Aint" android:layout_width="fill_parent" <!-- I am as wide as my column layout --> android:layout_height="180dp" <!-- But a fixed height? Not sure for images --> android:scaleType="fitCenter" <!-- Since the width will vary, make sure we scale one way or another --> android:contentDescription="image 1" android:background="#800" android:padding="8dp" /> <TextView android:id="@+id/TitleAint" android:layout_width="fill_parent" <!-- I am as wide as my column layout --> android:layout_height="wrap_content" <!-- make sure I am big enough to contain my text --> android:background="#500" android:text="I am a really long bit of text" /> </LinearLayout>

[Steve Luke]

Here is an example, using what I described in the last post. Each column has a different color, each item in the column has a different shade.
<?xml version="1.0"?> <ScrollView xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#fff" android:fillViewport="true" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="#aaa" android:weightSum="2" > <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="#c00" android:orientation="vertical" > <ImageView android:id="@+id/Aint" android:layout_width="fill_parent" android:layout_height="180dp" android:scaleType="fitCenter" android:contentDescription="image 1" android:background="#800" android:padding="8dp" /> <TextView android:id="@+id/TitleAint" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#500" android:text="I am a really long bit of text" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:background="#0c0" android:layout_weight="1" android:orientation="vertical" > <TextView android:id="@+id/TextView2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="I might be longer than the other text, I dunno." android:background="#080" android:textStyle="bold" /> <ImageView android:id="@+id/Areyou" android:layout_width="fill_parent" android:layout_height="140dp" android:layout_gravity="center" android:scaleType="fitCenter" android:contentDescription="image 2" android:padding="8dp" android:background="#050" /> </LinearLayout> </LinearLayout> </ScrollView>

[Fleurtje Eliza]

Wow Steve, thanks so much for your two quick comments and taking the time to explain it so thoroughly to me! I am gonna dive into this tomorrow morning and hopefully after that I can celebrate my first time ever 'solved button click event' here on the JavaRanch ;-)

Otherwise I will ask again here on this forum, I am so glad with the 'be nice' policy, it makes it easy to ask around. Even if I feel like asking about something obvious.

Thanks again! Ciao, Fleur

[Fleurtje Eliza]

Hip hop hurrah, that was all it took! I was not expecting it to work immediately, since I have been stumbling with Android ever since I started. So you can imagine I am thrilled. I really am! There was also another bug with the text in the textview not shown properly, but that is fixed as well.

Thanks! Ciao, Fleur ---> a happy bird on the ranch