wood burning stoves 2.0*
The moose likes Android and the fly likes xml layout not aligned in middle Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Mobile » Android
Bookmark "xml layout not aligned in middle" Watch "xml layout not aligned in middle" New topic
Author

xml layout not aligned in middle

Fleurtje Eliza
Greenhorn

Joined: Mar 30, 2014
Posts: 9

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>


Trying trigonometry
Steve Luke
Bartender

Joined: Jan 28, 2003
Posts: 4181
    
  21

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:


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:


Steve
Steve Luke
Bartender

Joined: Jan 28, 2003
Posts: 4181
    
  21

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.



[Thumbnail for Even Columns.png]

Fleurtje Eliza
Greenhorn

Joined: Mar 30, 2014
Posts: 9

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
Greenhorn

Joined: Mar 30, 2014
Posts: 9

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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: xml layout not aligned in middle