Creating A Custom Layout part 1

// We have the data we need and
// we're displaying a little bit of it in a list, great.
// But we can do so much more.
// Right now we are using a list item layout and
// list adapter already provided by the Android SDK.
// We can build on top of those or create totally new ones to match our needs.
// Now don't worry, it's not as hard as it sounds although it can be a little
// confusing the first time through.
// But, with this course and the code we're working on, you should have the knowledge
// and a model to create any kind of list layout and adapter you need in the future.


// Right click>layout folder>new>layout resource file> name it "daily_list_item" and change it from 'LinearLayout' to 'RelativeLayout' --because we are going to position things relative to each other.
//Click OK to finish it, and okay our layout file is created and if we switch
// over to the text view, we see that it has a relative layout at the root, cool:

Step 1.
<?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="match_parent">

</RelativeLayout>

// So the background of any layout is transparent by default, but in this view, it's showing as white.
// This is actually going to be a problem since we're going to use white text.
// But we don't wanna specify a background color in here
// because we want the gradient from our activity background to show through.


// Fortunately, the Android Tools contain a useful little trick for setting attributes
// that only show when working on a layout in Android Studio, not in the actual app.

// So let's check out activity_main.xml to see what I'm talking about.
// Make sure you're in the text view like this, and then here at the top, we have
// two lines that are for XML namespaces, that's what this xmlns prefix stands for.
// The first is the android namespace and the second is the tools namespace.

// Now, we don't really care about the details about what XML namespaces are or how they're used.
// All we care is that this one allows us to use those special tools attributes.
// So copy it from this activity main layout and then let's go back to
// daily_list_item.xml, and switch to the text view and we can paste it in here.

Step 2.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools" // <--this line right here, copied from activity_main.xml allows us to add special attributes that begin with tools instead of Android.
                android:layout_width="match_parent"
                android:layout_height="match_parent">

</RelativeLayout>




Let's add a background color to our preview using 'tools:' so we can see the white font.
Step 3.
<?xml version="1.0" encoding="utf-8"?>
<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"
                tools:background="#ffaa00">

</RelativeLayout>

// notice that the background has changed to a yellowish orange color.
// But it's only this color in our tools.
// The final app will still be transparent.
// Simple.



<?xml version="1.0" encoding="utf-8"?>
<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" // Since this is a list, change layout from 'match_parent' to 'wrap_content'
                tools:background="#ffaa00">

</RelativeLayout>

// You will need to download a new image for the circle that will hold the temperature.
// Step 5. Download the icons. extract them, then copy and paste them into the Res>Drawable folders.

/*
Then go to design tab of the .xml in Android studio. Drag in ImageView to the top left ( android:layout_alignParentTop="true" android:layout_alignParentLeft="true" ) then go to Id in the properties tab, call it circleImageView. Then go to src. click [...] button, scroll down to the drawables folder and you will see "bg_temperature" that you had just extracted/copy&pasted into the drawable folder. Select it and hit okay.
*/
// Drag and drop andother image view in, to the right of the circleImageView. Then do the same thing again except name the id iconImageView and for 'src' use "clear_day".

// Drag and drop Plain Text View in and align it to the right of the circleImageView. Set "id" to dayNameLabel and set textColor to #FFFFFFFF . Make textSize 20dp.
// Add some placeholder text by clearing the text in the Text. Then in the XML tab in <TextView> add "tools:text="Wednesday" <- as we said before, this won't show up in the app when we run it but it will show up in the preview. *


// The result:


<?xml version="1.0" encoding="utf-8"?>
<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:background="#ffaa00">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/circleImageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/bg_temperature"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iconImageView"
        android:src="@drawable/clear_day"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/circleImageView"
        android:layout_toEndOf="@+id/circleImageView"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dayNameLabel"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/iconImageView"
        android:layout_toEndOf="@+id/iconImageView"
        android:textColor="#ffffffff"
        android:textSize="20sp"
        tools:text="Wednesday" //*
        />
</RelativeLayout>

// Now we need a text view to hold the temperature, but
// we want it to be in the center of the first circle we added.