Desenvolvendo para Android com componentes Open Source

Desenvolvendo para

Android com componentes

Open SourcePor Adriel Café

[email protected]

http://github.com/adrielcafe

http://pt.slideshare.net/adrielcafe

http://facebook.com/adrielcafe

ANTES DE COMEÇAR...

http://bit.do/s-task

Agenda

Introdução rápida ao Android

Views: nativas x open source

Banco de Dados: nativo x open source

O que vamos desenvolver?

Let’s code!

Introdução Rápida ao

Android

O que é o Android?

Sistema operacional para dispositivos móveis

Desenvolvido pelo Google

Baseado no Linux

Open Source

http://source.android.com

Primeiro smartphone Android foi lançado em 2008

Versões do Android

O Que Preciso Para

Desenvolver?

Linguagens

Java

XML

SQL

Ferramentas

Android Studio

Android SDK

http://developer.android.com/sdk

Views Nativas

Views: Nativas x Open Source

Button

Nativo AlternativosFlatButtonhttps://github.com/hoang8f/android-flat-button

CircleButtonhttps://github.com/markushi/android-circlebutton

Button

Nativo AlternativosCircularProgressButtonhttps://github.com/dmytrodanylyk/circular-progress-button

ProcessButtonhttps://github.com/dmytrodanylyk/android-process-button

RadioButton

Nativo AlternativosNoCircleRadioButtonhttps://github.com/Euphrates-Media/No-Circle-Radio-Button

SegmentedControlhttps://github.com/hoang8f/android-segmented-control

Switch

Nativo AlternativosCoolSwitchhttps://github.com/Serchinastico/CoolSwitch

SwitchButtonhttps://github.com/kyleduo/SwitchButton

ProgressBar

Nativo AlternativosSmoothProgressBarhttps://github.com/castorflex/SmoothProgressBar

RoundCornerProgressBarhttps://github.com/akexorcist/Android-RoundCornerProgressBar

ProgressBar

Nativo AlternativosNumberProgressBarhttps://github.com/daimajia/NumberProgressBar

RoundCornerProgressBarhttps://github.com/akexorcist/Android-RoundCornerProgressBar

SeekBar

Nativo AlternativosDiscreteSeekBarhttps://github.com/AnderWeb/discreteSeekBar

VerticalSeekBarhttps://github.com/h6ah4i/android-verticalseekbar

Dialog

Nativo AlternativosL-Dialogshttps://github.com/lewisjdeane/L-Dialogs

Material Dialogshttps://github.com/afollestad/material-dialogs

Dialog

Nativo AlternativosNiftyDialogEffectshttps://github.com/sd6352051/NiftyDialogEffects

Dialog

Nativo AlternativosSweet Alerthttps://github.com/pedant/sweet-alert-dialog

Dialog

Nativo AlternativosDialogPlushttps://github.com/orhanobut/dialogplus

ListView

Nativo AlternativosFlabbyListViewhttps://github.com/jpardogo/FlabbyListView

ListView

Nativo AlternativosSwipeMenuListViewhttps://github.com/baoyongzhang/SwipeMenuListView

ListView

Nativo AlternativosYoutubeListViewhttps://github.com/Laimiux/android-youtube-listview

Menu

Nativo AlternativosContextMenuhttps://github.com/Yalantis/Context-Menu.Android

Menu

Nativo AlternativosSideMenuhttps://github.com/Yalantis/Side-Menu.Android

Pull to Refresh

Nativo AlternativosNão tem SwipyRefreshLayout

https://github.com/OrangeGangsters/SwipyRefreshLayout

Pull to Refresh

Nativo AlternativosNão tem Phoenix Pull-to-Refresh

https://github.com/Yalantis/Phoenix

Banco de Dados: Nativo x Open Source

Banco de Dados:Biblioteca Nativa

Criando uma tabela CRUDdb.execSQL(“CREATE TABLE IF NOT EXISTS Category (

id INTEGER PRIMARY KEY, name TEXT

);”);

// Selectdb.execSQL(“SELECT * FROM Category;");

// Insertdb.execSQL("INSERT INTO CategoryValues (‘xyz’);");

// Updatedb.execSQL(“UPDATE Category SET name = “abc” WHERE id = 1;");

// Deletedb.execSQL(“DELETE FROM CategoryWHERE id = 1;");

Banco de Dados:ActiveAndroid

Criando uma tabela CRUD@Table(name = "Categories")public class Category extends Model {

@Column(name = "Name")public String name;

}

// Selectnew Select()

.from(Category.class)

.execute();

// Insert & Updatecategory.save();

// Deletecategory.delete();

https://github.com/pardom/ActiveAndroid

Banco de Dados:Sugar ORM

Criando uma tabela CRUD

https://github.com/satyan/sugar

public class Category extendsSugarRecord<Category> {

public String name;}

// SelectSelect

.from(Category.class)

.list();

// Insert & Updatecategory.save();

// Deletecategory.delete();

