Develop Reference

Android nested linear layout

I am following tutorial from the book "Android Apps for Absolute Beginners 3rd Edition", and I am stuck with nested LinearLayout for android project in API 19 (4.4.2): Parent LinearLayout is horizontal and it is supposed to hold two child LinearLayout which are vertical and the end result should be like this:
But what I get is:
I tried several times, cross checked code in book, and explanations but I can't get it right.
Here is content of activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" android:background="#drawable/galaxyinfoscreen" >
<LinearLayout android:orientation="vertical" android:layout_margin="12dip"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#00000000">
<TextView android:text="#string/hello_world" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="48dip" android:textStyle="bold" />
<TextView android:text="#string/galaxy_name" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_solar" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_habit" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_colony" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_pop" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_fleet" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_ships" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_margin="33dip"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#00000000" >
<TextView android:text="#string/name_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/name" />
<TextView android:text="#string/solar_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/solar" />
<TextView android:text="#string/habit_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/habit"/>
<TextView android:text="#string/colony_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/colony" />
<TextView android:text="#string/pop_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/pop" />
<TextView android:text="#string/fleet_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/fleet" />
<TextView android:text="#string/ships_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/ships"/>
</LinearLayout>
</LinearLayout>
What could be missing from this file? What should I do to get desired result?

try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/galaxyinfoscreen"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="48dip"
android:text="#string/hello_world"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dip"
android:background="#00000000"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_name"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_solar"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_habit"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_colony"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_pop"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_fleet"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/galaxy_ships"
android:textColor="#FFFFFF" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dip"
android:background="#00000000"
android:orientation="vertical" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/solar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/solar_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/habit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/habit_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/colony"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/colony_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/pop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pop_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/fleet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fleet_data"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/ships"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ships_data"
android:textColor="#FFFFFF" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
"Glaxy Information Screen" TextView is inside first verical LinearLayout. As this text view is taking more space due to its margin and text length hence leaving less space for second linearlayout, resulting into wrap of text for sencond verical layout.
To solve the problem, add one more linear layout with orientation as horizontal as parent of both the vertical layout and add the "Glaxy Information Screen" text view as direct child of top parent.
you may need to make some adjustment to the margin values to aling the layouts.

In the second LinearLayout, the margin parameter is android:layout_marginTop="33dip
You forgot to put Top after margin.
;)

The second LinearLayout doesn't have enough width to accommodate the string and it gets wrapped. If you absolutely must use nested LinearLayout, you should use layout_weight instead of using width with wrapped content. In the example below, I have also moved the title out of the nested LinearLayout to another vertical one.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#drawable/galaxyinfoscreen" >
<TextView android:text="#string/hello_world" android:textColor="#FFFFFF"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:gravity="center" android:textStyle="bold" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout android:orientation="vertical" android:layout_margin="12dip"
android:layout_width="0dp" android:layout_weight="3" android:layout_height="wrap_content"
android:background="#00000000">
<TextView android:text="#string/galaxy_name" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_solar" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_habit" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_colony" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_pop" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_fleet" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/galaxy_ships" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_margin="12dip"
android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"
android:background="#00000000" >
<TextView android:text="#string/name_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/name" />
<TextView android:text="#string/solar_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/solar" />
<TextView android:text="#string/habit_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/habit"/>
<TextView android:text="#string/colony_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/colony" />
<TextView android:text="#string/pop_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/pop" />
<TextView android:text="#string/fleet_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/fleet" />
<TextView android:text="#string/ships_data" android:textColor="#FFFFFF"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/ships"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

With your current code i have two suggestions:
First:
android:singleLine="true"
add this tag to all your list views, so this will maintain symmetry in all your textView placement.
Secondly:
Keep a single Parent LinearLayout with orientation vertical, then have multiple LinearLayout with horizontal orientation and two TextView inside it.

Android GUI: Layout manager

