.png)
How To Make Material Design App Bar/ActionBar and Style It
In this article and most of the coming articles we would get started with material design, Material design brings lot of new features to android and In this article we would see how to implement App Bar which is a special type of ToolBar (ActionBars are now called as App Bars) and how to add actions icons to App Bar
Before we start make sure you have these requirements fulfilled.
' 1. Android Studio 1.0.1 (Latest while writing the post)
2. Appcombat v7 Support library (To Support Pre Lollipop devices)
If you have the Android Studio 1.0.1 then you don't need to worry about Appcombat v7 support library as it comes with the compiled dependency of latest Appcombat support library. Before we start coding let's look at what are we trying to make.
1. Open Android Studio and create a new project and select a blank activity to start with.
2. If you are on the latest version of Android Studio you don't have to add a compiled dependency of Appcombat v7 21 if not then please make sure you add the line below in your gradel build dependencies.
4.
Now lets talk about the color scheme for our project, as you can see
from the image alongside, there are attributes which you can set to get a
basic color scheme of your App done, right now we are just dealing we
App bar so we would talk about colorPrimary and colorPrimaryDark.
colorPrimary as the name says is the primary color of your App and the
App bar while with the colorPrimaryDark you can set the color of
the status bar to a certain color.To do that you need make a file called color.xml in your values folder and add the color attributes as shown in the below code.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
And this is how the style.xml looks after adding the colors.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/ColorPrimary</item>
<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
5. Now lets make a Toolbar, Toolbar is just like any other layout which
can be placed at any place in your UI. Now as the toolbar is going to be
needed on every or most of the activities instead of making it in the activity_main.xml we would make a separate file called tool_bar.xml and include it in our activity this way we can include the same file on any activity we want our toolbar to appear.Go to res folder in your project and create a new Layout Resource File and name it tool_bar.xml with the parent layout as android.support.v7.widget.Toolbar as shown in the image below.
6. now add the background color to your tool_bar as the primary color of the app and give an elevation of 4dp for the shadow effect, this is how the tool_bar.xml looks.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/ColorPrimary"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
7. Now let's include the toolbar we just made in our main_activity file, this is how the main_activiy.xml looks.<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">
<include
android:id="@+id/tool_bar"
layout="@layout/tool_bar"
></include>
<TextView
android:layout_below="@+id/tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/TextDimTop"
android:text="@string/hello_world" />
</RelativeLayout>
At this point this is how the app looks like as below.
8. As you can see, the tool_bar layout is added, but it doesn't quite look like a Action Bar yet, that's because we have to declare the toolBar as the ActionBar in the code, to do that add the following code to the MainActivity.java, I have put comments to help you understand what's going on.
package com.example.hp1.materialtoolbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity { /* When using Appcombat support library
you need to extend Main Activity to
ActionBarActivity.
*/
private Toolbar toolbar; // Declaring the Toolbar Object
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar); // Setting toolbar as the ActionBar with setSupportActionBar() call
}
@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
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
After that, this is how the ToolBar looks
9. Notice that the name of the app "MaterialToolbar" is black as we have set the theme parent to Theme.AppCompat.Light.NoActionBar in step 3 it gives the dark text color, So if you want to set the name as light/white text then you can just add android:theme="@style/ThemeOverlay.AppCompat.Dark" in tool_bar.xml and you would get a light text color for the toolbar text, So finally tool_bar.xml looks like this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/ColorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
10. All left is to show you how to add menu items like search icon and user icon, for the icons i use icons4android.com which is free to use and I have also mentioned it in my 5 tools every android developer must know Post. I have downloaded the icons in four sizes as recommended by the official Google design guideline and added them to the drawables folder. You can see the project structure from image below.
11. now I need to add search icon and user icons in the menu_main.xml as shown below
<menu 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"
tools:context=".MainActivity">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
<item
android:id="@+id/action_search"
android:orderInCategory="200"
android:title="Search"
android:icon="@drawable/ic_search"
app:showAsAction="ifRoom"
></item>
<item
android:id="@+id/action_user"
android:orderInCategory="300"
android:title="User"
android:icon="@drawable/ic_user"
app:showAsAction="ifRoom"></item>
</menu>
And now everything is done our App bar looks just how we wanted it to look.
So finally we have done and our App Bar looks just how we had seen above and as we have used the appcombat support library it is compatible on pre lollipop devices as well, hope so you liked the post, if you did please share and comment.
| dependencies { |
| compile fileTree(dir: 'libs', include: ['*.jar']) |
| compile 'com.android.support:appcompat-v7:21.0.3' |
| } |
