Crie um menu lateral (NavigationView)

On 25 de junho de 2016 by William Felippe

Criando um novo NavigationView

Novo NavigationView! Percebi que ainda existe uma grande procura na postagem que fiz sobre como criar um menu lateral (http://www2.decom.ufop.br/imobilis/criando-um-menu-lateral-deslizante/). Infelizmente (ou não), não tenho mais aquele código e nem crio mais meus menus daquela maneira. Então vim aqui mostrar como estou criando meus menus.

Quem não gosta de ler o tutorial e prefere partir para ação, deixo aqui embaixo o código. Podem baixar, contribuir, enfim, fiquem a vontade.

Código NavigationView:

https://github.com/williamfelippe/NavigationDrawerTutorial

Para quem, assim como eu, gosta de ler o tutorial, aí vai (rs).

A primeira coisa que vocês precisam fazer, se ainda não fizeram, é largar o Eclipse (urgente). Baixem o Android Studio, atualizem tudo e vamos lá.

Crie um novo projeto, dê um nome e escolha SDK mínimo API 15:Android 4.0.3. e uma activity em branco.

Quando o projeto estiver criado, vá até o arquivo build.gradle (module app) e adicione essas bibliotecas:

[sourcecode language=”java”]
compile ‘com.android.support:appcompat-v7:23.4.0’
compile ‘com.android.support:design:23.4.0’
compile ‘com.android.support:support-v4:23.4.0’
[/sourcecode]

Sincronize o projeto e estamos prontos para começar a codificar.

 

Criando o XML do NavigationView

Vamos trabalhar com arquivos XML primeiro.

Na pasta ‘res’, crie uma pasta chamada ‘values-v21’ e crie um arquivo XML dentro da mesma chamado ‘styles.xml’. Perceba que existe uma pasta chamada ‘values’ e que ela também contém um arquivo chamado ‘styles.xml’. É isso mesmo viu rs. Não vou explicar aqui o porquê, mas vocês podem dar uma olhada no guia da Google para saber tudo sobre o suporte a várias versões.

Dentro do arquivo ‘styles.xml’ da pasta ‘values’, insira o seguinte código:

[sourcecode language=”xml”]
<resources>

<style name="NDTutorialAppTheme" parent="AppTheme.Base"/>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>

</resources>
[/sourcecode]

No ‘styles.xml’ da pasta ‘values-21’, vai esse código:

[sourcecode language=”xml”]
<resources>

<style name="NDTutorialAppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">@android:transition/explode</item>
<item name="android:windowSharedElementExitTransition">@android:transition/explode</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>

</resources>
[/sourcecode]

Caso queiram mudar as cores da aplicação, basta ir no arquivo ‘colors.xml’ e sobreescrever as cores padrões.

No arquivo ‘dimens.xml’, adicione a linha:

[sourcecode languague=”xml”]
‘<dimen name="navigation_drawer_width">306dp</dimen>’
[/sourcecode]

Vamos para o arquivo ‘activity_main.xml’ e vamos adicionar o código que vai criar nosso menu.

[sourcecode language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity">

<FrameLayout android:id="@+id/drawer_content" android:layout_width="match_parent" android:layout_height="match_parent"/>

<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="@dimen/navigation_drawer_width" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>

[/sourcecode]

Perceba que tudo está mais simples e rápido de ser feito. O FrameLayout vai exibir o conteúdo dos nossos fragmentos e o NavigationView tem todas as configurações para gerar o nosso menu. Destaque para as tags ‘ app:headerLayout=”@layout/drawer_header”‘ e ‘app:menu=”@menu/menu_drawer”‘. A primeira é a responsável por criar o cabeçalho do nosso menu. Assim como do Gmail e tantos outros apps. Passamos o nome do XML que vai conter o layout do nosso cabeçalho. A segunda tag é onde se passa um arquivo de menu onde estarão especificados os itens do menu.

Vamos criar esses arquivos. Crie uma pasta, se ainda não tiver, chamada ‘menu’ e o arquivo chamado ‘menu_drawer’. No caso estou criando um menu com dois itens. Meu código é o seguinte:

[sourcecode language=”xml”]
<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/primary_items" android:checkableBehavior="single">
<item android:id="@+id/fragment1" android:icon="@drawable/ic_action_home" android:checked="true" android:title="@string/fragment_1"/>

<item android:id="@+id/fragment2" android:icon="@drawable/ic_action_highlight" android:title="@string/fragment_2"/>
</group>
</menu>

[/sourcecode]

Após isso, na pasta ‘layout’, crie o arquivo ‘drawer_header.xml’ e crie o layout do cabeçalho do seu menu da maneira que quiser. No meu caso o código é esse:

[sourcecode language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="230dp" android:background="?attr/colorPrimary">

<ImageView android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="0.6" android:contentDescription="@string/app_name" android:scaleType="centerCrop"/>

<LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" android:gravity="bottom" android:padding="@dimen/activity_horizontal_margin">

<RelativeLayout android:layout_width="wrap_content" android:layout_marginBottom="20dp" android:layout_height="wrap_content">

<ImageView android:id="@+id/user_photo" android:layout_width="70dp" android:layout_height="70dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/avatar" android:contentDescription="@string/app_name" android:scaleType="centerCrop" />
</RelativeLayout>

<TextView android:id="@+id/username" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="2dp" android:textColor="@android:color/white" android:textStyle="bold"/>

<TextView android:id="@+id/email" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="@android:color/white" android:textSize="12sp"/>
</LinearLayout>
</RelativeLayout>
[/sourcecode]

Agora já podemos ir para o arquivo java ‘MainActivity’ e unir todos esses componentes.

Faça sua classe implementar o Navigation.OnNavigationItemSelectedListener.

[sourcecode language=”java”]
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener
[/sourcecode]

No método ‘onCreate’, insira o seguinte código:

[sourcecode language=”java”]
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initNavigationDrawer();
initNavigationDrawerHeader();
initDrawerListener(savedInstanceState);
}
[/sourcecode]

Use Alt + Enter para criar os três métodos colocados no ‘onCreate’.

O primeiro método inicializará os componentes do menu, o segundo do cabeçalho e o terceiro é onde será verificado qual item do menu foi acionado e direcionar para o fragmento correto.

Código dos três métodos do NavigationView

O código dos três métodos estão podem ser vistos aqui embaixo:

– initNavigationDrawer

[sourcecode language=”java”]
private void initNavigationDrawer()
{
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation_view);

if (navigationView != null)
{
navigationView.setNavigationItemSelectedListener(this);
}
}
[/sourcecode]

– initNavigationDrawerHeader

[sourcecode language=”java”]
private void initNavigationDrawerHeader()
{
View header = navigationView.getHeaderView(0);
username = (TextView) header.findViewById(R.id.username);
email = (TextView) header.findViewById(R.id.email);

setupUserInformations();
}

private void setupUserInformations()
{
username.setText(R.string.test);
email.setText(R.string.test_email);
}
[/sourcecode]

– initDrawerListener

[sourcecode language=”java”]
@Override
public boolean onNavigationItemSelected(MenuItem item)
{
item.setChecked(true);
drawerLayout.closeDrawers();
selectDrawerItem(item);

return true;
}

public void selectDrawerItem(MenuItem menuItem)
{
Fragment fragment = null;

switch (menuItem.getItemId())
{
case R.id.fragment1:
fragment = new FirstFragment();
break;

case R.id.fragment2:
fragment = new SecondFragment();
break;

default:
break;
}

if(fragment != null)
{
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().replace(R.id.drawer_content, fragment).commit();

setTitle(menuItem.getTitle());
}
}
[/sourcecode]

Para o código completo, não deixem de olhar lá no Github.

Agora só resta criar os fragmentos, incluir neles uma toolbar e fazer com que a toolbar funcione como uma actionbar acionando o menu ao clicar no botão.

O código do meu FirstFragment está abaixo e pode ser usado em um fragmento base e os seus fragmentos herdarem dele, para ficar um código com menos repetições.

[sourcecode language=”java”]
public class FirstFragment extends Fragment
{
public FirstFragment()
{
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment_first, container, false);

setupToolbar(view);
return view;
}

private void setupToolbar(View view)
{
Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);

AppCompatActivity activity = (AppCompatActivity) getActivity();
activity.setSupportActionBar(toolbar);

final ActionBar bar = activity.getSupportActionBar();
if (bar != null)
{
bar.setDisplayHomeAsUpEnabled(true);
bar.setShowHideAnimationEnabled(true);
bar.setHomeAsUpIndicator(R.drawable.ic_navigation_menu);
bar.setTitle(activity.getString(R.string.fragment_1));
}
}
}
[/sourcecode]

Para finalizar falta apenas adicionar as strings, as imagens e seu menu está pronto. Sem necessidade de listView, recyclerView e adapters. Tentem fazer vocês mesmos e comparem com o código no repositório.

Olha como ficou o meu:

nav_drawer_tutorial_1

nav_drawer_tutorial_2

Qualquer dúvida podem entrar em contato.

Summary
Review Date
Reviewed Item
Criando um menu lateral, com NavigationView
Author Rating
51star1star1star1star1star

5 Responses to “Crie um menu lateral (NavigationView)”

Trackbacks & Pings

Deixe um comentário

O seu endereço de e-mail não será publicado.