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 Build a Weather App (2015) Hooking Up the Model to the View Setting the Weather Icon

Posted by imran esmail
imran esmail
1,464 Points

UI components not aligned properly.

Is there anyone who is willing to share his activity_main.xml file please.

Apparently, my UI components are not aligned properly when the app runs. So, I wanted to compare my code with someone else's code.

5 Answers

Jon Kussmann
PLUS
Jon Kussmann
Courses Plus Student 7,254 Points
Jon Kussmann
Jon Kussmann
Courses Plus Student 7,254 Points

It might be better if you could post your xml file here, what you're seeing and what you want to see.

imran esmail
imran esmail
1,464 Points
imran esmail
imran esmail
1,464 Points

Here's what I have: 

<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="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity"
    android:background="#fffc970b"
    android:clickable="false">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="--"
        android:id="@+id/temperatureLabel"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white"
        android:textSize="150sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/degreeImageView"
        android:layout_alignTop="@+id/temperatureLabel"
        android:layout_alignLeft="@+id/temperatureLabel"
        android:layout_alignStart="@+id/temperatureLabel"
        android:layout_marginLeft="249dp"
        android:src="@drawable/degree"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="..."
        android:id="@+id/timeLabel"
        android:layout_above="@+id/degreeImageView"
        android:layout_centerHorizontal="true"
        android:textColor="#80ffffff"
        android:textSize="18sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alcatraz Island, CA"
        android:id="@+id/locationLabel"
        android:layout_above="@+id/timeLabel"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconImageView"
        android:src="@drawable/cloudy_night"
        android:layout_alignBottom="@+id/locationLabel"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/temperatureLabel"
        android:layout_alignLeft="@+id/temperatureLabel"
        android:layout_alignStart="@+id/temperatureLabel"
        android:weightSum="100"
        android:id="@+id/linearLayout">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="50">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="HUMIDITY"
                android:id="@+id/humidityLabel"
                android:textColor="#80ffffff"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/humidityValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="50">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="RAIN?/SNOW"
                android:id="@+id/precipLabel"
                android:textColor="#80ffffff"
                android:gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/precipValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:gravity="center_horizontal"/>
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Getting current weather..."
        android:id="@+id/summaryLabel"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:textColor="@android:color/white"
        android:textSize="18dp"
        android:gravity="center_vertical"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/refreshImageView"
        android:src="@drawable/refresh"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_above="@+id/locationLabel"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@+id/refreshImageView"/>
</RelativeLayout>

I wish I could share my UI as well but I don't know if there is an attachment option,

Jon Kussmann
Jon Kussmann
Courses Plus Student 7,254 Points

It doesn't look like you have a rootView, like a RelativeLayout that encompasses all of your other viewgroups/views

imran esmail
imran esmail
1,464 Points
imran esmail
imran esmail
1,464 Points

Here's what I have: 

<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="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity"
    android:background="#fffc970b"
    android:clickable="false">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="--"
        android:id="@+id/temperatureLabel"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white"
        android:textSize="150sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/degreeImageView"
        android:layout_alignTop="@+id/temperatureLabel"
        android:layout_alignLeft="@+id/temperatureLabel"
        android:layout_alignStart="@+id/temperatureLabel"
        android:layout_marginLeft="249dp"
        android:src="@drawable/degree"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="..."
        android:id="@+id/timeLabel"
        android:layout_above="@+id/degreeImageView"
        android:layout_centerHorizontal="true"
        android:textColor="#80ffffff"
        android:textSize="18sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alcatraz Island, CA"
        android:id="@+id/locationLabel"
        android:layout_above="@+id/timeLabel"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconImageView"
        android:src="@drawable/cloudy_night"
        android:layout_alignBottom="@+id/locationLabel"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/temperatureLabel"
        android:layout_alignLeft="@+id/temperatureLabel"
        android:layout_alignStart="@+id/temperatureLabel"
        android:weightSum="100"
        android:id="@+id/linearLayout">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="50">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="HUMIDITY"
                android:id="@+id/humidityLabel"
                android:textColor="#80ffffff"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/humidityValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="50">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="RAIN?/SNOW"
                android:id="@+id/precipLabel"
                android:textColor="#80ffffff"
                android:gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/precipValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:gravity="center_horizontal"/>
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Getting current weather..."
        android:id="@+id/summaryLabel"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:textColor="@android:color/white"
        android:textSize="18dp"
        android:gravity="center_vertical"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/refreshImageView"
        android:src="@drawable/refresh"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_above="@+id/locationLabel"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@+id/refreshImageView"/>
</RelativeLayout>

I wish I could share my UI as well but I don't know if there is an attachment option,

imran esmail
imran esmail
1,464 Points
imran esmail
imran esmail
1,464 Points

It has a reativelayout. Looks like I skipped it while copy/pasting the code.

But here it is:

<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="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MyActivity" android:background="#fffc970b" android:clickable="false">

Jon Kussmann
PLUS
Jon Kussmann
Courses Plus Student 7,254 Points
Jon Kussmann
Jon Kussmann
Courses Plus Student 7,254 Points

I hope this is helpful.

<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="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context=".MainActivity"
                android:background="@drawable/bg_gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="--"
        android:id="@+id/temperatureLabel"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white"
        android:textSize="150sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/degreeImageView"
        android:layout_alignTop="@+id/temperatureLabel"
        android:layout_toRightOf="@+id/temperatureLabel"
        android:layout_toEndOf="@+id/temperatureLabel"
        android:src="@drawable/degree"
        android:layout_marginTop="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="At ... it will be"
        android:id="@+id/timeLabel"
        android:layout_above="@+id/temperatureLabel"
        android:layout_centerHorizontal="true"
        android:textColor="#80ffffff"
        android:textSize="18sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Alcatraz Island, CA"
        android:id="@+id/locationLabel"
        android:layout_above="@+id/timeLabel"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconImageView"
        android:layout_alignBottom="@+id/locationLabel"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/cloudy_night"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/temperatureLabel"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:id="@+id/linearLayout">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="HUMIDITY"
                android:id="@+id/humidityLabel"
                android:textColor="#80ffffff"
                android:gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/humidityValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:gravity="center_horizontal"/>
        </LinearLayout>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="RAIN/SNOW"
                android:id="@+id/precipLabel"
                android:textColor="#80ffffff"
                android:gravity="center_horizontal"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="--"
                android:id="@+id/precipValue"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:gravity="center_horizontal"/>
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Getting current weather..."
        android:id="@+id/summaryLabel"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white"
        android:textSize="18dp"
        android:gravity="center_horizontal"
        android:layout_marginTop="40dp"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/refreshImageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/refresh"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@+id/refreshImageView"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="HOURLY"
            android:id="@+id/hourlyButton"
            android:layout_weight="1"
            android:background="#40ffffff"
            android:textColor="#FFFFFFFF"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="7 DAY"
            android:id="@+id/dailyButton"
            android:layout_weight="1"
            android:background="#40ffffff"
            android:textColor="#ffffffff"
            android:layout_marginLeft="2dp"/>
    </LinearLayout>
</RelativeLayout>