Creating a Custom Layout Part 2

// Creating a Custom Layout Part 2
// Now we need a textView to hold the temperature, but
// we want it to be in the center of the first circle we added.


// Step 1. Drag plain TextView over to the top left corner. Change id to: temperatureLabel, clear text and add placeholder text: "100".

Then add this inside the text view:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/temperatureLabel"

    // to align the textView to the edge of the circleImageView
        android:layout_alignTop="@+id/circleImageView"
        android:layout_alignBottom="@+id/circleImageView"
        android:layout_alignLeft="@+id/circleImageView"
        android:layout_alignRight="@+id/circleImageView"

    // then center it to the center of the circleImageView
    android:gravity="center"
    // color the text
    android:textColor="#f25019"
        tools:text="100"/>

// Step 2. Now lets move the whole thing around and give it padding so it looks nice and centered.
// Go to the top:

<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"
        // add padding
                android:paddingLeft="64dp"
                android:paddingRight="32dp"
                android:paddingTop="4dp"
                android:paddingBottom="4dp"
                >


//  Step 3. add android:paddingLeft="10dp" to dayNameLabel and iconImageView ]
//  to spread the icon and texts out a bit to look nicer. [**]

// 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"
                android:paddingLeft="64dp"
                android:paddingRight="32dp"
                android:paddingTop="4dp"
                android:paddingBottom="4dp"
                >

    <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"
        android:paddingLeft="10dp" // [**]
        />

    <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"
        android:paddingLeft="10dp" // [**]
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/temperatureLabel"
        android:layout_alignTop="@+id/circleImageView"
        android:layout_alignBottom="@+id/circleImageView"
        android:layout_alignLeft="@+id/circleImageView"
        android:layout_alignRight="@+id/circleImageView"
        android:gravity="center"
        android:textColor="#f25019"
        tools:text="100"/>

</RelativeLayout>

// this would look pretty good on most devices.
// But we can't test it until we create a custom adapter that allows us to attach
// our data to each item.
// That's coming up next