├── .gitignore
├── README.md
├── buttonsAndToast
├── README.md
└── screenshots
│ └── appRun.png
├── firstAndroidApp
├── README.md
└── screenshots
│ ├── appRun.png
│ ├── chooseDefault.png
│ ├── emptyActivityName.png
│ ├── layout.png
│ ├── mainScreen.png
│ ├── targetDevice.png
│ └── welcomeScreen.png
├── gettingStarted
└── README.md
├── intentsPassingDataMultipleActivities
├── README.md
└── screenshots
│ └── appRun.gif
├── listViews
├── README.md
└── screenshots
│ └── appRun.png
└── recyclerViews
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | *.DS_Store
2 | *.swp
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Today I Learned Android
2 | I fell in love with Android App development ever since I first started building stuff on it since my senior year of high school in 2010-2011. While in college a few of my friends and I started an organization that teaches students Android, iOS, and Webapp Development, and it was one of the things that I'm most proud of. Since graduating I wanted to spread the love a bit more and use this repo to provide mini tutorials for Android App development.
3 |
4 |
5 | This is a work in progress so please bear with me. My goal is to have at least two new tutorials each week. If you have any tutorial requests and such, feel free to open up an issue and place your request there! Or, if you'd like submit your own tutorial as a pull request!
6 |
7 | # Beginner Tutorials
8 | 1. [Getting Started](gettingStarted/README.md) (Todo)
9 | 2. [First Android App](firstAndroidApp/README.md)
10 | 3. [Buttons and Toast](buttonsAndToast/README.md)
11 | 4. [ListViews](listViews/README.md)
12 | 5. [Intents and Passing Data between Multiple Activities](intentsPassingDataMultipleActivities/README.md)
13 | 6. [RecyclerViews](recyclerViews/README.md) (Todo)
14 | 7. [Android Themes](themes/README.md) (Todo)
15 | 8. [Styles](themes/README.md) (Todo)
16 |
17 | # Advanced Tutorials
18 | 1. [Android Development Patterns](androidDevelopmentPatterns/README.md) (Todo)
19 | 2. [Custom ListViews](customListViews/README.md) (Todo)
20 | 3. [REST Tutorial](restTutorial/README.md) (Todo)
21 | 4. [Custom Views](customViews/README.md) (Todo)
22 | 5. [Animated Vector Drawables](animatedVectorDrawables/README.md) (Todo)
23 |
24 | # Android Libraries
25 | 1. Picasso
26 | 2. Retrofit
27 |
28 | # Contributing
29 | If you would like to contribute, have any complaints, or just want to reach out feel free contact me, @savala
30 |
--------------------------------------------------------------------------------
/buttonsAndToast/README.md:
--------------------------------------------------------------------------------
1 | # Buttons and Toast
2 | This tutorial teaches you about how to add buttons in your Android App and then manipulate them using java. This tutorial assumes that you know how to create a base project. So go ahead and create a new Android project, make sure to choose Empty Activity as the activity type, and then leave the defaults for everything else.
3 |
4 | ## Add a button to your layout
5 | The default activity_main.xml file looks like this:
6 |
7 | ```xml
8 |
9 |
18 |
19 |
23 |
24 | ```
25 |
26 |
27 | Go ahead and remove the TextView tag and add in the Button tag as below:
28 |
29 | ```xml
30 |
35 | ```
36 |
37 | Notice here we are setting the width, height, and the text label that the button displays to the user. The "id" field is essentially the "name" of the button. The "id" field is what you'll use to reference the button and manipulate its actions in java.
38 |
39 | After this, your activity_main.xml file should finally end up looking like this
40 |
41 | ```xml
42 |
43 |
52 |
53 |
58 |
59 | ```
60 |
61 | ## Manipulate the button
62 | Now let's handle the button actions! Go to MainActivity.java.
63 |
64 | Outside of onCreate() declare the button
65 |
66 | ```java
67 | Button toastButton;
68 | ```
69 |
70 | Now instantiate the button within onCreate()
71 |
72 | ```java
73 | toastButton = (Button) findViewById(R.id.toastBtn);
74 | ```
75 |
76 | The above line creates a button object which references the Button tag in activity_main.xml whose id is "toastBtn"
77 |
78 | Now lets create the button handler to show a toast message! While still in onCreate() and below the toastButton instantiation add in the following line.
79 |
80 | ```java
81 | toastButton.setOnClickListener(new View.onClickListener() {
82 | @Override
83 | public void onClick(View v) {
84 | Toast.makeText(getApplicationContext(), "Hey Android!", Toast.LENGTH_LONG).show();
85 | }
86 | });
87 | ```
88 |
89 | In a button, you set the OnClickListener and override the onClick() function. The onClick() function does what like it sounds, it defines what the button does when you click on the button! What we're doing here is creating a Toast message which takes three parameters: context, message, and the length. Go ahead and mess around with the message that you want to display. If you want to change the length of time the message will show you've got two options: Toast.LENGTH_LONG and Toast.LENGTH_SHORT. Once you've defined your mesage and time, then use .show() to display the message.
90 |
91 | Your final MainActivity.java should look like following
92 |
93 | ```java
94 | package saiavala.myapplication;
95 |
96 | import android.os.Bundle;
97 | import android.support.v7.app.AppCompatActivity;
98 | import android.view.View;
99 | import android.widget.Button;
100 | import android.widget.Toast;
101 |
102 | public class MainActivity extends AppCompatActivity {
103 |
104 | Button toastButton;
105 |
106 | @Override
107 | protected void onCreate(Bundle savedInstanceState) {
108 | super.onCreate(savedInstanceState);
109 | setContentView(R.layout.activity_main);
110 |
111 | toastButton = (Button) findViewById(R.id.toastBtn);
112 |
113 | toastButton.setOnClickListener(new View.OnClickListener() {
114 | @Override
115 | public void onClick(View v) {
116 | Toast.makeText(getApplicationContext(), "Hey Android!", Toast.LENGTH_LONG).show();
117 | }
118 | });
119 | }
120 | }
121 | ```
122 |
123 | ## Running the app
124 | Hit run, and click on the button and you should get the following message. If so, then you're done!
125 |
126 |
127 |
--------------------------------------------------------------------------------
/buttonsAndToast/screenshots/appRun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/buttonsAndToast/screenshots/appRun.png
--------------------------------------------------------------------------------
/firstAndroidApp/README.md:
--------------------------------------------------------------------------------
1 | # Creating your first Android App
2 | This tutorial is to get your started with loading up a default Android App and being able to run the application. Note this assumes that you have the sdk installed. If not please feel free to check out the [getting started tutorial](../gettingStarted/README.md).
3 |
4 | ## Getting Started
5 | When you first open up Android Studio, you'll be presented with a welcome screen like so
6 | 
7 |
8 |
9 | Go ahead and click on "Start a new Android Studio project" and then you will be presented with a screen that tells you to choose the target Android devices that you want your app to be compatible with
10 | 
11 |
12 |
13 | Click next and then you'll see a screen that asks you to add a new activity
14 | 
15 |
16 |
17 | Choose Empty Activity and then proceed further and define the Activity Name and Layout Name. Go ahead and leave the default values
18 | 
19 |
20 |
21 | Click finish and you'll then see Android Studio do a bunch of stuff and you'll be presented with all the code and goodies to get going with your Android App!
22 |
23 | ## Quick Description everything
24 | 
25 |
26 |
27 | Take a look at the left side of the screen. You'll see a list of all the files that make up your Android App on the left. You'll notice AndroidManifest.xml, java folder, and the res folder. Don't worry about everything yet, I'll go into more details about these in later tutorials. For now understand that the AndroidManifest is where you'll declare your activities and various permissions that your app has. The java/ folder will contain all your java code haha. The res/ folder contains your images, layouts, strings, styles, and various other files that will help you define your UI.
28 |
29 |
30 | Now take a look at the editor. You'll notice MainActivity.java and activity_main.xml. In android you'll define your layouts and "views" within xml. You can avoid doing this in xml, but for now go ahead with this. The way I like to think about it is: define your layouts / UI in xml, and then use Java to go and maninpulate them.
31 |
32 | ## activity_main.xml
33 | 
34 |
35 |
36 | This might look kind of confusing at first, but don't worry about it. What this is doing here is setting the type of layout you want (RelativeLayout) and then putting a TextView tag. In Android, the various elements that you see on screen are "views". There's TextView (show plain text), Button, EditText (input box), ListView (show lists), and much more.
37 |
38 | ## MainActivity.java
39 | Now that you kinda know what the layout file does, how can we manipulate it? Well this is where MainActivity.java comes in. Notice here you'll see
40 | ```java
41 | public void onCreate(Bundle savedInstanceState) {
42 | ...
43 | }
44 | ```
45 |
46 | onCreate() is essentially like the main() function in java. This is the function that's called when you launch your app. If you were wondering how this java file knows to interact with the layout file, notice in the onCreate() function there's a line that says
47 |
48 | ```java
49 | setContentView(R.layout.activity_main);
50 | ```
51 |
52 |
53 | What is R? Well when your app is built, any references that you have defined in xml and such can be referred using the R.java file. So if I create more layouts like "xyz.xml" I can refer to it by using R.layout.xyz. As this
54 |
55 |
56 | With the above line you're essentially enabling the MainActivity.java access to manipulate the ui elements that you've defined in activity_main.xml
57 |
58 | ## Running the App
59 | Go ahead and press the green "play" button in Android studio. If you have the Android sdk installed and have a virtual device created, then the app should build and then launch. If successful you should see something like this:
60 |
61 |
62 |
63 | And you've just run your first Android App!
64 |
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/appRun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/appRun.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/chooseDefault.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/chooseDefault.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/emptyActivityName.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/emptyActivityName.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/layout.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/mainScreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/mainScreen.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/targetDevice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/targetDevice.png
--------------------------------------------------------------------------------
/firstAndroidApp/screenshots/welcomeScreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/firstAndroidApp/screenshots/welcomeScreen.png
--------------------------------------------------------------------------------
/gettingStarted/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started
2 | Work in progress. Will fill this out
3 |
--------------------------------------------------------------------------------
/intentsPassingDataMultipleActivities/README.md:
--------------------------------------------------------------------------------
1 | # Intents and Passing Data between Multiple Activities
2 | This tutorial teaches you about Intents which is a fundamental concept in Android App development for message passing. In this tutorial we'll be using Intents, EditText, Button, TextView, and send a message between two activities: MainActivity.java and SecondActivity.java.
3 |
4 | Let's get started. Go ahead and create a new Android project in Android Studio. Make sure to choose "Empty Activity" as your activity type and leave everything as default.
5 |
6 | ## activity_main.xml
7 | Remove the default TextView tag in activity_main.xml and add in EditText and Button tags like so
8 |
9 | ```xml
10 |
15 |
21 | ```
22 |
23 |
24 | What we're doing here is creating an EditText field with a reference point of "inputEditText" and a Button with a reference point of "submitBtn". After adding the two tags, your activity_main.xml file should look like the following
25 |
26 |
27 | ```xml
28 |
29 |
38 |
39 |
44 |
50 |
51 |
52 | ```
53 |
54 |
55 | ## Update strings.xml
56 | Notice you might have an error with the Button tag. That's because we need to declare a string called "submit". Open up strings.xml which is in res/values and update strings.xml
57 |
58 |
59 | ```xml
60 | Submit
61 | ```
62 |
63 |
64 | Your strings.xml file should end up looking like this
65 |
66 |
67 | ```xml
68 |
69 | My Application
70 | Submit
71 |
72 | ```
73 |
74 |
75 | ## Update MainActivity.java
76 | Declare the EditText and Button outside of the onCreate() function
77 |
78 |
79 | ```java
80 | EditText inputEditText;
81 | Button submitBtn;
82 | ```
83 |
84 |
85 | Initialize the views inside the onCreate() function, and override the submitBtn so that when you click on it, it gets the message inside of the EditText object and send it over to SecondActivity.java
86 |
87 |
88 | ```java
89 | inputEditText = (EditText) findViewById(R.id.inputEditText);
90 | submitBtn = (Button) findViewById(R.id.submitBtn);
91 |
92 | submitBtn.setOnClickListener(new View.OnClickListener() {
93 | @Override
94 | public void onClick(View v) {
95 | String input = inputEditText.getText().toString();
96 | if (input != null && !input.equals("")) {
97 | Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
98 | intent.putExtra("inputText", input);
99 | startActivity(intent);
100 | }
101 | }
102 | });
103 | ```
104 |
105 |
106 | Notice the Intent object. We're initalizing the intent object with the current application context and then the Activity that we want to send our message to. In order to send the data from the EditText object, we use the putExtra() function, specify the "key" and the value (the input message). The key is what we'll use in SecondActivity in order to retreive the value.
107 |
108 |
109 | After doing all of that, our MainActivity.java file should look like the following:
110 |
111 |
112 | ```java
113 | package ssa766.myapplication;
114 |
115 | import android.content.Intent;
116 | import android.os.Bundle;
117 | import android.support.v7.app.AppCompatActivity;
118 | import android.view.View;
119 | import android.widget.Button;
120 | import android.widget.EditText;
121 |
122 | public class MainActivity extends AppCompatActivity {
123 |
124 | EditText inputEditText;
125 | Button submitBtn;
126 |
127 | @Override
128 | protected void onCreate(Bundle savedInstanceState) {
129 | super.onCreate(savedInstanceState);
130 | setContentView(R.layout.activity_main);
131 |
132 | inputEditText = (EditText) findViewById(R.id.inputEditText);
133 | submitBtn = (Button) findViewById(R.id.submitBtn);
134 |
135 | submitBtn.setOnClickListener(new View.OnClickListener() {
136 | @Override
137 | public void onClick(View v) {
138 | String input = inputEditText.getText().toString();
139 | if (input != null && !input.equals("")) {
140 | Intent intent = new Intent(getApplicationContext(), SecondActivity.class);
141 | intent.putExtra("inputText", input);
142 | startActivity(intent);
143 | }
144 | }
145 | });
146 |
147 | }
148 | }
149 | ```
150 |
151 | Now that we have this, let's create the SecondActivity
152 |
153 |
154 | ## Create Second Activity and layout file
155 | Go to the left hand side of the screen and create the SecondActivity. To do this right click on the project package inside the java/ folder, go to new -> Activity -> Empty Activity. Change the activity name to be SecondActivity. This will automatically change the layout name to activity_second.xml as well.
156 |
157 |
158 | ## Add a TextView to activity_second.xml
159 | Open up activity_second.xml and add in a TextView tag like so
160 |
161 |
162 | ```xml
163 |
168 | ```
169 |
170 | Your activity_second.xml file should end up looking like this:
171 |
172 |
173 | ```xml
174 |
175 |
184 |
185 |
190 |
191 |
192 | ```
193 |
194 |
195 | ## Display the message in SecondActivity.java
196 | You're almost there! Open up SecondActivity and declare a TextView object outside of the onCreate() function
197 |
198 |
199 | ```java
200 | TextView sentTextView;
201 | ```
202 |
203 |
204 | Now inside the onCreate() function, get the Intent (comes from MainActivity), initialize the TextView, get the message and set it as the text for the TextView.
205 |
206 |
207 | ```java
208 | Intent intent = getIntent();
209 |
210 | sentTextView = (TextView) findViewById(R.id.sentText);
211 | sentTextView.setText(intent.getStringExtra("inputText"));
212 | ```
213 |
214 |
215 | Your SecondActivity.java file should end up looking like so:
216 |
217 |
218 | ```java
219 | package ssa766.myapplication;
220 |
221 | import android.content.Intent;
222 | import android.os.Bundle;
223 | import android.support.v7.app.AppCompatActivity;
224 | import android.widget.TextView;
225 |
226 | public class SecondActivity extends AppCompatActivity {
227 |
228 | TextView sentTextView;
229 |
230 | @Override
231 | protected void onCreate(Bundle savedInstanceState) {
232 | super.onCreate(savedInstanceState);
233 | setContentView(R.layout.activity_second);
234 |
235 | Intent intent = getIntent();
236 |
237 | sentTextView = (TextView) findViewById(R.id.sentText);
238 | sentTextView.setText(intent.getStringExtra("inputText"));
239 | }
240 | }
241 | ```
242 |
243 |
244 | ## Running the Application
245 | Now run the app! If all goes well then you should see the following screens / set of actions.
246 |
247 |
248 |
--------------------------------------------------------------------------------
/intentsPassingDataMultipleActivities/screenshots/appRun.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/intentsPassingDataMultipleActivities/screenshots/appRun.gif
--------------------------------------------------------------------------------
/listViews/README.md:
--------------------------------------------------------------------------------
1 | # ListViews
2 | This tutorial teaches you how to create ListViews with string objects. We'll be using ArrayAdapter, ArrayList, and the ListView view item.
3 |
4 |
5 | Let's get started. Go ahead and create a new Android project in Android Studio. Make sure to choose "Empty Activity" as your activity type and leave everything as default.
6 |
7 | ## Add ListView to Layout
8 | Remove the TextView tag and add in the ListView tag in your activity_main.xml file
9 |
10 |
11 | ```xml
12 |
16 | ```
17 |
18 |
19 | What we're doing here is creating a ListView with a reference point of "listView" as the id. We're also setting the width and height to fill up the entire space. After adding the ListView tag, your activity_main.xml file should look like the following
20 |
21 |
22 | ```xml
23 |
24 |
33 |
34 |
38 |
39 | ```
40 |
41 | ## Add Data to the ListView
42 | Now that we have the ListView in our layout, we need to have some data to show within the ListView. To do this, first navigate to MainActivity.java
43 |
44 |
45 | First declare the ListView, ArrayAdapter, and ArrayList outside of the onCreate() function
46 |
47 |
48 | ```java
49 | ListView listView;
50 | ArrayList data;
51 | ArrayAdapter arrayAdapter;
52 | ```
53 |
54 |
55 | Inside onCreate() add the following
56 |
57 |
58 | ```java
59 | listView = (ListView) findViewById(R.id.listView);
60 |
61 | data = new ArrayList();
62 |
63 | // Create some dummy data with numbers
64 | for (int i = 0; i < 40; i++) {
65 | data.add(String.valueOf(i));
66 | }
67 |
68 | // Initialize the ArrayAdapter, set the context, layout, and data
69 | arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, data);
70 |
71 | // Tell the listView what adapter it's using
72 | listView.setAdapter(arrayAdapter);
73 | ```
74 |
75 | ## Run the App
76 | Now run the app and if your output looks something like the below image then you're done!
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/listViews/screenshots/appRun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/savala/tilAndroid/16f07a2fcc212d60b529e62aea71dc1fe27ba03e/listViews/screenshots/appRun.png
--------------------------------------------------------------------------------
/recyclerViews/README.md:
--------------------------------------------------------------------------------
1 | # RecyclerView
2 | RecyclerViews the new way and improved way to do ListViews. This tutorial assumes that you know how to use ListViews, that you're comfortable with layouts, and can create an "empty" project
3 |
4 | ## Getting Started
5 | Go ahead and create a new Android Studio project. Set your activity type that's generated to be an Empty Activity.
6 |
7 |
8 | Once that's done open up `build.gradle (Module: app)` and enter in the following inside of the `dependencies` section
9 |
10 |
11 | ```gradle
12 | compile 'com.android.support:recyclerview-v7:23.0.1'
13 | ```
14 |
15 |
16 | If you did that correctly your gradle file should like the one below and should sync up correctly
17 |
18 |
19 | ```gradle
20 | apply plugin: 'com.android.application'
21 |
22 | android {
23 | compileSdkVersion 23
24 | buildToolsVersion "23.0.1"
25 |
26 | defaultConfig {
27 | applicationId "ssa766.myapplication"
28 | minSdkVersion 16
29 | targetSdkVersion 23
30 | versionCode 1
31 | versionName "1.0"
32 | }
33 | buildTypes {
34 | release {
35 | minifyEnabled false
36 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
37 | }
38 | }
39 | }
40 |
41 | dependencies {
42 | compile fileTree(dir: 'libs', include: ['*.jar'])
43 | testCompile 'junit:junit:4.12'
44 | compile 'com.android.support:appcompat-v7:23.0.1'
45 | compile 'com.android.support:recyclerview-v7:23.0.1'
46 | }
47 | ```
48 |
49 |
50 | ## RecyclerView
51 |
--------------------------------------------------------------------------------