I'm learning about Layout managers to improve my app design. For the most part it worked out ok. The only thing I want is my buttons to be positioned a little higher.I can achieve this by removing the 3 buttons from the layout manager but by doing this I have issues on lower res devices. (The buttons will position themselves over the EditText fields or position themselves over my ad at the bottom). I've tried some things I found online but I only ended up ruining the layout.
Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/textviewLayoutLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvPpl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="20dp"
android:text="Price Per Liter"
android:textStyle="bold" />
<TextView
android:id="#+id/tvAvgConsumption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="avg(l/100km)"
android:textStyle="bold" />
<TextView
android:id="#+id/tvDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Distance (km)"
android:textStyle="bold" />
<TextView
android:id="#+id/tvAmountOfPersons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="# Persons"
android:textStyle="bold" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="20dp"
android:text="Price Per Person"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/textfieldLayoutRight"
android:layout_width="166dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/textPrijsPerLiter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<EditText
android:id="#+id/textVerbruik"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ems="10"
android:inputType="numberDecimal" />
<EditText
android:id="#+id/textAfstand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<EditText
android:id="#+id/textAantalPersonen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ems="10"
android:imeOptions="actionGo"
android:inputType="numberDecimal" />
<TextView
android:id="#+id/textViewPPP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="20dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ffff000f"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="10dp"
android:orientation="vertical">
<Button
android:id="#+id/btnBereken"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Calculate"
android:textStyle="bold" />
<Button
android:id="#+id/btnReset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset all textfields"
android:textStyle="bold" />
<Button
android:id="#+id/btnLoad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load latest results"
android:textStyle="bold" />
</LinearLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="MY_ID" />
</LinearLayout>
</RelativeLayout>

You can:
Give up second linear layout and move button layout and ad layouts to main layout. Stick ad layout to bottom and declare it BEFORE button layout. Set buttons adjustments to layout_below="textfieldlayout" and layout_above="ad" instead of layout_alignParentBottom="true".
Consider using linear layout with weightSum. Every parent layout should have weightSum=100, every child will respectively have % of space. From my point of view this way would be the best, because views will position equally for merely all devices and even layout tree depth will remain the same. You'll only have to change the parent layout to LinearLayout and set weights.

How to disable or block TextView to not narrowed other elements of the Layout

I have problem with my TextView, when something is written in it. It narrows the right layout.
like here:
1 Without something is written: http://i.stack.imgur.com/zItJw.jpg
2.Without something is written in: http://i.stack.imgur.com/b5Nb4.jpg
My Layout Code:
1st bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/dzialanie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="X razy Y" />
<TextView
android:id="#+id/equal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25sp"
android:text="=" />
<TextView
android:id="#+id/tylemabyc"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
2nd bar
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/czas"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
3rd bar:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#drawable/czas_punkty_bez_napisu"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/wynik"
android:textSize="25sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
How to block 1st TextView to not narrows others ?

You can use layout_weight property to tell android how much space each textView takes on the screen. If you want all of them to have the same space you can add the layout_weight of 1 for all of them.
You will also need to readjust your layout_width too. You will have to trade off for the layout_heght. For example if i want 4 textviews in a horizontal line holding equal space "Horizontally" i would do something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="This is verrry long text" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="maybe not" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="let us see" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ok" />

GridLayout - Aligning Element

I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>

I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.

You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.

I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.

try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";

Android SDK - Positioning elements in listview row

For some reason I'm having a hell of a time with designing using eclipse and android SDK. Making layouts is painfully hard and not as easy as WPF/Visual Studio.
I am trying to accomplish the following:
Top: what I have
Bottom: what I want to achieve
http://imgur.com/AsaTuGq
Current code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:textIsSelectable="false"
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="18sp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:textIsSelectable="false"
android:id="#+id/line2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="18sp"
/>
<TextView
android:textIsSelectable="false"
android:id="#+id/line3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:textSize="18sp"
/>
</LinearLayout>
Edit:
I've also tried using Vertical LinearLayout within a Horizontal LinearLayout but that just produced a lot of errors.
Edit2:
What's with the negative rating?
Edit3:
Tried this link: http://android-developers.blogspot.ca/2009/02/android-layout-tricks-1.html
Replacing the image with a textview but the date just aligns with the top row.. hmm

You should use a RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="false"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

I would suggest a RelativeLayout for this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:textIsSelectable="false"
android:id="#+id/line1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="18sp"
android:layout_weight="1"
android:textStyle="bold"
android:layout_alignParentLeft="true"
/>
<TextView
android:textIsSelectable="false"
android:id="#+id/line2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="18sp"
android:layout_alignParentLeft="true"
android:layout_below="#_id/line1"
/>
<TextView
android:textIsSelectable="false"
android:id="#+id/line3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignParentRight="true"
android:textSize="18sp"
/>
</RelativeLayout>
Changes:
Changed LinearLayout to RelativeLayout used android:layout_alignParentLeft="true" for the first two lines and android:layout_below="#+id/line1" for the second line. Moved the date to the right with android:layout_alignParentRight="true" and android:gravity="center_vertical" Hope this works for what you need.