O Que Vamos Desenvolver?

Lista de Tarefas

Wunderlist Evernote Any.DO

Lista de Tarefas

TodoistGoogle Keep J.Todo

Vamos desenvolver o

S-Task!

S-Task

S-Task

Google Play

http://play.google.com/store/apps/details?id=com.

adrielcafe.stask

GitHub

http://github.com/adrielcafe/S-Task

S-Task

Iremos usar os seguintes componentes open source:

Sugar ORM

http://github.com/satyan/sugar

NiftyDialogEffects

http://github.com/sd6352051/NiftyDialogEffects

AndroidSwipeLayout

http://github.com/daimajia/AndroidSwipeLayout

FloatingActionButton

http://github.com/makovkastar/FloatingActionButton

FloatingLabelWidgets

http://github.com/marvinlabs/android-floatinglabel-widgets

Let’s Code!

1º - Configurar o Projeto

1. Baixar o projeto

http://bit.do/s-task

2. Abrir no Android Studio

2º - Entender o Projeto

AndroidManifest.xmlContém a declaração das Activities

TasksActivityActivity da tela principal, exibe a lista de tarefas

TaskEditActivityActivity da tela de criação e edição das tarefas

TaskAdapterAdapter responsável por criar as linhas da lista

TaskModelo que representa uma tarefa e a tabela no banco de dados

res/layout/Contém as interfaces gráficas das Activities

build.gradle (Module: app)Arquivo de configuração do aplicativo

3º - Configurar app/build.gradle

apply plugin: 'com.android.application'

android {compileSdkVersion 22buildToolsVersion "22.0.1"...

}

dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:22.0.0'compile 'com.nineoldandroids:library:2.4.0'compile 'com.github.satyan:sugar:1.3.1@aar'compile

'com.github.sd6352051.niftydialogeffects:niftydialogeffects:1.0.0'compile "com.daimajia.swipelayout:library:1.2.0@aar"compile 'com.melnykov:floatingactionbutton:1.3.0@aar'compile 'com.marvinlabs:android-floatinglabel-widgets:1.6.1@aar'

}

4º - Criar ListView em

activity_tasks.xml

<ListViewandroid:id="@android:id/list"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"android:divider="@color/accent"android:dividerHeight="0.25dp"/>

5º - Implementar

FloatingActionButton em

activity_tasks.xml

<com.melnykov.fab.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:layout_margin="16dp"android:src="@drawable/ic_add"app:fab_colorNormal="@color/primary” />

6º - Implementar

FloatingLabelEditText em

activity_task_edit.xml

<com.marvinlabs.widget.floatinglabel.edittext.FloatingLabelEditText

android:id="@+id/title"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="10dp"app:flw_inputWidgetTextSize="22sp"app:flw_labelTextSize="18sp"app:flw_labelText="@string/title" />

7º - Implementar Sugar ORM

Task TasksActivity

private void saveTask(){task.title = “...";task.description = “...";task.save();

}

private void loadTasks(){tasks = Select

.from(Task.class)

.orderBy("id DESC")

.list();}

public void deleteTask(Task task){task.delete();tasks.remove(task);tasksAdapter.notifyDataSetChanged();

}

public class Task extends SugarRecord<Task> {public String title;public String description;public boolean done;

public Task(){

}}

TaskEditActivity

8º - Implementar TaskAdapter e

SwipeLayout em TasksActivity

private void loadTasks(){...if(!tasks.isEmpty()){

tasksAdapter = new TaskAdapter(this, tasks);tasksList.setAdapter(tasksAdapter);

}}

public void toggleTaskStatus(Task task, ViewstatusView){

if(task.done){task.done = false;statusView.setBackgroundColor(getResources()

.getColor(R.color.gray));} else {

task.done = true;statusView.setBackgroundColor(getResources()

.getColor(R.color.accent));}task.save();

}

9º - Implementar NiftyDialog em

TasksActivity

public void showTask(final Task task){final NiftyDialogBuilder dialog =

NiftyDialogBuilder.getInstance(this);dialog.withTitle(task.title)

.withMessage(task.description)

.withDialogColor(getResources().getColor(R.color.primary))

.withEffect(Effectstype.SlideBottom)

.withDuration(300)

.withButton1Text(getString(R.string.close)).setButton1Click(new

View.OnClickListener() {@Overridepublic void onClick(View v) {

dialog.hide();}

}).show();

}

Desafio

Implementar novas funcionalidades:

Categorias

Lembrar

Anexos

...

http://github.com/adrielcafe/S-Task

Links

Views open source

https://android-arsenal.com/free

Banco de Dados ORM

https://android-arsenal.com/tag/69

Gerador de Ícones

http://romannurik.github.io/AndroidAssetStudio

Gerador de Cores

http://materialpalette.com

Obrigado!

Adriel Café

[email protected]

http://github.com/adrielcafe

http://pt.slideshare.net/adrielcafe

http://facebook.com/adrielcafe