These days android came up with new material design so lets get updated with one of the many features ie. Action Bar which is also special type of tool bar.
Before we start make sure you have these requirements fulfilled.
- Android Studio.
- Appcombat v7 Support library (To Support Pre Lollipop devices).
Lets get Started .
1) Create a new new project from android studio and select a blank activity.
2) Go to yours styles.xml file and customize it as follows.
* Change the theme to Theme.AppCompat.Light.NoActionBar. (now there will be no action bar in your activity by default).
3) Define the color for your action bar and the status bar (according to the android guidelines select the color of the status bar a bit dark and the color of the action bar a bit light in comparison to the status bar).
For Example.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
Now add these colors to the style created above.
For Example
<span style="font-size: x-small;"><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>
</span>
4) Now create an xml file for the tool bar which will be shown in other activities, also add the app primary color as background to the toolbar xml you can add elevation to show sadow effect on the toolbar.
For Example.
<span style="font-size: x-small;"><?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>
</span>
5) Include this tool bar to the activities you want(I am includeing it to my main activity).
For Example
<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>
Now add the following code to your Main Activity
- Extend your main activity from action bar
MainActivity extends ActionBarActivity
- Get the reference of tool bar from xml and pass it to the setSupportActionBar method as parameter.
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar);
6) Add menu items that you want to display on action bar in menu_main.xml file
For Example.
<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>
Thats all now use your tool bar in the activity you want to show
0 Comment(s)