Lecture #1 Creating your first android project

Your First Android Project!

Britt BarakAndroid Academy TLV

Wifi: pUp3EkaP

First,

Britt BarakBritt Barak

Figure 8

Android AcademyWomen Techmakers

Largest Android Community

Android Academy - TLV

TLV - Android Academy

~ 2000 members Join Us:

What Do We Do?

●Android Fundamentals

●Android UI / UX

●Community Hackathon

●Android Performance

●Mentors Program●Active community

Jonathan Yarkoni

Android Developer & Advocate Ironsource

Android Academy Staff

Yonatan LevinGoogle Developer

Expert & Android @ Gett

Britt BarakAndroid Lead

Figure8

Yossi SegevAndroid Developer

The Course Plan

- Online lesson @ home!

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

Online Lessons

Important:

Watch online lesson

before the meetup!

- Our course: “Developing

Android Apps”goo.gl/u1pxZv

- Optional: Nano Degree

- Optional: “Android Basics” courses

Community Mentors

Max Waitzman

Any questions?

What’s For Today?●App Project Structure

●Adding Activities

●Playing with Views

●Introducing Lists, Adapters, ViewHolders

“In the beginning…”

SDK and Hello-World

Getting Started

SDK: Software development kit. Android’s SDK is Free and it’s greathttps://developer.android.com/sdk/index.html

3 Interesting Things:

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

Android Application Structure for now

Application

ActivityA

ActivityB ...

… Manifest ...Activity

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

How Does An Activity Look?

But to us, it looks like this:

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.

What Does An Activity Do?

Activity

Developer User

How to run the app?

Simple answer:

https://developer.android.com/training/basics/firstapp/running-app.html

How to run the app?

We need to choose a device.

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

Option 2: A Virtual Device

Open the AVD managerand create a virtual device.The run dialog will offer you to start it.

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.

Create An Activity

●Extend Activity.●Set layout as the UI : setContentView().●Declare on AndroidManifest.xml.

http://developer.android.com/guide/components/activities.html

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">

</application></manifest>

MainActivity.javapublic class MainActivity extends AppCompatActivity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}

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>

What does it take to build the project?

Actually, Quite a lot.

http://developer.android.com/sdk/installing/studio-build.html

What does it take to build the project?

But Gradle helps us with it.

http://developer.android.com/sdk/installing/studio-build.html

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...

Any Questions?

What’s For Today?●App Project structure

A Little Bit On Layouts

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>

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)

View Group (Layout)

A special kind of view.Knows to position other views on the screen.

LinearLayout

Lays items in a row or a column.Can also divide existing space by weight.

RelativeLayout

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

Tap Counter

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>

activity_main.xml<LinearLayout ... > <TextView android:id="@+id/tapdemo_display" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" />

</LinearLayout>

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.

TextView display;

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); display = (TextView)findViewById(R.id.tapdemo_display);

We’ll need a counter variable.Let’s make an int, and init it to 0.public class MainActivity extends AppCompatActivity {

int counter = 0;

Last, we’ll need to implement the click handler, that would increase the counter and set the display’s text.

activity_main.xml<LinearLayout ... > <TextView android:id="@+id/tapdemo_display" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="50" />

</LinearLayout>

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

int counter = 0;

public void increaseCounter(View view) { counter++; display.setText(Integer.toString(counter));}

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

Questions?

What’s For Today?●App Project structure

✔✔✔

Quick UML Recap

Activity ViewHas,

InflatessetContentView

ViewGroup Not a ViewGroup

extends

LinearLayout

RelativeLayout

AdapterView

ListView

TextView

ImageView

Button

Has Many

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

How Does It Work?

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

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

2.Create a row layout

Let’s consider this layout

2.Create a row layout

Let’s consider this layout40%60%

Default SizeAuto

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>

External horizontal LinearLayout

Internal vertical LL

item_color.xml<LinearLayout... >

</LinearLayout>

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; }}

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

4.Create an Adapter

Adapter

Data View

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") };

Adapter

Data Views

