lecture #1 creating your first android project
TRANSCRIPT
![Page 1: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/1.jpg)
Your First Android Project!
Britt BarakAndroid Academy TLV
Wifi: pUp3EkaP
1
![Page 2: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/2.jpg)
First,
![Page 3: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/3.jpg)
Britt BarakBritt Barak
Figure 8
Android AcademyWomen Techmakers
![Page 4: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/4.jpg)
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
![Page 5: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/5.jpg)
What Do We Do?
●Android Fundamentals
●Android UI / UX
●Community Hackathon
●Android Performance
●Mentors Program●Active community
![Page 6: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/6.jpg)
Jonathan Yarkoni
Android Developer & Advocate Ironsource
Android Academy Staff
Yonatan LevinGoogle Developer
Expert & Android @ Gett
Britt BarakAndroid Lead
Figure8
Yossi SegevAndroid Developer
Crave
![Page 7: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/7.jpg)
The Course Plan
- Online lesson @ home!
- Lecture @ Campus- Hands-on @ Campus- Questions @ Facebook
![Page 8: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/8.jpg)
Online Lessons
Important:
Watch online lesson
before the meetup!
- Our course: “Developing
Android Apps”goo.gl/u1pxZv
- Optional: Nano Degree
- Optional: “Android Basics” courses
![Page 9: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/9.jpg)
![Page 10: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/10.jpg)
87.6%
![Page 11: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/11.jpg)
Community Mentors
Max Waitzman
![Page 12: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/12.jpg)
![Page 13: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/13.jpg)
Any questions?
![Page 14: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/14.jpg)
What’s For Today?●App Project Structure
●Adding Activities
●Playing with Views
●Introducing Lists, Adapters, ViewHolders
![Page 15: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/15.jpg)
“In the beginning…”
SDK and Hello-World
![Page 16: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/16.jpg)
Getting Started
SDK: Software development kit. Android’s SDK is Free and it’s greathttps://developer.android.com/sdk/index.html
![Page 17: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/17.jpg)
![Page 18: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/18.jpg)
![Page 19: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/19.jpg)
![Page 20: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/20.jpg)
![Page 21: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/21.jpg)
![Page 22: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/22.jpg)
![Page 23: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/23.jpg)
![Page 24: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/24.jpg)
![Page 25: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/25.jpg)
3 Interesting Things:
1.AndroidManifest.xml2.MainActivity (class)3.activity_main.xml
![Page 26: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/26.jpg)
Android Application Structure for now
Application
ActivityA
ActivityB ...
… Manifest ...Activity
C
![Page 27: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/27.jpg)
What’s an Activity ??
Activity - a component with a screen with which users can interact in order to do something.
Examples: dial the phone, take a photo, send an email, view a map...
https://developer.android.com/guide/components/activities.html
![Page 28: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/28.jpg)
How Does An Activity Look?
![Page 29: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/29.jpg)
How Does An Activity Look?
But to us, it looks like this:
![Page 30: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/30.jpg)
What Does An Activity Do?
1.Helps the user to perform a task (i.e. making a call, checking the weather or taking
a picture.)
2.Whatever it says in its java file, and looks as defined in its XML layout file.
![Page 31: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/31.jpg)
What Does An Activity Do?
Activity
Developer User
![Page 32: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/32.jpg)
How to run the app?
Simple answer:
https://developer.android.com/training/basics/firstapp/running-app.html
![Page 33: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/33.jpg)
How to run the app?
We need to choose a device.
![Page 34: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/34.jpg)
Option 1: A Real Device
Allow USB Debugging.
It’s in the Developer Options settings,which might be hidden (by default from Android 4.2)
Read more: http://developer.android.com/tools/device.html
![Page 35: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/35.jpg)
Option 2: A Virtual Device
Open the AVD managerand create a virtual device.The run dialog will offer you to start it.
![Page 36: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/36.jpg)
And Then What Happens?
Android Studio launches the app on a device for you.When an app launches, Android looks at the application’s manifest, and decides which activity to show.
![Page 37: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/37.jpg)
Create An Activity
●Extend Activity.●Set layout as the UI : setContentView().●Declare on AndroidManifest.xml.
http://developer.android.com/guide/components/activities.html
![Page 38: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/38.jpg)
Our Manifest<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.beginners.androidacademy.session1.tapcounter"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme">
<activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
</application></manifest>
![Page 39: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/39.jpg)
MainActivity.javapublic class MainActivity extends AppCompatActivity {
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}
![Page 40: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/40.jpg)
activity_main.xml<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /></RelativeLayout>
![Page 41: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/41.jpg)
What does it take to build the project?
Actually, Quite a lot.
http://developer.android.com/sdk/installing/studio-build.html
![Page 42: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/42.jpg)
What does it take to build the project?
But Gradle helps us with it.
http://developer.android.com/sdk/installing/studio-build.html
![Page 43: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/43.jpg)
I click “Run”, You say Ho!
1.Android studio Builds the project,
2.Loads it to a device (real or virtual)
3.Executes it on the device,attach a debugger if needed.
http://developer.android.com/tools/help/adb.html
adb install YourApp.apk
adb shell am start -n com.examp.name...
![Page 44: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/44.jpg)
Any Questions?
![Page 45: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/45.jpg)
What’s For Today?●App Project structure
●Adding Activities
●Playing with Views
●Introducing Lists, Adapters, ViewHolders
✔
![Page 46: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/46.jpg)
A Little Bit On Layouts
![Page 47: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/47.jpg)
activity_main.xml<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /></RelativeLayout>
![Page 48: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/48.jpg)
Viewz
Everything in that XML file is a View.A View:
●Knows to draw itself●Used for user interaction
●Has (at least) hight and width (match_parent / wrap_content/fixed)
●May has an id (@+id/ means to create an id if it doesn’t exist)
![Page 49: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/49.jpg)
View Group (Layout)
A special kind of view.Knows to position other views on the screen.
![Page 50: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/50.jpg)
LinearLayout
Lays items in a row or a column.Can also divide existing space by weight.
![Page 51: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/51.jpg)
RelativeLayout
Lays items next to each other, or relative to their parent.
![Page 52: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/52.jpg)
Tap Counter
![Page 53: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/53.jpg)
activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" ...>
</LinearLayout>
![Page 54: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/54.jpg)
activity_main.xml<LinearLayout ... > <TextView android:id="@+id/tapdemo_display" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" />
<Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" android:text="Tap" />
</LinearLayout>
![Page 55: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/55.jpg)
Let’s make a click counter!
We’ll want to change the TextView’s text at runtime, so we’ll need to grab it after the views are inflated.
![Page 56: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/56.jpg)
MainActivity.javapublic class MainActivity extends AppCompatActivity {
TextView display;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); display = (TextView)findViewById(R.id.tapdemo_display);
}}
![Page 57: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/57.jpg)
Let’s make a click counter!
We’ll need a counter variable.Let’s make an int, and init it to 0.public class MainActivity extends AppCompatActivity {
int counter = 0;
}
![Page 58: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/58.jpg)
Let’s make a click counter!
Last, we’ll need to implement the click handler, that would increase the counter and set the display’s text.
![Page 59: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/59.jpg)
activity_main.xml<LinearLayout ... > <TextView android:id="@+id/tapdemo_display" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" />
<Button android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" android:onClick="increaseCounter" android:text="Tap" />
</LinearLayout>
![Page 60: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/60.jpg)
The Alt+Enter Magic
Alt + Enter key binding for quick fix errors. It’s context aware, and can do a lot of magic for you!
https://developer.android.com/sdk/installing/studio-tips.html
![Page 61: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/61.jpg)
MainActivity.javapublic class MainActivity extends AppCompatActivity {
//…
int counter = 0;
public void increaseCounter(View view) { counter++; display.setText(Integer.toString(counter));}
}
![Page 62: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/62.jpg)
OMG, It looks great!
We used a Linear Layout (with weights) to split the screen 1:1 between a TextView and a Button.
I’m using AVD
![Page 63: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/63.jpg)
Questions?
![Page 64: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/64.jpg)
What’s For Today?●App Project structure
●Adding Activities
●Playing with Views
●Introducing Lists, Adapters, ViewHolders
✔✔✔
![Page 65: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/65.jpg)
Quick UML Recap
Activity ViewHas,
InflatessetContentView
ViewGroup Not a ViewGroup
extends
LinearLayout
RelativeLayout
AdapterView
ListView
TextView
ImageView
Button
Has Many
![Page 66: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/66.jpg)
The ListView
●a ViewGroup ●displays a list of scrollable items.● The items are automatically inserted to the list
using an Adapter.
Read more: http://developer.android.com/guide/topics/ui/layout/listview.html
![Page 67: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/67.jpg)
How Does It Work?
![Page 68: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/68.jpg)
ListView Recipe
1.Create a ListView view2.Create a row layout (or use existing one)3.Create data object list4.Create an Adapter
5.Bind Adapter to the ListView
![Page 69: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/69.jpg)
1.Create a ListView view<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent">
</ListView>
Read more: http://developer.android.com/guide/topics/ui/layout/listview.html
![Page 70: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/70.jpg)
2.Create a row layout
Let’s consider this layout
![Page 71: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/71.jpg)
2.Create a row layout
Let’s consider this layout40%60%
24sp
Default SizeAuto
![Page 72: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/72.jpg)
item_color.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="8dp">
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="6" android:orientation="vertical">
... </LinearLayout>
<View android:id="@+id/coloritem_swatch" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:layout_weight="4" /></LinearLayout>
External horizontal LinearLayout
Internal vertical LL
![Page 73: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/73.jpg)
item_color.xml<LinearLayout... >
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="6" android:orientation="vertical">
<TextView android:id="@+id/coloritem_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="28sp" />
<TextView android:id="@+id/coloritem_detail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" /> </LinearLayout>
<View android:id="@+id/coloritem_swatch" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:layout_weight="4" />
</LinearLayout>
id
id
id
![Page 74: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/74.jpg)
3.Get data object list
Consider the following object:public class ColorEntry { String name; String color;
public ColorEntry(String name, String color) { this.name = name; this.color = color; }
public String getColor() { return color; }
public String getName() { return name; }}
![Page 75: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/75.jpg)
3.Get data object listColorEntry[] array = { new ColorEntry("Red", "#F44336"), new ColorEntry("Pink", "#E91E63"), new ColorEntry("Purple", "#9C27B0"), new ColorEntry("Deep Purple", "#673AB7"), new ColorEntry("Indigo", "#3F51B5"), new ColorEntry("Blue", "#2196F3"), new ColorEntry("Light Blue", "#03A9F4"), new ColorEntry("Cyan", "#00BCD4"), new ColorEntry("Teal", "#009688"), new ColorEntry("Green", "#4CAF50"), new ColorEntry("Light Green", "#8BC34A"), new ColorEntry("Lime", "#CDDC39"), new ColorEntry("Yellow", "#FFEB3B"), new ColorEntry("Amber", "#FFC107"), new ColorEntry("Orange", "#FF9800"), new ColorEntry("Deep Orange", "#FF5722"), new ColorEntry("Brown", "#795548") };
Palette from https://www.google.com/design/spec/style/color.html
![Page 76: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/76.jpg)
4.Create an Adapter
Adapter
Data View
![Page 77: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/77.jpg)
4.Create an AdapterColorEntry[] array = { new ColorEntry("Red", "#F44336"), new ColorEntry("Pink", "#E91E63"), new ColorEntry("Purple", "#9C27B0"), new ColorEntry("Deep Purple", "#673AB7"), new ColorEntry("Indigo", "#3F51B5"), new ColorEntry("Blue", "#2196F3"), new ColorEntry("Light Blue", "#03A9F4"), new ColorEntry("Cyan", "#00BCD4"), new ColorEntry("Teal", "#009688"), new ColorEntry("Green", "#4CAF50"), new ColorEntry("Light Green", "#8BC34A"), new ColorEntry("Lime", "#CDDC39"), new ColorEntry("Yellow", "#FFEB3B"), new ColorEntry("Amber", "#FFC107"), new ColorEntry("Orange", "#FF9800"), new ColorEntry("Deep Orange", "#FF5722"), new ColorEntry("Brown", "#795548") };
Palette from https://www.google.com/design/spec/style/color.html
Adapter
Data Views
![Page 78: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/78.jpg)
4.Create an Adapterpublic class ColorEntriesAdapter extends ArrayAdapter<ColorEntry> {
public ColorEntriesAdapter(Context context, ColorEntry[] colors) { super(context, 0, colors); }
}
![Page 79: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/79.jpg)
ArrayAdapter
List<T> Viewsnew ColorEntry("Pink", "#E91E63")
getView()
![Page 80: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/80.jpg)
●Note:
If not overriding ArrayAdapter.getView() (like on Sunshine)
the adapter binds the data to a TextView,
with the resource id given on constructor.
![Page 81: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/81.jpg)
ColorEntriesAdapter.javapublic class ColorEntriesAdapter extends ArrayAdapter<ColorEntry> { @Override public View getView(int position, View convertView, ViewGroup parent) {
//On next Slide }}
![Page 82: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/82.jpg)
ColorEntry color = getItem(position);
getView() - common implementation
Get the data item
![Page 83: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/83.jpg)
getView() - common implementation
ColorEntry color = getItem(position);
convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false);Inflate a view
![Page 84: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/84.jpg)
getView() - common implementation
ColorEntry color = getItem(position);
convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false); TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
Find views
![Page 85: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/85.jpg)
getView() - common implementation
ColorEntry color = getItem(position);
convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false); TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor())); bind view to data
![Page 86: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/86.jpg)
getView() - common implementation
ColorEntry color = getItem(position);
convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false); TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor()));
return convertView;return the view
![Page 87: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/87.jpg)
What’s most expensive?ColorEntry color = getItem(position);
convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false); TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor()));
return convertView;
![Page 88: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/88.jpg)
How Does It Work?
![Page 89: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/89.jpg)
OptimizationColorEntry color = getItem(position);
if (convertView == null) { convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false);} TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor()));
return convertView;
![Page 90: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/90.jpg)
What’s most expensive? ColorEntry color = getItem(position);
if (convertView == null) { convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false);} TextView name = (TextView) convertView.findViewById(R.id.coloritem_name);TextView detail = (TextView) convertView.findViewById(R.id.coloritem_detail);FrameLayout swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);
name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor()));
return convertView;
![Page 91: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/91.jpg)
Optimization - View Holder Pattern
Save views referenceson the tag field of the inflated layout.
Read more: http://developer.android.com/training/improving-layouts/smooth-scrolling.html#ViewHolder
![Page 92: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/92.jpg)
Optimization - View Holder Pattern
1.create View Holder object:private static class ViewHolder{ TextView name; TextView detail; FrameLayout swatch;}
![Page 93: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/93.jpg)
Optimization - View Holder Pattern
2. In case of inflating the layout, find the views:ViewHolder holder;// Check if an existing view is being reused, otherwise inflate the viewif (convertView == null) { convertView = inflater.inflate(R.layout.item_color, parent, false); holder = new ViewHolder(); holder.name = (TextView) convertView.findViewById(R.id.coloritem_name); holder.detail = (TextView) convertView.findViewById(R.id.coloritem_detail); holder.swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch);}
![Page 94: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/94.jpg)
Optimization - View Holder Pattern
3. set the ViewHolder as tag:ViewHolder holder;// Check if an existing view is being reused, otherwise inflate the viewif (convertView == null) { convertView = inflater.inflate(R.layout.item_color, parent, false); holder = new ViewHolder(); holder.name = (TextView) convertView.findViewById(R.id.coloritem_name); holder.detail = (TextView) convertView.findViewById(R.id.coloritem_detail); holder.swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch); convertView.setTag(holder);}
![Page 95: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/95.jpg)
Optimization - View Holder Pattern
4. If layout is inflated already → use the tag!ViewHolder holder;// Check if an existing view is being reused, otherwise inflate the viewif (convertView == null) { convertView = inflater.inflate(R.layout.item_color, parent, false); holder = new ViewHolder(); holder.name = (TextView) convertView.findViewById(R.id.coloritem_name); holder.detail = (TextView) convertView.findViewById(R.id.coloritem_detail); holder.swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch); convertView.setTag(holder);} else { holder = (ViewHolder) convertView.getTag();}
![Page 96: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/96.jpg)
Optimization - View Holder Pattern
5. bind the views with updated dataholder.name.setText(color.getName());holder.detail.setText(color.getColor());holder.swatch.setBackgroundColor(Color.parseColor(color.getColor()));
![Page 97: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/97.jpg)
All Together @Override public View getView(int position, View convertView, ViewGroup parent) {
ColorEntry color = getItem(position);ViewHolder holder;if (convertView == null) { convertView = inflater.inflate(R.layout.item_color, parent, false); holder = new ViewHolder();
holder.name = (TextView) convertView.findViewById(R.id.coloritem_name); holder.detail = (TextView) convertView.findViewById(R.id.coloritem_detail); holder.swatch = (FrameLayout) convertView.findViewById(R.id.coloritem_swatch); convertView.setTag(holder);} else { holder = (ViewHolder) convertView.getTag();}holder.name.setText(color.getName());holder.detail.setText(color.getColor());holder.swatch.setBackgroundColor(Color.parseColor(color.getColor()));
return convertView;}
![Page 98: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/98.jpg)
All Together - Small Refactor @Override public View getView(int position, View convertView, ViewGroup parent) {
ColorEntry color = getItem(position);View view;if (convertView == null) { view = onCreateViewHolder(convertView, parent);
} else { view = convertView;}
onBindViewHolder(view, color);
return view;}
![Page 99: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/99.jpg)
ListView Recipe
1.Create a ListView view2.(optional: create a row layout)3.Create data object list4.Create a View Holder object5.Create an Adapter
6.Bind Adapter to the ListView
![Page 100: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/100.jpg)
Questions ?
![Page 101: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/101.jpg)
And still, It wasn’t enough
ListViews and GridViews have a few common problems:
1.It’s hard to add animations to them. Seriously hard.
2.It’s hard to make it look not like a list (or a grid).3.It’s hard to add GestureDetection to it.4.It’s easy not to use the ViewHolder pattern.
That’s why Google created the RecyclerView
http://developer.android.com/training/material/lists-cards.html
http://www.truiton.com/2015/03/android-recyclerview-vs-listview-comparison/
![Page 102: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/102.jpg)
ListView RecyclerView Recipe
1.Create a ListView RecyclerView view2.Create a row layout
3.Create data object list4.Create a View Holder object5.Create an Adapter
6.Bind Adapter to the ListView RecyclerView7.Set LayoutManager to the RecyclerView
![Page 103: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/103.jpg)
1.Create a RecyclerView view<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent"/>
Read more: https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
![Page 104: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/104.jpg)
2. Item_color.xml (same)<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical">
<TextView android:id="@+id/coloritem_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="24sp" />
<TextView android:id="@+id/coloritem_detail" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
<View android:id="@+id/coloritem_swatch" android:layout_width="192dp" android:layout_height="match_parent" /></LinearLayout>
![Page 105: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/105.jpg)
3.Get data object list (same)ColorEntry[] array = { new ColorEntry("Red", "#F44336"), new ColorEntry("Pink", "#E91E63"), new ColorEntry("Purple", "#9C27B0"), new ColorEntry("Deep Purple", "#673AB7"), new ColorEntry("Indigo", "#3F51B5"), new ColorEntry("Blue", "#2196F3"), new ColorEntry("Light Blue", "#03A9F4"), new ColorEntry("Cyan", "#00BCD4"), new ColorEntry("Teal", "#009688"), new ColorEntry("Green", "#4CAF50"), new ColorEntry("Light Green", "#8BC34A"), new ColorEntry("Lime", "#CDDC39"), new ColorEntry("Yellow", "#FFEB3B"), new ColorEntry("Amber", "#FFC107"), new ColorEntry("Orange", "#FF9800"), new ColorEntry("Deep Orange", "#FF5722"), new ColorEntry("Brown", "#795548") };
Palette from https://www.google.com/design/spec/style/color.html
![Page 106: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/106.jpg)
4. Create a ViewHolder objectpublic static class ColorViewHolder extends RecyclerView.ViewHolder { TextView name; TextView detail; View swatch;
public ColorViewHolder(View itemView) { super(itemView); }}
![Page 107: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/107.jpg)
5.Create an Adapterpublic static class ColorEntriesAdapter extends
RecyclerView.Adapter<ColorViewHolder> {
public ColorEntriesAdapter(Context context, ColorsRepository.ColorEntry[] colors) {
this.colors = colors; this.inflater =
LayoutInflater.from(context); }
}
![Page 108: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/108.jpg)
5.Create an Adapterpublic static class ColorEntriesAdapter extends RecyclerView.Adapter<ColorViewHolder> {
//...
@Override public int getItemCount() { return colors.length; }}
![Page 109: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/109.jpg)
5.Create an Adapterpublic static class ColorEntriesAdapter extends RecyclerView.Adapter<ColorViewHolder> {
//... @Override public ColorViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = inflater.inflate(R.layout.item_color, parent, false); ColorViewHolder holder = new ColorViewHolder(itemView); holder.name = (TextView) itemView.findViewById(R.id.coloritem_name); holder.detail = (TextView) itemView.findViewById(R.id.coloritem_detail); holder.swatch = itemView.findViewById(R.id.coloritem_swatch); return holder; }
@Override public void onBindViewHolder(ColorViewHolder holder, int position) { ColorsRepository.ColorEntry color = colors[position]; holder.name.setText(color.getName()); holder.detail.setText(color.getColor()); holder.swatch.setBackgroundColor(Color.parseColor(color.getColor())); }}
![Page 110: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/110.jpg)
6. Bind Adapter to RecyclerViewColorEntriesAdapter adapter = new ColorEntriesAdapter(this, colors);recyclerView.setAdapter(adapter);
![Page 111: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/111.jpg)
7. Set LayoutManager to RecyclerView
LayoutManager - How to position the view items within the RecyclerView.
![Page 112: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/112.jpg)
7. Set LayoutManager to RecyclerView
recyclerView.setLayoutManager(layoutManager);
- LinearLayoutManager- GridLayoutManager- StaggeredGridLayoutManager
![Page 113: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/113.jpg)
7. Set LayoutManager to RecyclerView Vertical LinearLayoutManager
Horizontal LinearLayoutManager
![Page 114: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/114.jpg)
7. Set LayoutManager to RecyclerView GridLayoutManager StaggeredGridLayoutMana
ger
![Page 115: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/115.jpg)
7. Set LayoutManager to RecyclerView
To look like the ListView demo:
recyclerView.setLayoutManager(new LinearLayoutManager(this));
//OR:
recyclerView.setLayoutManager(new LinearLayoutManager(this,
LinearLayoutManager.VERTICAL, false));
![Page 116: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/116.jpg)
Questions ?
![Page 117: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/117.jpg)
Wrap Up●App Project structure
●Adding Activities
●Playing with Views and Layouts
●Introducing Lists, Adapters, ViewHolders
✔✔✔
✔
![Page 118: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/118.jpg)
git - getting today’s code
if you want to grab the code for this lecture, you should clone the GitHub repository, like this:
https://github.com/brittBarak/Fundamentals-1-TapCounter.git
https://github.com/brittBarak/Fundamentals-1-ListDemo.git
![Page 119: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/119.jpg)
![Page 120: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/120.jpg)
What’s Next?●Here for questions @ 34th floor
●Join our Facebook for questions
●Next lecture on Sunday!!
●Watch lecture 2 online
●RSVP to next lecture!
![Page 121: Lecture #1 Creating your first android project](https://reader034.vdocument.in/reader034/viewer/2022051709/5878576c1a28ab68198b7963/html5/thumbnails/121.jpg)
Thank you for coming.