diff --git a/concept_lessons/_android_activity.html.md b/concept_lessons/_android_activity.html.md
index c026ac3..e3e6741 100644
--- a/concept_lessons/_android_activity.html.md
+++ b/concept_lessons/_android_activity.html.md
@@ -129,19 +129,3 @@ Now once you saw onRestart, just press the back button, this will exit your appl
Summarizing the chapter, you understood why an Activity Lifecycle exists, what is its importance and what are the different Lifecycle states which an activity goes through.
-
-
-Great ! Now that you have learned about Activities, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
diff --git a/concept_lessons/_android_hello_world.html.md b/concept_lessons/_android_hello_world.html.md
index 96a2cf5..c788aed 100644
--- a/concept_lessons/_android_hello_world.html.md
+++ b/concept_lessons/_android_hello_world.html.md
@@ -293,19 +293,3 @@ DDMS also comes with a nice tool of emulator control, this option lets you contr
* Mock GPS location to test your application if it is using GPS
In this chapter, we have learned how to create hello world application and how to launch the same using emulator. Also we saw how to create a virtual device. We also got to learn about the android project folder structure and had a glimpse of the tool to assist us in the faster development.
-
-
-
-Great ! Now that you have completed this chapter, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
diff --git a/concept_lessons/_android_intent.html.md b/concept_lessons/_android_intent.html.md
index 0509784..5fbb5ff 100644
--- a/concept_lessons/_android_intent.html.md
+++ b/concept_lessons/_android_intent.html.md
@@ -52,6 +52,9 @@ This is a simple example of an share Android Intent. This is typically used when
Let us now observe a couple of examples to see how Intent works, how you pass data and how you use Implicit Intents to delegate responsibilities to other apps.
+
+ <%= link_to "Go to hands on tutorial on Intent", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(42).lesson.token), class: "btn btn-success btn-large" %>
+
##Android Intent Example
@@ -105,6 +108,9 @@ Lets see the example code
Here we create the bundle object and put our data using various methods like putString, putBoolean etc.
+
+ <%= link_to "Go to hands on tutorial on Passing Data over Intent", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(45).lesson.token), class: "btn btn-success btn-large" %>
+
###Retrieving Data
@@ -128,6 +134,7 @@ Once you get hold of this Intent object, you can call different methods to get t
<%= image_tag "android_intents/intents.png", alt: "Intenets", title: "Implicit Intenets" %>
+
###Opening Other App
So far we have seen how to open one activity from another and how to pass and consume data. Let us now see an example as how to open other apps from our app.
@@ -154,18 +161,3 @@ Similar to opening webpage we have shareData method in which you can see how we
In this chapter, we have seen how we can use android intent to communicate between different activities or to pass data. Also, we now know how to use Intents for opening other applications from our app.
-
-
-Great ! Now that you have know about intents, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
diff --git a/concept_lessons/_android_introduction.html.md b/concept_lessons/_android_introduction.html.md
index 4d99fa6..1372ecc 100644
--- a/concept_lessons/_android_introduction.html.md
+++ b/concept_lessons/_android_introduction.html.md
@@ -32,7 +32,10 @@ This is usually referred to as the launcher Activity or the main Activity too.
* Every Android app has a Manifest.xml where all Activites are defined and one Activity is marked as Main Activity. One of the most common error developers commit when they start with Android development is forgetting to add a new Activity in Mainfest.xml file.
-As a developer, Activity is a Java class file where you write the logic. Activity does not include the UI. Rather, one of the things you need to write in your Activity logic is - which UI to show.
+As a developer, Activity is a Java class file where you write the logic. Activity does not include the UI. Rather, one of the things you need to write in your Activity logic is - which UI to show.
+
+ <%= link_to "Go to hands on tutorial on Acitivity", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(4).lesson.token), class: "btn btn-success btn-large" %>
+
## User Interface / Views
@@ -62,7 +65,9 @@ UI is defined as XML. The top XML element is a Layout element . Inside it, there
You may read more about Layouts & Views in our <%= link_to "Layout Concept Lesson", android_concept_lesson_path("android-layout") %> & <%= link_to "View Concept Lesson", android_concept_lesson_path("android-views") %>.
-
+
+ <%= link_to "Go to hands on tutorial on Android UI", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(4).lesson.token), class: "btn btn-success btn-large" %>
+
## Intents
To move from one Activity to another (or one screen to another), on user interaction like click of a button or click of a notification item, Intents are used. It is possible to pass data including whole objects with Intent. Using Intent you can also open another Android application.
@@ -73,6 +78,9 @@ With Activity, Views and Intent; you can create a basic Android app. Lots of app
Let’s look into some of the advanced Android concepts.
+
+ <%= link_to "Go to hands on tutorial on Intents", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(42).lesson.token), class: "btn btn-success btn-large" %>
+
## Services
Have you ever listened to Music on your phone? Have you observed that the music continues to play in the background when you go to the home screen from the Music app or close the app?
@@ -220,20 +228,3 @@ Typically you never access a database directly. Instead Twitter app may be using
<%= image_tag "android-introduction/notifications.png" %>
-
-
-Great ! Now that you have completed this chapter, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
-
diff --git a/concept_lessons/_android_layout.html.md b/concept_lessons/_android_layout.html.md
index c3ce4fa..b1ba129 100644
--- a/concept_lessons/_android_layout.html.md
+++ b/concept_lessons/_android_layout.html.md
@@ -46,6 +46,7 @@ For any view/viewgroup we need to specify its width & height. If not specified,
LinearLayout can be used in vertical or horizontal fashion. We can set the orientation of the layout by setting the `android:orientation` attribute.
+
### Horizontal Orientation
`Horizontal`
@@ -99,6 +100,9 @@ Save the file & deploy your Android app. You will see the screenshot as shown be
Linear Layout vertical alignment screenshot
+
+ <%= link_to "Go to hands on tutorial on Android UI", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(4).lesson.token), class: "btn btn-success btn-large" %>
+
## Android Relative Layout
@@ -108,6 +112,7 @@ Relative layout is one of the basic layouts available to design UI in Android. I
In this layout, you can specify the child layouts w.r.t its sibling or parent. One or more of the following attributes must be set for every view. Otherwise, the views will be rendered one over another in the **top left** region of the RelativeLayout.
+
### Position relative to container/parent
@@ -126,6 +131,7 @@ To position an element at the horizontal center, **layout_centerHorizontal** is
Similarly, **layout_centerVertical** positions the element vertically at the center. **layout_centerInParent** is layout_centerVertical & layout_centerHorizontal combined.
+
### Position relative to sibling
You can position an element relative to another element in the layout. To refer to an element, it must have a unique ID. This can be assigned using the **android:id** attribute. The attribute can be used to reference the child element against which the positioning needs to be done. More about ids are discussed in the later part of this article.
@@ -134,6 +140,8 @@ You can position an element relative to another element in the layout. To refer
Apart from it, there is **layout_above & layout_below**. The names are self explanatory.
+
+
### Android Relative Layout Example
[Download this sample project](https://github.com/codelearn-org/android-relative-layout-example/archive/master.zip) , import in Eclipse & navigate to [activity_relative_layout.xml](https://github.com/codelearn-org/android-relative-layout-example/tree/master/res/layout) file as shown in the screenshot below.
@@ -191,6 +199,10 @@ The date field '26 Nov 2013' is again a TextView element aligned to the right of
.
/>
+
+ <%= link_to "Go to hands on tutorial on Android UI", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(4).lesson.token), class: "btn btn-success btn-large" %>
+
+
## Choosing between Linear & Relative Layout
An important consideration when dealing with layout elements is when is it good to use which layout element. The **LinearLayout** is optimized for
@@ -314,6 +326,10 @@ This behavior is similar to how HTML table behaves.
+
+ <%= link_to "Go to hands on tutorial on Android UI", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(4).lesson.token), class: "btn btn-success btn-large" %>
+
+
## Invoking Layout from Activity
In each demo we have created a layout and now let us see how this can be used in the Activity. Images, layout files and other application assets stored in the **res** folder are referred as resources in Android. The Android framework creates a unique id for each resource and this exact id can be used to refer to these resources.
@@ -367,20 +383,3 @@ You can specify width and height with exact measurements, though you probably wo
In general, specifying a layout width and height using absolute units such as pixels is not recommended. Instead, using relative measurements such as density-independent pixel units (dp), wrap_content, or fill_parent, is a better approach, because it helps ensure that your application will display properly across a variety of device screen sizes.
-
-
-Great ! Now that you know about Layouts, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
-
diff --git a/concept_lessons/_android_listview.html.md b/concept_lessons/_android_listview.html.md
index a65a8dc..af0dfda 100644
--- a/concept_lessons/_android_listview.html.md
+++ b/concept_lessons/_android_listview.html.md
@@ -133,6 +133,9 @@ If you notice in the above example, we have used Android.R.Layout item. This is
* simple_list_item_single_choice : A List Item with a radio button after textView. You can use this when you want to get a choice from the user.
* simple_list_item_multiple_choice: A List Item with a Check Box after textview. You can use this when you want to get multiple choices from the user.
+
+ <%= link_to "Go to hands on tutorial on List View", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(43).lesson.token), class: "btn btn-success btn-large" %>
+
##Custom ListView with BaseAdapter
@@ -408,6 +411,9 @@ This is how the ListView will look when you run it:
<%= image_tag "list_view/Custom_Base_adapter.png", alt: "Android Listview Custom Adapter", title: "Custom Adapter" %>
+
+ <%= link_to "Go to hands on tutorial on Custom List View", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(43).lesson.token), class: "btn btn-success btn-large" %>
+
##ListView Click Listener
@@ -444,6 +450,9 @@ This is how our click listener looks like :
Now you get a fair understanding of how ListView works in Android. Let's See Some more tricks which can help you
+
+ <%= link_to "Go to hands on tutorial on List View Click Listener", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(43).lesson.token), class: "btn btn-success btn-large" %>
+
##ListActivity
@@ -493,19 +502,4 @@ You can view the ListActivity example in the sample project that you downloaded.
>Watchout: ListActivity works well if you have only single ListView. In case you have more than one Android listview, you need to put extra code for the other ListView to work.
You can download the sample app from [here](https://github.com/pranayairan/Code-Learn-Android-Example/tree/master/CodeLearnListExample)
-
-Great ! Now that you know about ListView, It's time to see it in Action by trying our App Tutorial
-
-
-
-
diff --git a/concept_lessons/_android_log.html.md b/concept_lessons/_android_log.html.md
index a77f879..483b98d 100644
--- a/concept_lessons/_android_log.html.md
+++ b/concept_lessons/_android_log.html.md
@@ -123,20 +123,4 @@ The save button next to the log level selection button lets you save the logs in
You can launch LogCat from command line with `adb` command or through a remote adb shell. You should probably head over to [offical Android docs on Logcat](http://developer.android.com/tools/debugging/debugging-log.html#startingLogcat) for this.
-
-
-Great ! Now that you have completed this chapter, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
diff --git a/concept_lessons/_android_setup.html.md b/concept_lessons/_android_setup.html.md
index cc2142d..0949355 100644
--- a/concept_lessons/_android_setup.html.md
+++ b/concept_lessons/_android_setup.html.md
@@ -97,21 +97,3 @@ Now that you have your Android IDE up and running, follow the video integrated a
Great then ! You can proceed to the next chapter for creating your first hello world application !
> Caution : For Windows 8 , the installation instruction doesn't change much, but sometimes you might encounter some problem in correctly running the ADT. This is mostly due to incorrect installation of the JDK, make sure you install the correct version of JDK by choose the correct version (32-bit or 64 bit).
-
-
-
-Great ! Now that you have completed this chapter, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
-
diff --git a/concept_lessons/_android_views.html.md b/concept_lessons/_android_views.html.md
index f40e46c..84f51e2 100644
--- a/concept_lessons/_android_views.html.md
+++ b/concept_lessons/_android_views.html.md
@@ -292,6 +292,9 @@ Add listener
});
In the above code, you add a click listener to the button. Whenever the button is clicked , the onclick method of button is called.
+
+ <%= link_to "Go to hands on tutorial on Click Listener", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(41).lesson.token), class: "btn btn-success btn-large" %>
+
###Code
This is how a button will look in XML code
@@ -521,6 +524,10 @@ The ListView is widely used in android applications. A simpler example of list v
> Listview is a complex UI pattern, and we have a separate section about listview. You can read more about list view in ListView Section
+
+ <%= link_to "Go to hands on tutorial on ListView", app_tutorial_module_with_token_path("twitter", LessonModule.find_by_lesson_number(43).lesson.token), class: "btn btn-success btn-large" %>
+
+
##GridView
###What
@@ -634,19 +641,3 @@ This is how our complete scroll view will look
Android has a lot of UI elements which are designed for specific purposes, in this chapter we tried to cover some of the most used UI elements. If you want to read more about other UI controls, you can go to [this link](http://developer.android.com/guide/topics/ui/index.html)
-
-
-Great ! Now that you have completed this chapter, you can proceed to attempt Codelearn's Twitter App Tutorial
-
-
-
-
diff --git a/twitter-client-tutorial/_android_list_view_intro.html.md b/twitter-client-tutorial/_android_list_view_intro.html.md
index aadc638..f4bead1 100644
--- a/twitter-client-tutorial/_android_list_view_intro.html.md
+++ b/twitter-client-tutorial/_android_list_view_intro.html.md
@@ -1,4 +1,3 @@
-# Designing List of Tweet Screen
We successfully hooked 'No Tweet Found' screen after the login screen in the previous lesson. In this lesson, we will remove the 'No Tweet Found' message & populate the screen with a dummy tweet list. As usual, we will use some placeholder data to show some dummy list content.
diff --git a/twitter-client-tutorial/_android_login_button_listener.html.md b/twitter-client-tutorial/_android_login_button_listener.html.md
index eb88079..188ead6 100644
--- a/twitter-client-tutorial/_android_login_button_listener.html.md
+++ b/twitter-client-tutorial/_android_login_button_listener.html.md
@@ -1,4 +1,3 @@
-# Adding Listener to Login Button
So far, we just have the interface of the login screen. As per plan, we will simply move to the next Activity when Login button is pressed. We will not capture any login information for now. Once we are done with our first iteration, we will revisit the Login Activity & add capturing of login information & validation of the user.
diff --git a/twitter-client-tutorial/_android_login_password_and_button.html.md b/twitter-client-tutorial/_android_login_password_and_button.html.md
index 32f860c..24377ba 100644
--- a/twitter-client-tutorial/_android_login_password_and_button.html.md
+++ b/twitter-client-tutorial/_android_login_password_and_button.html.md
@@ -1,4 +1,3 @@
-# Add Password & Login button
In the previous lesson, we added Username label & input field. For the password, we will simply replicate the LinearLayout for the Password label & input field.
diff --git a/twitter-client-tutorial/_android_login_screen_add_username_password.html.md b/twitter-client-tutorial/_android_login_screen_add_username_password.html.md
index 4bb40be..284c0c6 100644
--- a/twitter-client-tutorial/_android_login_screen_add_username_password.html.md
+++ b/twitter-client-tutorial/_android_login_screen_add_username_password.html.md
@@ -1,4 +1,3 @@
-# Adding Username label & input field
In the previous lesson, we got the header in place. In this lesson, we will add the input fields namely username & password.
diff --git a/twitter-client-tutorial/_android_login_screen_layout.html.md b/twitter-client-tutorial/_android_login_screen_layout.html.md
index 512e7b5..8b14e92 100644
--- a/twitter-client-tutorial/_android_login_screen_layout.html.md
+++ b/twitter-client-tutorial/_android_login_screen_layout.html.md
@@ -1,4 +1,3 @@
-# Login Screen Layout
So far, we already have a hello world application. In the earlier lesson, we have seen how the control starts from the `onCreate` method of the **MainActivity.java** file and how it renders the layout defined in **activity_main.xml** .
diff --git a/twitter-client-tutorial/_android_login_style_elements.html.md b/twitter-client-tutorial/_android_login_style_elements.html.md
index ef3b539..c4f94bf 100644
--- a/twitter-client-tutorial/_android_login_style_elements.html.md
+++ b/twitter-client-tutorial/_android_login_style_elements.html.md
@@ -1,4 +1,3 @@
-# Styling Login Screen Elements
So far we have focussed on positioning the elements but ignored the width & height of the elements. We will address those issues in this lesson.
diff --git a/twitter-client-tutorial/_android_tweet_detail_activity.html.md b/twitter-client-tutorial/_android_tweet_detail_activity.html.md
index 27cd001..a616546 100644
--- a/twitter-client-tutorial/_android_tweet_detail_activity.html.md
+++ b/twitter-client-tutorial/_android_tweet_detail_activity.html.md
@@ -1,4 +1,3 @@
-# Tweet Detail Activity Screen
In the previous lesson, we implemented click listener for each tweet. Ideally, clicking on a tweet should show the tweet detail screen. In this lesson, we will be creating new Activity TweetDetailActivity & show the Activity on click of tweet item through intent.
diff --git a/twitter-client-tutorial/_android_tweet_item_click.html.md b/twitter-client-tutorial/_android_tweet_item_click.html.md
index 08d7b71..6c999ce 100644
--- a/twitter-client-tutorial/_android_tweet_item_click.html.md
+++ b/twitter-client-tutorial/_android_tweet_item_click.html.md
@@ -1,4 +1,3 @@
-# Click Listener for individual tweet item
In the previous lesson, we integrated the custom layout row_tweet.xml with the ListView. The next step is to view each tweet in detail when the tweet item is clicked. For the detail screen, we will need a new Activity. We'll do that in a subsequent lesson. In this lesson, we'll see how to enable & capture click event for each item in a ListView.
diff --git a/twitter-client-tutorial/_android_tweet_list_activity.html.md b/twitter-client-tutorial/_android_tweet_list_activity.html.md
index db03b91..8a233aa 100644
--- a/twitter-client-tutorial/_android_tweet_list_activity.html.md
+++ b/twitter-client-tutorial/_android_tweet_list_activity.html.md
@@ -1,4 +1,3 @@
-# Layout for Tweet
In last lesson, we learnt how to show up a ListView with dummy data. We need the tweet list to look like as below
diff --git a/twitter-client-tutorial/_android_tweet_list_custom_layout.html.md b/twitter-client-tutorial/_android_tweet_list_custom_layout.html.md
index d0a3aad..19f232d 100644
--- a/twitter-client-tutorial/_android_tweet_list_custom_layout.html.md
+++ b/twitter-client-tutorial/_android_tweet_list_custom_layout.html.md
@@ -1,4 +1,3 @@
-# Custom Layout for individual tweet
In the last lesson, we learnt how to show a basic ListView with one line data. We need the tweet list to look like the image below
diff --git a/twitter-client-tutorial/_android_tweet_list_hooking_custom_layout.html.md b/twitter-client-tutorial/_android_tweet_list_hooking_custom_layout.html.md
index b71517b..7078fc5 100644
--- a/twitter-client-tutorial/_android_tweet_list_hooking_custom_layout.html.md
+++ b/twitter-client-tutorial/_android_tweet_list_hooking_custom_layout.html.md
@@ -1,4 +1,3 @@
-# Hooking Custom Layout to Tweet List View
In the last lesson, we created a custom layout for a Tweet but our Tweet List will still show up as a basic list with one entry per line.
diff --git a/twitter-client-tutorial/_android_tweet_list_item_click.html.md b/twitter-client-tutorial/_android_tweet_list_item_click.html.md
index 0fa1216..ea99d2a 100644
--- a/twitter-client-tutorial/_android_tweet_list_item_click.html.md
+++ b/twitter-client-tutorial/_android_tweet_list_item_click.html.md
@@ -1,4 +1,3 @@
-# Attaching click listener to individual tweets
In previous lesson, we are able to get the kind of layout we designed for the list of tweet screen. Clicking on a tweet item should show the tweet detail in a new Activity. In this lesson, we will put the click listener on each tweet item.
diff --git a/twitter-client-tutorial/_android_tweet_list_layout_part_2.html.md b/twitter-client-tutorial/_android_tweet_list_layout_part_2.html.md
index 82fb8ab..642a0ee 100644
--- a/twitter-client-tutorial/_android_tweet_list_layout_part_2.html.md
+++ b/twitter-client-tutorial/_android_tweet_list_layout_part_2.html.md
@@ -1,4 +1,3 @@
-# Layout for Tweet List - Part 2
In last lesson we added just the ImageView in the row_tweet.xml . We need to add child LinearLayout with its own children.
diff --git a/twitter-client-tutorial/_asynctask_intro_networkcall.html.md b/twitter-client-tutorial/_asynctask_intro_networkcall.html.md
index ef8b344..b5fd17c 100644
--- a/twitter-client-tutorial/_asynctask_intro_networkcall.html.md
+++ b/twitter-client-tutorial/_asynctask_intro_networkcall.html.md
@@ -1,4 +1,3 @@
-# AsyncTask intro
AsyncTask class lets us execute things in parallel. It is like spawning a new thread which does things in parallel & exits silently when the tasks are done. It is important not to *block* the main Activity thread.
diff --git a/twitter-client-tutorial/_asynctask_show_new_tweets.html.md b/twitter-client-tutorial/_asynctask_show_new_tweets.html.md
index 000c2b0..724e132 100644
--- a/twitter-client-tutorial/_asynctask_show_new_tweets.html.md
+++ b/twitter-client-tutorial/_asynctask_show_new_tweets.html.md
@@ -1,4 +1,3 @@
-# Show tweets after AsyncTask
The AsyncTask we created in previous lesson is simply simulating a network call to fetch new tweets. In case of an actual network call, new tweets will be fetched and we should update the tweet list screen to show them.
diff --git a/twitter-client-tutorial/_asynctask_tweets_write_new_asynctask.html.md b/twitter-client-tutorial/_asynctask_tweets_write_new_asynctask.html.md
index 453b215..ffa020d 100644
--- a/twitter-client-tutorial/_asynctask_tweets_write_new_asynctask.html.md
+++ b/twitter-client-tutorial/_asynctask_tweets_write_new_asynctask.html.md
@@ -1,4 +1,3 @@
-# Moving writing of tweets to new AsyncTask
As mentioned earlier, reading & writing from files are slightly elaborate tasks & should be done in a separate thread to avoid affecting the main Activity flow.
diff --git a/twitter-client-tutorial/_button_click_listener_module.html.md b/twitter-client-tutorial/_button_click_listener_module.html.md
new file mode 100644
index 0000000..9d1526a
--- /dev/null
+++ b/twitter-client-tutorial/_button_click_listener_module.html.md
@@ -0,0 +1,4 @@
+
+If you have followed our Twitter App tutorial so far, you have built a login screen with some basic Layouts & View elements. You have added a login button but it does nothing.
+
+We are going to add click functionality to the button. We have created this module specifically for introducing **Click Listener** . As an Android developer, this is the first time you will be dealing with a *callback code snippet* which gets executed when a button is clicked.
diff --git a/twitter-client-tutorial/_hello_world.html.md b/twitter-client-tutorial/_hello_world.html.md
index 8a78530..6e670ad 100644
--- a/twitter-client-tutorial/_hello_world.html.md
+++ b/twitter-client-tutorial/_hello_world.html.md
@@ -1,6 +1,5 @@
-# Hello World
-If you have not setup our Virtual Assistant so far, kindly click the *Go to setup* button on the right. Now in the setup lesson we have the Android Hello World app running, let's understand the Android app control flow a bit. We have created a screencast for you to help you understand the flow faster.
+If you have not setup our Virtual Assistant so far, kindly click the *Go to setup* button on the right. In the setup steps, you would be created a new **CodelearnTwitterApp** which has an Android Hello World app running. The app is similar to the default Android Hello World app that would create from Android ADT. Let's understand the Android app control flow a bit. We have created a screencast for you to help you understand the flow faster.
To understand the building blocks of Android apps, refer the <%= link_to "Android Introduction concept lesson", android_concept_lesson_path("android-introduction"), target: "_blank" %>
@@ -10,10 +9,8 @@ If you have not setup our Virtual Assistant so far, kindly click the *Go to setu
-
-
-Change the text of string @hello_world in strings.xml and 'Run' the project in Eclipse in order to move to next lesson.
-
-
+## Assignment
+If you understand the control flow in the Hello World app, here is an assignment for you.
+Change the 'Hello World' text on the screen to 'This is Sparta' (or any other text) as instructed in the screencast.
diff --git a/twitter-client-tutorial/_hello_world_module.html.md b/twitter-client-tutorial/_hello_world_module.html.md
new file mode 100644
index 0000000..bfe1b06
--- /dev/null
+++ b/twitter-client-tutorial/_hello_world_module.html.md
@@ -0,0 +1,32 @@
+
+In this tutorial, **you will build a Twitter App from scratch**. Our intent is to show the complete lifecycle of an app from scratch to production. The unique thing about this tutorial is - *you learn by building an app rather reading about the concepts*. We tried to keep the flow as close as possible to how real developers develop real apps.
+
+## Why you should learn from us
+
+It could be daunting for a total newbie to get into Android app development from day 1. To keep things simple & progressive, our App Tutorial flow is created such that :-
+
+1. **Easier concepts first, difficult concepts later **
+
+ Features required easier concepts are built earlier while the features requiring difficult concepts are pushed later. For example, we start with building the UI as it involves basic concepts like Activity & Layout, while pushing features like new tweet notification for later (work in progress).
+
+
+2. **App features tweaked for optimal & gradual learning**
+
+ If a feature is combination of multiple concepts involving some of the advanced ones, we break down the feature such that we do a sub-optimal build of the feature. For example, while introducing AsyncTask for network calls, we ask users to simulate the network call using a `Thread.sleep(..)` so that users can focus on just AsyncTask.
+
+3. **Small learning per lesson to avoid information overload**
+
+ Each module is broken down into lessons such that the lessons has just enough feature for you to focus only on one concept (or part of concept) at a time. This is also done to ensure that we are able to test the feature & pin-point you of the exact error which we would probably not able to do if it is a bigger feature involving multiple concepts.
+
+4. **Get your app evaluated at every lesson **
+
+ You get to build & get your app tested at every lesson through our Eclipse plugin which we also call Virtual Assistant. So you dont just learn by doing, you learn by building a real app with instant app evaluation. Our aim is to enhance our Virtual Assistant to the level that it should be able to hint & guide you based on your learning capabilities. As for now, it simply tells you the error message of the test that fails when it evaluates your app.
+
+5. **Newbie friendly language. Tutorial structured by experts but worded by learners**
+
+ The language of our tutorial is very beginner friendly. **A lot of our users have told us this point**. Most of the tutorials are created by experts. Our tutorial structure is created by experts but the actual tutorial content is created by newbies who learn from this tutorial & then replace the complex statements with easier to understand lines & also fill in any newbie friendly information which experts have missed.
+
+6. **Want to be a good developer ? Develop a lot of apps & not just your own**
+
+ We understand that you have your own app ideas that you like to work on & probably not like to build *yet another Twitter app*. The only way you can become a decent developer is by creating a lot of apps. This way, **you not only understand Android concepts, but also the engineering behind app creation** like how to conceptualize an app, how to break a big feature into smaller features etc. Going through complete app development lifecycle is an important learning which you can use in your own Android app.
+
diff --git a/twitter-client-tutorial/_import_codelearn_project.html.md b/twitter-client-tutorial/_import_codelearn_project.html.md
index 3a31854..c9ccc5b 100644
--- a/twitter-client-tutorial/_import_codelearn_project.html.md
+++ b/twitter-client-tutorial/_import_codelearn_project.html.md
@@ -1,15 +1,18 @@
-# Import Codelearn Twitter Challenge Project
+In this setup lesson, you will be provided with an app that you can download & try the current module. This is helpful if you are directly jumping to this module or if you have messed up your app somewhere & want to start afresh but not from the start of the Twitter App tutorial.
-In the previous level, we installed Codelearn Eclipse Plugin.
+> If you have been following our Twitter App tutorial from the start & has a perfectly running app at the end of the previous module, you may simply skip this setup lesson.
-Follow the steps below to import an Android project, which will be used by you for the rest of the challenge.
+1. <%= link_to "Download CodelearnTwitterApp project", download_import_project_zip_path(@current.lesson_module.lesson.token, @current.lesson.token) %> and import it in Eclipse. This is the app a user would have built if he has followed our tutorial till the end of the previous module.
-1. <%= link_to "Download CodelearnTwitterChallenge Eclipe project", download_import_project_zip_path(@current.lesson_module.lesson.token, @current.lesson.token) %> and import it in Eclipse.
+ Note that if you already have CodelearnTwitterApp project in your Eclipse, you will not be able to import this project in the workspace. You would either need to remove the previous project by deleting it or unzip the downloaded project & change the project name inside `CodelearnTwitterApp` in .project file & then import the project into Eclipse.
+
+ **Possible Error - Unable to resolve 'android-19'** - The CodelearnTwitterApp project takes the latest Android API by default. Most probably, you are seeing this as your Android SDK is old. Quick fix is - checkout the Android API version in [Android SDK Directory] -> sdk -> platforms directory & modify `target=19` in **project.properties** file to your Android API version.
+
+2. If this is your first time with Codelearn App tutorial, we would like to tell you about the Custom Eclipse Launcher that we have built to let you evaluate your app at the end of a tutorial lesson.
+
+ On the Eclipse project, **[right click on CodelearnTwitterApp] -> Run As -> Android App Codelearn ** or simply hit the **Run button** on the top of Eclipse which will show the popup below. *Remember to choose 'Android App Codelearn' option as against 'Android Application'*. The Launcher will do the normal Android App deployment & will send a copy of your app to our server for evaluation.
-2. From next lesson onwards you will be building your application on this imported project. So to run it from next lesson you can either choose to **[right click on CodelearnTwitterApp] -> Run As -> Android App Codelearn ** or simply hit the **Run button** on the top of Eclipse which will show the popup below. *Remember to choose 'Android App Codelearn' option as against 'Android Application'*. Now you can go to the next lesson.
<%= image_tag "twitter-client/plugin-newproject-run-menu.png", alt: "Codelearn Run Configuration", title: "Codelearn Run Configuration" %>
-## Possible Errors
-**1. Unable to resolve 'android-19'** - The CodelearnTwitterApp project takes the latest Android API by default. Most probably, you are seeing this as your Android SDK is old. Quick fix is - checkout the Android API version in [Android SDK Directory] -> sdk -> platforms directory & modify `target=19` in **project.properties** file to your Android API version.
diff --git a/twitter-client-tutorial/_iteration_1_plan.html.md b/twitter-client-tutorial/_iteration_1_plan.html.md
index 398bee2..f556179 100644
--- a/twitter-client-tutorial/_iteration_1_plan.html.md
+++ b/twitter-client-tutorial/_iteration_1_plan.html.md
@@ -1,10 +1,9 @@
-# Planning the app
-The first thing an app developer does before he starts building the app is to plan it. The first step is to create [mockups](http://en.wikipedia.org/wiki/Mockup#Software_Engineering). But since we are replicating an already existing app, we know how it will look. So we can bypass the mockup creation step.
+The first thing an app developer does before he starts building an app is to plan it. The first step is to create [mockups](http://en.wikipedia.org/wiki/Mockup#Software_Engineering). But since we are replicating an already existing app, we know how it will look. So we can bypass the mockup creation step.
A good way to start is by building the app skeleton (just the user interface).
-* The first time you open a Twitter app, it shows the login screen. So we will build the interface for it first.
+* The first time you open a Twitter app, it shows the login screen. So we will build its interface first.
<%= image_tag "twitter-client/login-screenshot.png", alt: "Login Screenshot", title: "Login Screenshot" %>
Login Interface Screenshot
@@ -22,3 +21,7 @@ A good way to start is by building the app skeleton (just the user interface).
Twitter Detail Screenshot
+
+In this module, you will be building the very basic User Interface (in short UI) of the login screen.
+
+> You will learn about using RelativeLayout, LinearLayout, EditText, TextView, various attributes of these XML elements & how you can twreak them to reach desired result in the view.
diff --git a/twitter-client-tutorial/_lesson_group_async_task.html.md b/twitter-client-tutorial/_lesson_group_async_task.html.md
index 3455186..2862d9e 100644
--- a/twitter-client-tutorial/_lesson_group_async_task.html.md
+++ b/twitter-client-tutorial/_lesson_group_async_task.html.md
@@ -1,4 +1,3 @@
-# Reading/Writing tweets with AsyncTask
Reading and writing tweets from/to file are time consuming tasks. These tasks should not be handled in the main thread so as not to give a *hung app* experience to the user.
diff --git a/twitter-client-tutorial/_lesson_group_shared_preference.html.md b/twitter-client-tutorial/_lesson_group_shared_preference.html.md
index e45cbb1..e119046 100644
--- a/twitter-client-tutorial/_lesson_group_shared_preference.html.md
+++ b/twitter-client-tutorial/_lesson_group_shared_preference.html.md
@@ -1,8 +1,6 @@
-# Storing login data in Shared Preference
In the real Twitter client, once you log in successfully, you will not see the login screen again. The app sends the username password information to the server, receives an authentication token & stores it locally in the phone. The next time you open the app, it checks for the authentication token & directly takes you to the tweet list screen.
We are introducing data handling in this module. The network calls will be introduced in the subsequent module. We make things a little sub-optmial. Instead of sending data to the server & getting an authentication token, we will simply store the username password from the login screen.
Warning: It is never a good idea to store passwords locally, plaintext or otherwise. But for the sake of this module, we overlook best practices to get a better understanding of SharedPreferences
-
diff --git a/twitter-client-tutorial/_lesson_group_tweets_from_file.html.md b/twitter-client-tutorial/_lesson_group_tweets_from_file.html.md
index 4598d86..dfb166d 100644
--- a/twitter-client-tutorial/_lesson_group_tweets_from_file.html.md
+++ b/twitter-client-tutorial/_lesson_group_tweets_from_file.html.md
@@ -1,4 +1,3 @@
-# Fetching/Writing tweets from/to local files
Now that we know how to show dynamic list of tweets, we are now going to go to the next level of storing the tweets in a local file & showing tweets from it.
diff --git a/twitter-client-tutorial/_login_page_intent_module.html.md b/twitter-client-tutorial/_login_page_intent_module.html.md
new file mode 100644
index 0000000..839e4e8
--- /dev/null
+++ b/twitter-client-tutorial/_login_page_intent_module.html.md
@@ -0,0 +1,26 @@
+
+In the last module, you implemented **Click Listener** on login page button which simply updated the button text. Ideally it should open a new screen which provides us the list of tweets.
+
+In this module, we are going to create a new Activity - TweetListActivity (we are going to build it too). This Activity will get launched when the user clicks the login button.
+
+
+
+
+
+You will learn how you can load a new Activity on the button click using **Intents**. Intent is the Android way of launching new Activity & even external apps from inside of an Android app. Usually Intent gets fired from button click, List item click or some other user interaction mechanism.
diff --git a/twitter-client-tutorial/_new_codelearn_project.html.md b/twitter-client-tutorial/_new_codelearn_project.html.md
index f352d9e..776e54e 100644
--- a/twitter-client-tutorial/_new_codelearn_project.html.md
+++ b/twitter-client-tutorial/_new_codelearn_project.html.md
@@ -1,4 +1,3 @@
-# Creating A New Codelearn Twitter Project
In the previous lesson, we installed Codelearn Eclipse Plugin. Instead of following the regular process of creating a New Android project, the plugin comes with a **Codelearn Twitter App** project pre-bundled. **When you create a new Android project, it asks for quite a few parameters which is confusing for a newbie. We have condensed all those steps by providing default values.**
diff --git a/twitter-client-tutorial/_no_tweet_activity_after_login.html.md b/twitter-client-tutorial/_no_tweet_activity_after_login.html.md
index d19f621..7889648 100644
--- a/twitter-client-tutorial/_no_tweet_activity_after_login.html.md
+++ b/twitter-client-tutorial/_no_tweet_activity_after_login.html.md
@@ -1,4 +1,3 @@
-# Hooking up Login to 'No Tweet Found' Activity
We created a login button listener which simply updated the button label to 'I am Clicked' from 'Login'. Ideally, post login, the user should be able to see the tweets. We need to create a new Activity for that. Let us just create an empty Activity which showed 'No Tweets found'.
diff --git a/twitter-client-tutorial/_plugin_installation.html.md b/twitter-client-tutorial/_plugin_installation.html.md
index a97d18c..e3e537b 100644
--- a/twitter-client-tutorial/_plugin_installation.html.md
+++ b/twitter-client-tutorial/_plugin_installation.html.md
@@ -1,4 +1,3 @@
-# Setup Virtual Assistant in 5 minutes
To assist you better during the development cycle, we have created an Eclipse plugin that tests your app at every step to ensure you are doing it right. Our intent is to be able to show you very relevant error messages (& possible solution).
@@ -9,7 +8,7 @@ Download Android SDK from [official Android SDK download page](http://developer.
> You need to have the latest Android SDK installed on your computer. Ignore this step if you already have the latest SDK.
-
Once a lesson is complete, the <%= link_to "Next >", "#", class: "btn btn-inverse" %> button at the bottom of the lesson gets activated. Also a green bar with <%= link_to "< Prev", "#", class: "btn btn-inverse" %> & <%= link_to "Next >", "#", class: "btn btn-inverse" %> buttons appear on the top of the lesson with a message telling that you have completed the lesson.
More elaborate setup instructions are available in the <%= link_to "Android Setup page", android_concept_lesson_path("android-setup") %>
diff --git a/twitter-client-tutorial/_reading_tweets_from_file.html.md b/twitter-client-tutorial/_reading_tweets_from_file.html.md
index 7acd321..cbe360e 100644
--- a/twitter-client-tutorial/_reading_tweets_from_file.html.md
+++ b/twitter-client-tutorial/_reading_tweets_from_file.html.md
@@ -1,4 +1,3 @@
-# Reading tweets from local file
There are only three lines that are different while reading from a local file as against writing.
diff --git a/twitter-client-tutorial/_shared_pref_modify_login_flow.html.md b/twitter-client-tutorial/_shared_pref_modify_login_flow.html.md
index d527103..ea60f24 100644
--- a/twitter-client-tutorial/_shared_pref_modify_login_flow.html.md
+++ b/twitter-client-tutorial/_shared_pref_modify_login_flow.html.md
@@ -1,4 +1,3 @@
-# Do not show login screen again
A real twitter app does not show login screen after you have already logged in. On subsequent visits, it directly takes you to the tweet list screen as soon as you open the app.
diff --git a/twitter-client-tutorial/_shared_pref_reading_login_data.html.md b/twitter-client-tutorial/_shared_pref_reading_login_data.html.md
index 50ea24d..a000062 100644
--- a/twitter-client-tutorial/_shared_pref_reading_login_data.html.md
+++ b/twitter-client-tutorial/_shared_pref_reading_login_data.html.md
@@ -1,4 +1,3 @@
-# Reading Login data from the View
## Recap from module 1
diff --git a/twitter-client-tutorial/_shared_pref_writing_login_data.html.md b/twitter-client-tutorial/_shared_pref_writing_login_data.html.md
index 511c2b3..5b1d0dd 100644
--- a/twitter-client-tutorial/_shared_pref_writing_login_data.html.md
+++ b/twitter-client-tutorial/_shared_pref_writing_login_data.html.md
@@ -1,4 +1,3 @@
-# Writing login data to Shared Preference
Shared Preference is a good place to store app-specific data. It is the easiest form of local storage available in an Android app. SharedPreference uses a simple key-value pair format to store and retrieve data. Because it is meant for simple data, SharedPreference does not support storing complex Objects.
diff --git a/twitter-client-tutorial/_tweet_detail_data_from_intent.html.md b/twitter-client-tutorial/_tweet_detail_data_from_intent.html.md
index b0b502a..23c301f 100644
--- a/twitter-client-tutorial/_tweet_detail_data_from_intent.html.md
+++ b/twitter-client-tutorial/_tweet_detail_data_from_intent.html.md
@@ -1,4 +1,3 @@
-# Passing data over Intent to Tweet Detail Screen
Each tweet item shows different tweet data. But clicking on a tweet item still shows the same old **activity_tweet_detail.xml** with the data hardcoded in the XML.
diff --git a/twitter-client-tutorial/_tweet_list_dynamic_data.html.md b/twitter-client-tutorial/_tweet_list_dynamic_data.html.md
index b73f9a0..f3978e3 100644
--- a/twitter-client-tutorial/_tweet_list_dynamic_data.html.md
+++ b/twitter-client-tutorial/_tweet_list_dynamic_data.html.md
@@ -1,4 +1,3 @@
-# Dynamic Data for Tweet List Screen
We are done storing login data from previous lessons. It is time to handle data for Tweet List Screen.
@@ -6,5 +5,4 @@ In this module, we will add the feature - each tweet item should have different
> In this module, you will going to learn how to access & modify data in a ListView & best practices of storing data using models in Java/Android.
-
diff --git a/twitter-client-tutorial/_tweet_list_dynamic_data_tweet_model.html.md b/twitter-client-tutorial/_tweet_list_dynamic_data_tweet_model.html.md
index 79b9305..00c8183 100644
--- a/twitter-client-tutorial/_tweet_list_dynamic_data_tweet_model.html.md
+++ b/twitter-client-tutorial/_tweet_list_dynamic_data_tweet_model.html.md
@@ -1,67 +1,79 @@
-# Using Tweet Model in ListView
-In the previous lesson, we created a Tweet Model. In this lesson, we are going to populate it with dummy data & then use its content to show up on TweetListActivity.
+##Recap from module 1
-## Step 1 - Array of tweets initialization
+In module 1, each tweet item had dummy data and its appearance was based on row_tweet.xml. We also created a TweetListAdapter with a `getView()` method which simply inflated the resource xml
-We will be holding a lot of tweets at a given time. So we need an array of Tweet model objects.
+`TweetAdapter.java`
- List tweets = new ArrayList();
+ public class TweetAdapter extends ArrayAdapter {
+ .
+ .
+ @Override
+ public View getView(int position, View convertView, ViewGroup parent){
+ return inflater.inflate(R.layout.row_tweet, parent, false);
+ }
-While `List` is a generic array class in java (also called interface), `ArrayList` is simply an array implementation of List interface. Putting a `` typecasts it to an array of our Tweet class.
+ }
-## Step 2 - Populating the array
+Because of the above step, all tweet items looked the same. In real life, each tweet item will hold a different value that comes from the twitter server. Since we are not doing network calls yet, we will populate some dummy but different data.
-Presently, we create random data inside getView() when the user visits the TweetListActivity. Since we've created a new Tweet model, we will iterate over the Tweet objects, get each element's value like header, date, body etc & set the appropriate field in the inflated View.
+The steps we are going to follow :-
-We don't have any tweets yet, so `tweets` will be empty. You can populate it with the code snippet below.
+**1. New Tweet model to hold data **
- for ( int i = 0; i < 20; i++ ) {
- Tweet tweet = new Tweet();
- tweet.setTitle("A nice header for Tweet # " +i);
- tweet.setBody("Some random body text for the tweet # " +i);
- tweets.add(tweet);
- }
+Good programming practice in Java mandates that any kind of data should be held in a Class. It is also referred as Model of Model View Controller architecture. Consider the Activity classes as Controllers & XML as Views. We will create a new class Tweet.java which will hold the tweet data.
-The code above will put 20 Tweet objects in `tweets` array. We are using **setTitle()** and **setBody()** functions that we created in Tweet model in the previous lesson.
+**2. Populating the Tweet model **
-## Step 3 - Populating ListView with tweets array
+In a real Twitter app, data would be fetched from the network. Since we are not doing network call here, we are just going to put some dummy data in our Tweet model.
-Now that we have populated the tweets array, we need to show the data it holds on the ListView.
+**3. Using Tweet model to show data on screen **
-A quick recap. Data is passed to the ListView through an Adapter. We had the below code in TweetListActivity.java .
+We are then going to pass the tweet model array to TweetAdapter & change the code to use the model data to show on the screen.
-
tweetItemArrayAdapter = new TweetAdapter(this, new String[10]);
+## Creating Tweet Model
-We were not actually passing any data to the Adapter. Just the size of the String array is used by the Adapter to create 10 tweet entries. Now we will be passing `tweets` array to TweetAdapter which will in-turn be used in getView() method to set the title, body & date in inflated View.
+When we will do network calls to fetch tweets, all the tweets will have uniform structure. Each tweet will have an image, twitter handle, body, date etc. In Java, it is a good practice to create a Java class for this. Such an object is also known as **P**lain **O**ld **J**ava **O**bject (POJO) in Java. We can store multiple tweets as array of the Tweet object.
-We also need to modify **getView()** method to use the tweets array. The method `getView()` returns an object of type View. Before returning the View, the content of the inflated View can be modified by accessing elements of the View using `findViewById()` method and setting the text using `setText(..)`.
+### Assignment - create Tweet model
-### Assignment
+** 1. Create Tweet.java **
-**step 1 **
-Implement step 1 to instantiate array of tweets. You should have it as private class member in TweetListActivity as you would be needing the variable across the functions of class TweetListActivity.
+The file needs to be in src -> org -> codelearn -> twitter -> models directory. You can either manually create it or follow the Eclipse steps below.
-Make sure you add the appropriate import statement
+* Create new folder
- import org.codelearn.twitter.models.Tweet
+
-in TweetListActivity.java. Otherwise, Eclipse will not be able to understand that 'Tweet' actually stands for the Tweet class defined elsewhere.
+* Create Tweet.java inside org.codelearn.twitter.models
-**step 2 **
-Initialize tweets array with dummy data as in step 2. Figure out the right place you should be initializing it.
+
+* This is how the newly created Tweet.java will look
-**step 3**
-Make tweets array created from step 2 accessible inside TweetAdapter's getView() function .
+<%= image_tag "twitter-client/tweet.java.png" %>
-Hint 1 - You should pass the array while initializing TweetAdapter in TweetListActivity. The variable becomes available inside constructor of TweetAdapter which you should store locally in TweetAdapter to be used in getView(..)
+**2. Create Tweet.java PoJo **
-Hint 2 - TweetAdapter need to extend `ArrayAdapter` to be able to accept array of tweets as argument in the constructor.
+If you do not know what PoJos are, read about it [here](http://stackoverflow.com/questions/11722251/what-is-pojo-dojo-in-java)
-Hint 3 - Inside getView(..), you should use `position` variable to get the appropriate Tweet object from the tweeets array
+For now, we are just going to have **id** (String), **title** (String) & **body** (String) fields in the Tweet model. You need to create a PoJo that lets you retrieve & set these fields.
-Once done, the app will look as below
+Create `getTitle()`, `setTitle()`, `getBody()`, `setBody()` & `getId()` functions in the PoJo that will get/set the appropriate fields.
-<%= image_tag "twitter-client/different-tweets.png" %>
+You should run your app & we are going to test if Tweet.java is present at org.codelearn.twitter.models & has appropriate functions & fields. **Make sure you keep the name of the file, location & fields exactly same as specified.**
diff --git a/twitter-client-tutorial/_tweet_list_dynamic_data_use_tweet_model.html.md b/twitter-client-tutorial/_tweet_list_dynamic_data_use_tweet_model.html.md
index f9db93f..5201ff7 100644
--- a/twitter-client-tutorial/_tweet_list_dynamic_data_use_tweet_model.html.md
+++ b/twitter-client-tutorial/_tweet_list_dynamic_data_use_tweet_model.html.md
@@ -1,108 +1,66 @@
-# Creating Tweet Model
-##Recap from module 1
+In the previous lesson, we created a Tweet Model. In this lesson, we are going to populate it with dummy data & then use its content to show up on TweetListActivity.
-In module 1, each tweet item had dummy data and its appearance was based on row_tweet.xml. We also created a TweetListAdapter with a `getView()` method which simply inflated the resource xml
+## Step 1 - Array of tweets initialization
-`TweetAdapter.java`
+We will be holding a lot of tweets at a given time. So we need an array of Tweet model objects.
- public class TweetAdapter extends ArrayAdapter {
- .
- .
- @Override
- public View getView(int position, View convertView, ViewGroup parent){
- return inflater.inflate(R.layout.row_tweet, parent, false);
- }
+ List tweets = new ArrayList();
- }
-
-Because of the above step, all tweet items looked the same. In real life, each tweet item will hold a different value that comes from the twitter server. Since we are not doing network calls yet, we will populate some dummy but different data.
+While `List` is a generic array class in java (also called interface), `ArrayList` is simply an array implementation of List interface. Putting a `` typecasts it to an array of our Tweet class.
-The steps we are going to follow :-
+## Step 2 - Populating the array
-**1. New Tweet model to hold data **
+Presently, we create random data inside getView() when the user visits the TweetListActivity. Since we've created a new Tweet model, we will iterate over the Tweet objects, get each element's value like header, date, body etc & set the appropriate field in the inflated View.
-Good programming practice in Java mandates that any kind of data should be held in a class. It is also referred as Model of Model View Controller architecture. Consider the Activity classes as Controllers & XML as Views. We will create a new class Tweet.java which will hold the tweet data.
+We don't have any tweets yet, so `tweets` will be empty. You can populate it with the code snippet below.
-**2. Populating the Tweet model **
+ for ( int i = 0; i < 20; i++ ) {
+ Tweet tweet = new Tweet();
+ tweet.setTitle("A nice header for Tweet # " +i);
+ tweet.setBody("Some random body text for the tweet # " +i);
+ tweets.add(tweet);
+ }
-In a real Twitter app, data would be fetched from the network. Since we are not doing network call here, we are just going to put some dummy data in our Tweet model.
+The code above will put 20 Tweet objects in `tweets` array. We are using **setTitle()** and **setBody()** functions that we created in Tweet model in the previous lesson.
-**3. Using Tweet model to show data on screen **
+## Step 3 - Populating ListView with tweets array
-We are then going to pass the tweet model array to TweetAdapter & change the code to use the model data to show on the screen.
+Now that we have populated the tweets array, we need to show the data it holds on the ListView.
-## Creating Tweet Model
+A quick recap. Data is passed to the ListView through an Adapter. We had the below code in TweetListActivity.java .
-When we will do network calls to fetch tweets, all the tweets will have uniform structure. Each tweet will have an image, twitter handle, body, date etc. In Java, it is a good practice to create a Java class for this. Such an object is also known as **P**lain **O**ld **J**ava **O**bject (POJO) in Java. We can store multiple tweets as array of the Tweet object.
+
tweetItemArrayAdapter = new TweetAdapter(this, new String[10]);
+We were not actually passing any data to the Adapter. Just the size of the String array is used by the Adapter to create 10 tweet entries. Now we will be passing `tweets` array to TweetAdapter which will in-turn be used in getView() method to set the title, body & date in inflated View.
-### Assignment - create Tweet model
+We also need to modify **getView()** method to use the tweets array. The method `getView()` returns an object of type View. Before returning the View, the content of the inflated View can be modified by accessing elements of the View using `findViewById()` method and setting the text using `setText(..)`.
-** 1. Create Tweet.java **
-The file needs to be in src -> org -> codelearn -> twitter -> models directory. You can either manually create it or follow the Eclipse steps below.
+### Assignment
-* Create new folder
+**step 1 **
+Implement step 1 to instantiate array of tweets. You should have it as private class member in TweetListActivity as you would be needing the variable across the functions of class TweetListActivity.
-
+in TweetListActivity.java. Otherwise, Eclipse will not be able to understand that 'Tweet' actually stands for the Tweet class defined elsewhere.
-* This is how the newly created Tweet.java will look
+**step 2 **
+Initialize tweets array with dummy data as in step 2. Figure out the right place you should be initializing it.
-<%= image_tag "twitter-client/tweet.java.png" %>
-**2. Copy contents to Tweet.java **
+**step 3**
+Make tweets array created from step 2 accessible inside TweetAdapter's getView() function .
-For now, we are just going to have id, title & body fields in the Tweet model. You need to create a PoJo that lets you retrieve & set these fields.
+Hint 1 - You should pass the array while initializing TweetAdapter in TweetListActivity. The variable becomes available inside constructor of TweetAdapter which you should store locally in TweetAdapter to be used in getView(..)
-Lets add those fields & functions in the model.
+Hint 2 - TweetAdapter need to extend `ArrayAdapter` to be able to accept array of tweets as argument in the constructor.
-`Tweet.java`
+Hint 3 - Inside getView(..), you should use `position` variable to get the appropriate Tweet object from the tweeets array
- package org.codelearn.twitter.models;
-
- public class Tweet {
- private String id;
- private String title;
- private String body;
-
- public String getId() {
- return id;
- }
-
- public String getTitle() {
- return title;
- }
-
- public void setTitle(String title) {
- this.title = title;
- }
-
- public String getBody() {
- return body;
- }
-
- public void setBody(String body) {
- this.body = body;
- }
- }
+Once done, the app will look as below
-You should run your app & we are going to test if Tweet.java is present at org.codelearn.twitter.models & has appropriate functions & fields. **Make sure you keep the name of the file, location & fields exactly same as specified.**
+<%= image_tag "twitter-client/different-tweets.png" %>
diff --git a/twitter-client-tutorial/_tweetdetail_intent_module.html.md b/twitter-client-tutorial/_tweetdetail_intent_module.html.md
new file mode 100644
index 0000000..ede8938
--- /dev/null
+++ b/twitter-client-tutorial/_tweetdetail_intent_module.html.md
@@ -0,0 +1,22 @@
+
+So far you have built a basic Tweet List screen. You also learnt how to attach Click Listener to each List item. As per our plan, you need to load a new Activity with details of the tweet when the tweet item is clicked on the ListView.
+
+Ideally, we would need to send the tweet data from the TweetList Activity to TweetDetail Activity but ince this is our first iteration of building the Twitter app & we are not doing any data handling, there will not be any data passed over Intent.
+
+This module is similar to our earlier module where you learnt how to load the TweetList Activity from Login Activity on login button click.
+
+
+
+
diff --git a/twitter-client-tutorial/_tweetdetail_intent_with_data_module.html.md b/twitter-client-tutorial/_tweetdetail_intent_with_data_module.html.md
new file mode 100644
index 0000000..dc52836
--- /dev/null
+++ b/twitter-client-tutorial/_tweetdetail_intent_with_data_module.html.md
@@ -0,0 +1,4 @@
+
+In one of the previous modules, we were simply opening TweetDetail Activity on List item click in TweetList Activity. In this module, we will be passing tweet object over the Intent which is then used to popuplate the TweetDetail Activity.
+
+There are multiple ways of passing data over Intent. It can be simple string, integer or can be an object of a class.
diff --git a/twitter-client-tutorial/_tweetlist_listview_module.html.md b/twitter-client-tutorial/_tweetlist_listview_module.html.md
new file mode 100644
index 0000000..728d76a
--- /dev/null
+++ b/twitter-client-tutorial/_tweetlist_listview_module.html.md
@@ -0,0 +1,23 @@
+
+So far, you learnt to work with relatively simple View elements like LinearLayout, RelativeLayout, TextView, EditText & Button. For building the list of tweet screen, we would be needing a different View element called **ListView**.
+
+ListView is one of the most difficult concepts to understand for an Android newbie. To make it easier/simpler, we will be building TweetList screen in multiple iterations. The first iteration will be to build a very simple but useless ListView with just one TextView for each item. We are then going to refine it to come closer to our requirement.
+
+Below are the images as to how the ListView would be built in the lessons of this module.
+
+
+
diff --git a/twitter-client-tutorial/_twitter_data_handling.html.md b/twitter-client-tutorial/_twitter_data_handling.html.md
index 6778806..3eb747c 100644
--- a/twitter-client-tutorial/_twitter_data_handling.html.md
+++ b/twitter-client-tutorial/_twitter_data_handling.html.md
@@ -1,4 +1,3 @@
-# Twitter Data Handling & Local Storage
We have built a Twitter app with three screens so far. It is just the User Interface. As we mentioned earlier, the first step of app development is to design the interface. We could add more screens, but let's just stick to the three screens - Login, Tweet List & Tweet Detail - that we have built & focus on handling data, storing it locally & updating it as & when needed.
diff --git a/twitter-client-tutorial/_writing_tweets_to_file.html.md b/twitter-client-tutorial/_writing_tweets_to_file.html.md
index b52655a..22afa45 100644
--- a/twitter-client-tutorial/_writing_tweets_to_file.html.md
+++ b/twitter-client-tutorial/_writing_tweets_to_file.html.md
@@ -1,4 +1,3 @@
-# Serializing & writing to local file
** Writing to a local file **
diff --git a/twitter-http-challenge/_fetching_tweets_with_http_get.html.md b/twitter-http-challenge/_fetching_tweets_with_http_get.html.md
index 1d2b587..b2bb636 100644
--- a/twitter-http-challenge/_fetching_tweets_with_http_get.html.md
+++ b/twitter-http-challenge/_fetching_tweets_with_http_get.html.md
@@ -1,5 +1,7 @@
##Fetching tweets using HTTP GET calls and submitting new tweets
+> Update: If you were using HttpUrlConnection, our tests will eventually fail because of it. You need to use only DefaultHttpClient or AndroidHttpClient for HTTP calls
+
This level focuses on fetching tweets using the Codelearn Twitter API and displaying them in list in *TweetListActivity* and updating list to add new tweets when refreshed.
###API
@@ -55,7 +57,29 @@ Edgar
## On refresh
-On refresh, lets say, you get four new tweets with title Josh, Marcus, John & Warren. **The new tweets should be added on top of existing tweets & in the same order as fetched from network**.
+On refresh, lets say, you get four new tweets with title Josh, Marcus, John & Warren.
+
+
+
+ **The new tweets should be added on top of existing tweets & in the same order as fetched from network**.
`order of tweets on TweetListActivity`
@@ -72,9 +96,10 @@ Edgar
###Tasks
-1. Improve the login process by showing a **RelativeLayout** containing a **ProgressBar** while the login HTTP call is in progress. The RelativeLayout should be added **after Login button** in the same activity, should span height & width of screen & should have a child element ProgressBar. The ProgressBar should show up when the Login data is being sent to the server & should be hidden when the login process completes.
-
-2. Modify TweetListActivity to make an HTTP GET call when the Activity is created to fetch tweets. Handle the received Tweet objects and render them in the ListView such that *last tweet fetched should appear first in the list*.
+1. Modify TweetListActivity to make an HTTP GET call when the Activity is created to fetch tweets. Handle the received Tweet objects and render them in the ListView. **Assume that the url always return the new tweets & you should append the tweets to the items in the List**.
-3. Add a refresh menu item which upon click should make an HTTP GET call to get new array of tweets and append the new data to list.
+2. Add a refresh menu item which upon click should make an HTTP GET call to get new array of tweets and append the new data to list. The refresh should simply call the */tweets* url & append the tweets to the list.
+###Restrictions
+* You must only use **AndroidHttpClient** or **DefaultHttpClient** to do network calls as they can only be mocked & tested with Robolectric. Any other library is not supported.
+* For JSON parsing, you can use **GSON** & **Jackson** libraries only
diff --git a/twitter-http-challenge/_import_codelearn_project.html.md b/twitter-http-challenge/_import_codelearn_project.html.md
index 3a821b6..2997eaa 100644
--- a/twitter-http-challenge/_import_codelearn_project.html.md
+++ b/twitter-http-challenge/_import_codelearn_project.html.md
@@ -1,4 +1,3 @@
-# Import Codelearn Twitter Challenge Project
In the previous level, we installed Codelearn Eclipse Plugin.
diff --git a/twitter-http-challenge/_login_with_http_post.html.md b/twitter-http-challenge/_login_with_http_post.html.md
index ce6b362..11637a4 100644
--- a/twitter-http-challenge/_login_with_http_post.html.md
+++ b/twitter-http-challenge/_login_with_http_post.html.md
@@ -1,5 +1,7 @@
## The app so far
+> Update: If you were using HttpUrlConnection, our tests will eventually fail because of it. You need to use only DefaultHttpClient or AndroidHttpClient for HTTP calls
+
If you have completed the setup, you should have a dummy Twitter app, **CodelearnTwitterChallenge**, imported in your Eclipse. The app has three screens as shown below
@@ -59,9 +61,8 @@ The API will provide you a token as a JSON response
* Modify the app to skip showing the login screen when the token is already available in SharedPreference.
###Restrictions
-* You must make a POST call to **/login**
-* The JSON request object must contain "username" and "password" fields
-* You must use one of the natively available techniques to perform HTTP operations, like **HttpClient** or **HTTPUrlConnection**. External libraries are not supported.
+* You must use either **AndroidHttpClient** or **DefaultHttpClient** library to do network call. Any other libraries are not supported.
+* For JSON parsing, you can use **GSON** & **Jackson** libraries only
* The received token must be stored in a SharedPreference file named "codelearn_twitter"
Once you are done, run the app as **Android App Codelearn** & if you got the solution right, you will get a success popup that will take you the next level. All the best.
diff --git a/twitter-http-challenge/_real_twitter_with_twitter4j.html.md b/twitter-http-challenge/_real_twitter_with_twitter4j.html.md
index db67f6c..74b989c 100644
--- a/twitter-http-challenge/_real_twitter_with_twitter4j.html.md
+++ b/twitter-http-challenge/_real_twitter_with_twitter4j.html.md
@@ -6,9 +6,87 @@ So far, the challenge involved the usage of the Codelearn Twitter API, which pro
Refer to the [Javadoc](http://twitter4j.org/en/javadoc.html) and [code examples](http://twitter4j.org/en/code-examples.html) provided by Twitter4J.
-###Tasks
-* Insert the relevant JAR files into your Eclipse project
-* Register at [dev.twitter.com](https://dev.twitter.com) and obtain consumer key and secret for your Twitter application.
-* Replace the existing HTTP network mechanisms for logging in, fetching tweets and submitting new tweets with the methods provided by Twitter4J.
+For using Twitter4J library, you need to register an app at [http://dev.twitter.com/apps](http://dev.twitter.com/apps). For your convenience, we have created an app & you can use the API key & secret (reproduced below). It is a good practice to create a separate class `TwitterConstants.java` and define these as static variables to be used in your app
+ public static String CONSUMER_KEY = "pC3D9eMxb8pXNAPhBHAQFYLoS";
+ public static String CONSUMER_SECRET = "8qhOLjLHiqLQJLLQUnBNSlnUoFtbLHjWQlnaxS5W3n6NkkUeOi";
+
+### Tasks
+
+1) Modify MainActivity.java to have only one 'Sign in with Twitter' button . Remove the LinearLayouts containing username & password fields. Hook up the button with Twitter4J so that the user gets redirected to Twitter for authentication.
+
+2) Our tests will not be able to access the webView & fill in the data once user gets redirected to Twitter. Our tests will be using @DroidChallenge user oAuth token to test your app. We need to mandate that you should store the token details in your app in **codelearn_twitter** SharedPreference with key **key_acc_token** for the token & **key_acc_token_secret** for the secret. We are simply going to write @DroidChallenge token values to these keys in the SharedPreference to test your app on our server.
+
+**P.S. - We will not get your twitter account token details this way & the app will not post as you when run on our server. Just pause & think for a minute if you are still in doubt.**
+
+It is a good practice to store these names in TwitterConstants.java
+
+`TwitterConstants.java`
+
+ public static final String SHARED_PREFERENCE = "codelearn_twitter";
+ public static final String PREF_KEY_TOKEN = "key_acc_token";
+ public static final String PREF_KEY_SECRET = "key_acc_token_secret";
+
+& use it where it is required
+
+`MainActivity.java`
+
+ prefs = getSharedPreferences(TwitterConstants.SHARED_PREFERENCE, MODE_PRIVATE);
+ Editor editor = prefs.edit();
+ editor.putString(TwitterConstants.PREF_KEY_TOKEN, accessToken.getToken());
+ editor.putString(TwitterConstants.PREF_KEY_SECRET, accessToken.getTokenSecret());
+
+2) Once the user gets authenticated with Twitter, he should automatically go to TweetListActivity where he can see his tweets. The code that fires the Intent is already there. **You should update it to use the SharedPreference keys for the token.** Make sure you do not use any other SharedPreference keys as our tests will not be able to complete the login process because of the webView handling & any other keys that you are setting, will not get set.
+
+3) Modify the logic so that **only new tweets are fetched & appended to the tweet list**.
+
+4) Create a new Activity **ComposeTweetActivity** to compose a tweet. Make sure to keep the name exactly the same, also the Activity should extend normal Activity & not ActionBarActivity. A corresponding layout file **activity_compose_tweet.xml** will get generated. Replace the content of the file with the content below
+
+
+
+
+
+
+
+
+
+
+
+
+
+ **Add the logic to post the tweet on button click.**
+
+5) Add a menu item on TweetListActivity to take user to **ComposeTweetActivity**. Overall, there should only be two menu items - the first for Refresh of tweets, the second one for compose tweet.