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:

Qualquer dúvida podem entrar em contato.

Summary

Reviewer

William Felipe

Review Date

2016-06-25

Reviewed Item

Criando um menu lateral, com NavigationView

Author Rating

5