Lecture #1 Creating your first android project

121
Your First Android Project! Britt Barak Android Academy TLV Wifi: pUp3EkaP 1

Transcript of Lecture #1 Creating your first android project

Page 1: Lecture #1  Creating your first android project

Your First Android Project!

Britt BarakAndroid Academy TLV

Wifi: pUp3EkaP

1

Page 2: Lecture #1  Creating your first android project

First,

Page 3: Lecture #1  Creating your first android project

Britt BarakBritt Barak

Figure 8

Android AcademyWomen Techmakers

Page 5: Lecture #1  Creating your first android project

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

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

The Course Plan

- Online lesson @ home!

- Lecture @ Campus- Hands-on @ Campus- Questions @ Facebook

Page 8: Lecture #1  Creating your first android project

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
Page 10: Lecture #1  Creating your first android project

87.6%

Page 11: Lecture #1  Creating your first android project

Community Mentors

Max Waitzman

Page 12: Lecture #1  Creating your first android project
Page 13: Lecture #1  Creating your first android project

Any questions?

Page 14: Lecture #1  Creating your first android project

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

“In the beginning…”

SDK and Hello-World

Page 16: Lecture #1  Creating your first android project

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
Page 18: Lecture #1  Creating your first android project
Page 19: Lecture #1  Creating your first android project
Page 20: Lecture #1  Creating your first android project
Page 21: Lecture #1  Creating your first android project
Page 22: Lecture #1  Creating your first android project
Page 23: Lecture #1  Creating your first android project
Page 24: Lecture #1  Creating your first android project
Page 25: Lecture #1  Creating your first android project

3 Interesting Things:

1.AndroidManifest.xml2.MainActivity (class)3.activity_main.xml

Page 26: Lecture #1  Creating your first android project

Android Application Structure for now

Application

ActivityA

ActivityB ...

… Manifest ...Activity

C

Page 27: Lecture #1  Creating your first android project

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

How Does An Activity Look?

Page 29: Lecture #1  Creating your first android project

How Does An Activity Look?

But to us, it looks like this:

Page 30: Lecture #1  Creating your first android project

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

What Does An Activity Do?

Activity

Developer User

Page 32: Lecture #1  Creating your first android project

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

How to run the app?

We need to choose a device.

Page 34: Lecture #1  Creating your first android project

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

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

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

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

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

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

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

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

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

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

Any Questions?

Page 45: Lecture #1  Creating your first android project

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

A Little Bit On Layouts

Page 47: Lecture #1  Creating your first android project

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

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

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

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

RelativeLayout

Lays items next to each other, or relative to their parent.

Page 52: Lecture #1  Creating your first android project

Tap Counter

Page 53: Lecture #1  Creating your first android project

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

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

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

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

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

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

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

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

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

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

Questions?

Page 64: Lecture #1  Creating your first android project

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

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

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

How Does It Work?

Page 68: Lecture #1  Creating your first android project

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

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

2.Create a row layout

Let’s consider this layout

Page 71: Lecture #1  Creating your first android project

2.Create a row layout

Let’s consider this layout40%60%

24sp

Default SizeAuto

Page 72: Lecture #1  Creating your first android project

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

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

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

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

4.Create an Adapter

Adapter

Data View

Page 77: Lecture #1  Creating your first android project

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

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

ArrayAdapter

List<T> Viewsnew ColorEntry("Pink", "#E91E63")

getView()

Page 80: Lecture #1  Creating your first android project

●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

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

ColorEntry color = getItem(position);

getView() - common implementation

Get the data item

Page 83: Lecture #1  Creating your first android project

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

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

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

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

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

How Does It Work?

Page 89: Lecture #1  Creating your first android project

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

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

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

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

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

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

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

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

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

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

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

Questions ?

Page 101: Lecture #1  Creating your first android project

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

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

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

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

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

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

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

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

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

6. Bind Adapter to RecyclerViewColorEntriesAdapter adapter = new ColorEntriesAdapter(this, colors);recyclerView.setAdapter(adapter);

Page 111: Lecture #1  Creating your first android project

7. Set LayoutManager to RecyclerView

LayoutManager - How to position the view items within the RecyclerView.

Page 112: Lecture #1  Creating your first android project

7. Set LayoutManager to RecyclerView

recyclerView.setLayoutManager(layoutManager);

- LinearLayoutManager- GridLayoutManager- StaggeredGridLayoutManager

Page 113: Lecture #1  Creating your first android project

7. Set LayoutManager to RecyclerView Vertical LinearLayoutManager

Horizontal LinearLayoutManager

Page 114: Lecture #1  Creating your first android project

7. Set LayoutManager to RecyclerView GridLayoutManager StaggeredGridLayoutMana

ger

Page 115: Lecture #1  Creating your first android project

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

Questions ?

Page 117: Lecture #1  Creating your first android project

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

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
Page 120: Lecture #1  Creating your first android project

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

Thank you for coming.