Visual Studio Xamarin Android help

TAHIRMIA · November 20, 2016

I am following a guide from Microsoft so I can get used to cross platform mobile development

However when I copy this

Spoiler



<TextView  
        android:text="Location"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/locationLabel"  
        android:layout_marginLeft="10dp"  
        android:layout_marginTop="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/locationText"  
        android:layout_marginLeft="20dp"  
        android:layout_marginBottom="10dp" />  
    <TextView  
        android:text="Temperature"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/tempLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/tempText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />  
    <TextView  
        android:text="Wind Speed"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/windLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/windText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />  
    <TextView  
        android:text="Humidity"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/humidtyLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/humidityText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />  
    <TextView  
        android:text="Visibility"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/visibilityLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/visibilityText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />  
    <TextView  
        android:text="Time of Sunrise"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/sunriseLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/sunriseText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />  
    <TextView  
        android:text="Time of Sunset"  
        android:textAppearance="?android:attr/textAppearanceSmall"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/sunsetLabel"  
        android:layout_marginLeft="10dp" />  
    <TextView  
        android:textAppearance="?android:attr/textAppearanceMedium"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:id="@+id/sunsetText"  
        android:layout_marginBottom="10dp"  
        android:layout_marginLeft="20dp" />

I change (android) to (p1) because of the the relative layout so the code is like this:(next spoiler)

Spoiler


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:p1="http://schemas.android.com/apk/res/android"
    p1:minWidth="25px"
    p1:minHeight="25px"
    p1:layout_width="match_parent"
    p1:layout_height="match_parent"
    p1:id="@+id/relativeLayout1"
    p1:background="#545454">
    <TextView
        p1:text="Search By Zip Code"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:id="@+id/ZipCodeSearchLabel"
        p1:layout_marginLeft="10dp"
        p1:textColor="@android:color/white" />
    <TextView
        p1:text="Zip Code"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:layout_below="@id/ZipCodeSearchLabel"
        p1:id="@+id/ZipCodeLabel"
        p1:layout_marginLeft="10dp"
        p1:layout_marginTop="5dp" />
    <EditText
        p1:inputType="number"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:layout_below="@id/ZipCodeLabel"
        p1:id="@+id/zipCodeEntry"
        p1:layout_marginLeft="10dp"
        p1:layout_marginBottom="10dp"
        p1:width="165dp" />
    <Button
        p1:text="Get Weather"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:layout_toRightOf="@id/zipCodeEntry"
        p1:id="@+id/weatherBtn"
        p1:layout_marginLeft="20dp"
        p1:layout_alignBottom="@id/zipCodeEntry"
        p1:width="165dp" />
    <TextView
        p1:text="Location"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/locationLabel"
        p1:layout_marginLeft="10dp"
        p1:layout_marginTop="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/locationText"
        p1:layout_marginLeft="20dp"
        p1:layout_marginBottom="10dp" />
    <TextView
        p1:text="Temperature"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/tempLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/tempText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
    <TextView
        p1:text="Wind Speed"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/windLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/windText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
    <TextView
        p1:text="Humidity"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/humidtyLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/humidityText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
    <TextView
        p1:text="Visibility"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/visibilityLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/visibilityText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
    <TextView
        p1:text="Time of Sunrise"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/sunriseLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/sunriseText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
    <TextView
        p1:text="Time of Sunset"
        p1:textAppearance="?android:attr/textAppearanceSmall"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/sunsetLabel"
        p1:layout_marginLeft="10dp" />
    <TextView
        p1:textAppearance="?android:attr/textAppearanceMedium"
        p1:layout_width="match_parent"
        p1:layout_height="wrap_content"
        p1:id="@+id/sunsetText"
        p1:layout_marginBottom="10dp"
        p1:layout_marginLeft="20dp" />
</RelativeLayout>

And then when I switch to designer they all overlap and I get this(check picture)

I am using the latest version of xamarin and the jdk 1.8

Can someone help me sort this out and tell me what I am doing wrong. Thanks in advance

The original link from microsoft: https://msdn.microsoft.com/en-us/library/dn879698.aspx#Write shared data service code

TAHIRMIA · November 20, 2016

12 minutes ago, Lacrimas said:

You should be using LinearLayout with vertical orientation to stack all elements vertically and RelativeLayout for "GET WEATHER" button and other stuff in the light grey box.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/relativeLayout1"
        android:background="#545454">
        <TextView
            android:text="Search By Zip Code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ZipCodeSearchLabel"
            android:layout_marginLeft="10dp"
            android:textColor="@android:color/white" />
        <TextView
            android:text="Zip Code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ZipCodeSearchLabel"
            android:id="@+id/ZipCodeLabel"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp" />
        <EditText
            android:inputType="number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ZipCodeLabel"
            android:id="@+id/zipCodeEntry"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:width="165dp" />
        <Button
            android:text="Get Weather"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/zipCodeEntry"
            android:id="@+id/weatherBtn"
            android:layout_marginLeft="20dp"
            android:layout_alignBottom="@id/zipCodeEntry"
            android:width="165dp" />
        </RelativeLayout>
    <TextView
        android:text="Location"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/locationLabel"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/locationText"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="10dp" />
    <TextView
        android:text="Temperature"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tempLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tempText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
    <TextView
        android:text="Wind Speed"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/windLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/windText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
    <TextView
        android:text="Humidity"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/humidtyLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/humidityText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
    <TextView
        android:text="Visibility"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/visibilityLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/visibilityText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
    <TextView
        android:text="Time of Sunrise"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sunriseLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sunriseText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
    <TextView
        android:text="Time of Sunset"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sunsetLabel"
        android:layout_marginLeft="10dp" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sunsetText"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp" />
</LinearLayout>

This is a rough version, I also changed a few width and height attributes and tested it in Android Studio, looks good to me. Also, why did you change android to p1?

Thanks.

I changed it to p1 because when I created my relative layout it had it already as p1 and when I used android it gave errors. I think its just the way Xamarin works.

TAHIRMIA · November 20, 2016

Just now, Lacrimas said:

Oh, okay. Never really used Xamarin.

This works without changing to p1 I just pasted this and removed everything else. I don't know why that happens. I was using the designer to drop things in so thats probably why it was making it p1