How to set ToolBar and replace ActionBar - Android

1. Build a XML file, toolbar.xml, in layout folder in your Android project.


2. Toolbar.xml can be like this as below for a default style.

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/holo_blue_dark"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

There are some important commands and do not miss them becuase they can affect the size, color,.... as you see the same with ActionBar.

3. Include toolbar.xml to the activity object you need to add the ToolBar

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/background_light"  >
    <!-- toolbar instead of action bar -->
    <include layout="@layout/toolbar" />
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
    
...........
        </ScrollView>


</LinearLayout>


4. Go back to the java code for activity to import those five important things as below:

import android.support.v7.app.ActionBar;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class ViewRecordDetailActivity extends AppCompatActivity
{    
     .......( your code)
}    

5. Initialize the ToolBar and replace ActionBar in onCreate function.

super.onCreate( savedInstanceState );
setContentView( R.layout.activity_target_signal );
......
// initialize tool bar at the top of activity
Toolbar toolbar = ( Toolbar )findViewById( R.id.toolbar );
// make toolbar instead of action bar, even option menu.
setSupportActionBar( toolbar );
// get new action bar with bundled toolbar object.
ActionBar ab = getSupportActionBar();
if( ab != null ) 
{
    ab.setDisplayHomeAsUpEnabled( true );
    ab.setDisplayShowTitleEnabled( true );
    .........
}

p.s. you can not use getActionBar() because it is not for android.support.v7 and it is work for extends Activity, not extends AppCompatActivity. Finally, when you initialize the toolbar object, do the action not earlier than setContentView() function.

6. Change styles.xml in folder values and values-v21 ( if valuse-v21 is not existed in your project folder, please create one manually as below )


7. styles.xml must look like below:

in values:

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

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    
        <item name="colorPrimary">@color/holo_blue_dark</item>
        <item name="colorPrimaryDark">@color/holo_blue_light</item>
        <item name="colorAccent">@color/black</item>
    </style>
    
    <style name="MyAppTheme" parent="@style/AppTheme">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowActionBarOverlay">true</item>
    </style>

</resources>

in values-v21:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
                                            
    <style name="MyAppTheme" parent="AppTheme">
      <item name="android:windowContentTransitions">true</item>
      <item name="android:windowAllowEnterTransitionOverlap">true</item>
      <item name="android:windowAllowReturnTransitionOverlap">true</item>
      <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
      <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
                
</resources>

p.s. In SDK version 21 or higher, Android accept user to set style value to affect the looks of status bar and toolbar/actionbar for transtion overlap...., etc. So, if you want the effect on them.





Well, All Finished, Try yourself



留言

這個網誌中的熱門文章

7-ELEVEN 電子發票明細查詢方式

Java 使用 regular expression 正則表達,過濾特殊字元,反斜線處理重點

Ubuntu GUI中,無法啟動WIFI連結解決方法