Material Design - 1

 

 

Introdução

O Material Design é uma nova filosofia de design apresentada pela Google  na  google IO 2014. Trouxe muitos funcionalidades como Material Theme, Sombras personalizadas, Vector Drawables e animações personalizadas. deixando o layout do seu aplicativo moderno e ágil. Se você ainda não possui o Android Studio em sua máquina saiba como instalar aqui. Neste tutorial cobriremos a configuração do tema com material design e adicionaremos um navigation drawer utilizando o RecyclerView.

Customização do Tema 

Esta parte da configuração é de extrema importância, pois é o primeiro contato que o seu usuário terá com o app, ou seja, é o layout em si, a escolha das cores, definição de temas, essas configurações serão a identidade de seu app no mercado. Com o Android Studio aberto, crie um novo aplicativo em File->New Project, quando estiver na escolha de qual do minimum SDK, escolha a API 15, em seguida na criação da Activity escolha Blanck Activity, logo em seguida finalize a criação do projeto. O que estaremos alterando a seguir serão essas configurações:

Para escolher essas cores indico o material palette, várias cores para a configuração do tema estão disponíveis lá. Logo após a escolha de suas cores iremos implementa-las com a ajuda do Android Studio. Abra res->values->colors.xml e adicione as seguintes cores:

<resources>
<color name="colorPrimary">#2196F3</color>
<color name="colorPrimaryDark">#1976D2</color>
<color name="colorAccent">#FF4081</color>
<color name="textColor">#FFF</color>
</resources>

Agora abra res->values->strings.xml e adicione o seguinte código, essas infomações serão necessárias para a construção dos textos dentro de nosso app:

	<resources> <string name="app_name">MaterialExample</string>
	<string name="action_settings">Configurações</string>
	<string name="action_search">Procurar</string>
	<string name="drawer_open">Abrir</string>
	<string name="drawer_close">Fechar</string>
	<string name="nav_item_home">Inicio</string>
	<string name="nav_item_friends">Amigos</string>
	<string name="nav_item_notifications">Mensagens</string>
	<string-array name="nav_drawer_labels">
	<item>@string/nav_item_home</item>
	<item>@string/nav_item_friends</item>
	<item>@string/nav_item_notifications</item>
	</string-array>
	<string name="title_messages">Messages</string>
	<string name="title_friends">Friends</string>
	<string name="title_home">Home</string>
	</resources>

Depois de adicionarmos o estilo padrão para os dispositivos, adicionaremos o estilo específico para a versão Android Lollipop ou superior. Na pasta res crie uma nova pasta com o nome values-v21, dentro desta pasta crie um novo arquivo style.xml e adiciona o seguinte código:

<resources>
<style name="MyMaterialTheme" parent="MyTheme">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>

Neste momento nosso estilo básico está pronto. Para aplicarmos o tema precisamos abrir AndroidManifest.xml  e alterar o tema de nossa activity para o nosso tema personalizado:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.diogo.materialexample"><application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/MyMaterialTheme">
<activity android:name="activity.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

O próximo passo é adicionar a ToolBar que foi introduzida nesta versão do android. Para isso criaremos um novo layout para a toolbar e sempre que precisarmos dela em alguma activity, apenas a incluíremos. Crie um arquivo xml chamado toolbar.xml dentro da pasta res->layout e adicione o elemento android.support.v7.widget.Toolbar isso nos permitirá criar a toolbar com altura e estilo específico:

xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.
android.com/apk/res/android"

    xmlns:local="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:minHeight="?attr/actionBarSize"

    android:background="?attr/colorPrimary"

    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Agora abra activity_main.xml e adicione nossa toolbar com um simples include:

<RelativeLayout xmlns:android="http://schemas.android.com
/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:orientation="vertical">

        <include

            android:id="@+id/toolbar"

            layout="@layout/toolbar" />

    </LinearLayout>

</RelativeLayout>

Vamos adicionar um titulo para a nossa toolbar, abra a MainActivity.java  e adicione as seguintes mudanças.

1. Extenda a activity com AppCompatActivity.
2. Habilite a nossa toolbar com setSupportActionBar().
3. Em seguida sobrescreva os métodos onCreateOptionsMenu() e onOptionItemSelected() para que nossa action bar possa sofrer ações como busca links e etc.

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);

        getSupportActionBar().setDisplayShowHomeEnabled(true);

    }

}

Adicionando Navigation Drawer

A grande novidade aqui, será a utilização do RecycleView ao invés do ListView das versões anteriores. Em sua pasta java crie três novos pacotes: activity, adapter e model. E coloque sua ActivityMain.java para o pacote activity.

Em seguida abra build.gradle que está localizado no modulo app e adicione as novas dependências:

compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:24.0.0'

    compile 'com.android.support:recyclerview-v7:24.0.+'




Dentro de sua pasta model crie uma nova classe NavDrawerItem.java. Esta classe define cada linha de nossa navigation drawer:

package com.example.MaterialExample.model;

public class NavDrawerItem {

    private boolean showNotify;

    private String title;

    public NavDrawerItem() {

    }

    public NavDrawerItem(boolean showNotify, String title) {

        this.showNotify = showNotify;

        this.title = title;

    }

    public boolean isShowNotify() {

        return showNotify;

    }

    public void setShowNotify(boolean showNotify) {

        this.showNotify = showNotify;

    }

    public String getTitle() {

        return title;

    }

    public void setTitle(String title) {

        this.title = title;

    }

}

Dentro de res->layout crie um novo arquivo xml chamado nav_drawer_row.xml. Esse layout renderiza cada linha no menu do navigation drawer. Se quiser customizar os itens da navegação isso será feito nesse arquivo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="15dp"
android:textStyle="bold" />
</RelativeLayout>

Para adicionarmos aquela imagem de perfil padrão no cabeçalho de nossa nav drawer precisamos baixar o icone aqui e o importe em nosso projeto.

Crie outro arquivo xml chamado fragment_navigation_drawer.xml. Este layout renderiza a visualização completa de nossa navigation drawer. Contém uma seção de cabeçalho para informações do usuário e um RecyclerView para listar as opções do menu:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:background="@color/colorPrimary">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/ic_profile"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/nav_header_container"
android:layout_marginTop="15dp" />
</RelativeLayout>

Para os passos a seguir adicione todos os códigos de cada classe por meio deste link: classes

Como nossa RecyclerView é personalizável precisamos de uma classe adaptadora para renderizar o nosso layout. Dentro do pacote adapter criado anteriormente, crie uma nova classe chamada NavigationDrawerAdapter.java.


Dentro do pacote activity  crie um novo fragmento chamado FragmentDrawer.java. Clique direito em activity ->new->fragment->fragment(blanck) e adicione o código.

Agora abra a activity_main.xml, estaremos adicionando nossa navigation_drawer.


O próximo passo é modificar nossa ActivityMain.java  adicionando o seguinte código: ActivityMain

E finalizamos, assim que rodar o seu aplicativo poderá ver nossa NavigationDrawer em funcionamento e nosso tema aplicado com Material Design como o exemplo a seguir:

Nos próximos tutoriais continuaremos explorando o material design e adicionaremos funcionalidades para os links da nossa navigation drawer. Até a próxima!

Baseado em: material design,  androidhive .

Código Fonte: MaterialExample