Introduction to Toolbar and Material Design in Android Development

import android.view.MenuItem;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // get the reference of

Toolbar

toolbar.setTitle("Tool Bar"); // set Title for Toolbar

toolbar.setLogo(R.mipmap.ic_launcher_round); // set logo for Toolbar

setSupportActionBar(toolbar); // Setting/replace toolbar as the ActionBar

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

// Display menu item's title by using a Toast.

if (id == R.id.action_settings) {

Toast.makeText(getApplicationContext(), "Setting Menu",

Toast.LENGTH_SHORT).show();

return true;

} else if (id == R.id.action_search) {

Toast.makeText(getApplicationContext(), "Search Menu",

Toast.LENGTH_SHORT).show();

return true;

} else if (id == R.id.action_user) {

Toast.makeText(getApplicationContext(), "User Menu",

Toast.LENGTH_SHORT).show();

return true;

}

return super.onOptionsItemSelected(item);

}

}

CODE SOURCE

Le code source du projet ToolBarSimpleDemo.rar est téléchargeable à partir du lien:

https://drive.google.com/open?id=11dQZThwH9_sYmuswUByYyPfrY8XsZbqc

Activité 1 : Tool Bar (avec Fragments)

Créer un projet Android « ToolBarDemo » implémentant l'interface utilisateur ci-dessous :

• Projet Android Studio:

5.

6.

7.

8.

Le nom du projet : ToolBarDemo,

Plateforme Android à utiliser : >= 7.0

Package : tn.rnu.isi

Cocher (AppCompact)

• Fichier java de l'activité principale: MainActivity.java

• Fichier layout de l'UI : activity_main.xml

• Autre activités :

• Fichier de ressources sous res/values : string.xml & colors.xml & style.xml

• Ajouter images sous res/drawable : ic_search.png & user.png

Help - Actvité 1 : Simple Tool avec Fragment

Le fichier activity_main.xml :

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

<android.support.v4.widget.DrawerLayout

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:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".MainActivity">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<!-- include your toolbar layout-->

<include layout="@layout/toolbar" />

<!-- Let's add fragment -->

<FrameLayout

android:id="@+id/frame"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

<!--

Navigation view to show the menu items

-->

<android.support.design.widget.NavigationView

android:id="@+id/navigation"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:menu="@menu/nav_items" />

</android.support.v4.widget.DrawerLayout>

Le fichier fragment_first.xml:

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

<FrameLayout 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=".FirstFragment">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="On est dans First Fragment"

android:textSize="25sp" />

</FrameLayout>

Le fichier toolbar.xml:

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

<android.support.v7.widget.Toolbar

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

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

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorPrimary"

android:theme="@style/ThemeOverlay.AppCompat.Dark"

app:navigationIcon="@drawable/menu_icon"

app:title="Tool Bar Demo"

app:titleTextColor="#FFF">

<!-- navigation button and title for the Toolbar-->

</android.support.v7.widget.Toolbar>

Le fichier menu_main.xml sous res/menu :

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

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

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

<item

android:id="@+id/action_settings"

android:orderInCategory="100"

android:title="Settings"

app:showAsAction="never" />

<item

android:id="@+id/action_search"

android:orderInCategory="200"

android:title="Search"

android:icon="@mipmap/ic_launcher"

app:showAsAction="never"

></item>

<item

android:id="@+id/action_user"

android:orderInCategory="300"

android:title="User"

android:icon="@mipmap/ic_launcher"

app:showAsAction="ifRoom"></item>

</menu>

Le fichier nav_items.xml sous res/menu :

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

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

<group android:checkableBehavior="single">

<!--

Add menu items here

Menu items with icon and Title

-->

<item

android:id="@+id/first"

android:icon="@mipmap/ic_launcher"

android:title="First Menu" />

<item

android:id="@+id/second"

android:icon="@mipmap/ic_launcher"

android:title="Second Menu" />

<item

android:id="@+id/third"

android:icon="@mipmap/ic_launcher"

android:title="Third Menu" />

</group>

</menu>

La classe MainActivity.java :

package tn.rnu.isi.toolbardemo;

import android.os.Bundle;

import android.support.design.widget.NavigationView;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentTransaction;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Gravity;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

DrawerLayout dLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

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

setSupportActionBar(toolbar);

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dLayout.openDrawer(Gravity.LEFT);

}

});

setNavigationDrawer(); // call method

}

private void setNavigationDrawer() {

dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

NavigationView navView = (NavigationView) findViewById(R.id.navigation);

navView.setNavigationItemSelectedListener(new

NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

Fragment frag = null; // create a Fragment Object

int itemId = menuItem.getItemId(); // get selected menu item's id

// check selected menu item's id and replace a Fragment Accordingly

if (itemId == R.id.first) {

frag = new FirstFragment();

} else if (itemId == R.id.second) {

frag = new SecondFragment();

} else if (itemId == R.id.third) {

frag = new ThirdFragment();

}

// display a toast message with menu item's title

Toast.makeText(getApplicationContext(), menuItem.getTitle(),

Toast.LENGTH_SHORT).show();

if (frag != null) {

FragmentTransaction transaction =

getSupportFragmentManager().beginTransaction();

transaction.replace(R.id.frame, frag); // replace a Fragment with

Frame Layout

transaction.commit(); // commit the changes

dLayout.closeDrawers(); // close the all open Drawer Views

return true;

}

return false;

}

});

}

}

La classe FirstFragment.java :

package tn.rnu.isi.toolbardemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FirstFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_first, container, false);

}

}

CODE SOURCE

Le code source du projet ToolBarDemo.rar est téléchargeable à partir du lien:

https://drive.google.com/open?id=1uBZlXhuOfjWEAzW0M3A4qEUpMu6RBc9z

REFERENCES

[1] Android Developer’s Guide – http://developer.android.com/

[2] Les Tutoriels de Victor Matos :http://grail.cba.csuohio.edu/~matos/notes/cis-493/

[3] Le livre écrit par Florent Garin « Android »

[4] Le livre de Mark Murphy chez Pearson