4.Create an Adapterpublic class ColorEntriesAdapter extends ArrayAdapter<ColorEntry> {

public ColorEntriesAdapter(Context context, ColorEntry[] colors) { super(context, 0, colors); }

ArrayAdapter

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

getView()

●Note:

If not overriding ArrayAdapter.getView() (like on Sunshine)

the adapter binds the data to a TextView,

with the resource id given on constructor.

ColorEntriesAdapter.javapublic class ColorEntriesAdapter extends ArrayAdapter<ColorEntry> { @Override public View getView(int position, View convertView, ViewGroup parent) {

//On next Slide }}

ColorEntry color = getItem(position);

getView() - common implementation

Get the data item

convertView = LayoutInflater.from(getContext()).inflate( R.layout.item_color, parent, false);Inflate a view

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

name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor())); bind view to data

name.setText(color.getName());detail.setText(color.getColor());swatch.setBackgroundColor(Color.parseColor(color.getColor()));

return convertView;return the view

What’s most expensive?ColorEntry color = getItem(position);

return convertView;

How Does It Work?

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);

return convertView;

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);

return convertView;

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

1.create View Holder object:private static class ViewHolder{ TextView name; TextView detail; FrameLayout swatch;}

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);}

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);}

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();}

5. bind the views with updated dataholder.name.setText(color.getName());holder.detail.setText(color.getColor());holder.swatch.setBackgroundColor(Color.parseColor(color.getColor()));

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;}

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;}

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

Questions ?

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/

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

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

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">

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") };

4. Create a ViewHolder objectpublic static class ColorViewHolder extends RecyclerView.ViewHolder { TextView name; TextView detail; View swatch;

public ColorViewHolder(View itemView) { super(itemView); }}

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); }

5.Create an Adapterpublic static class ColorEntriesAdapter extends RecyclerView.Adapter<ColorViewHolder> {

@Override public int getItemCount() { return colors.length; }}

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())); }}

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

7. Set LayoutManager to RecyclerView

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

recyclerView.setLayoutManager(layoutManager);

- LinearLayoutManager- GridLayoutManager- StaggeredGridLayoutManager

7. Set LayoutManager to RecyclerView Vertical LinearLayoutManager

Horizontal LinearLayoutManager

7. Set LayoutManager to RecyclerView GridLayoutManager StaggeredGridLayoutMana

To look like the ListView demo:

recyclerView.setLayoutManager(new LinearLayoutManager(this));

recyclerView.setLayoutManager(new LinearLayoutManager(this,

LinearLayoutManager.VERTICAL, false));

Questions ?

Wrap Up●App Project structure

●Playing with Views and Layouts

✔✔✔

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

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!

Thank you for coming.

Lecture #1 Creating your first android project

Software

Transcript of Lecture #1 Creating your first android project

Creating Android Applications: Develop and Design

Lecture 8 Database in Android

Creating Android Live Wallpapers using AndEngine

Lecture android best practices

Creating Android Images for Application Development

Android - Lecture 10 - Animation

ANDROID PERMISSIONS Lecture 10b

Tutorial: Android OData Application Development with REST ...infocenter.sybase.com/help/topic/com.sybase.infocenter.dc01975.02… · Creating the Android Project ... Tutorial: Android

Android | Creating Agit: Getting Git Onto Android | Roberto Tyley

Creating PDF on Android / Google App Engine

Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework

GANPAT UNIVERSITY · Web viewBuilding your first Android Application: Creating and Configuring a New Android Project, Core Files and Directories of the Android Application, Creating

Mobile Application Development – Android –Lecture 2€¦ · Android –Lecture 2 MTAT.03.262 Satish Srirama satish.srirama@ut.ee. Android Lecture 1-recap •What is Android •How

Android development - CrocsAndroid development MatúšNemec Faculty of Informatics, Masaryk University. Outline • Android Studio installation • Android fundamentals • Creating

Developing Applications for Android - Lecture#4

Lecture 18: Intermediate Android

Creating Android Applications

Lecture 24 – Google Android System

android app programming lecture 1

Android Beginner Lecture-1