Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
A Programme Under the Compumitra Series
Copyright 2014 © Sunmitra Education Technologies Limited, India
Handling Action ...
2
OUTLINE
CREATE A NEW ANDROID PROJECT TO
UNDERSTAND THE ACTION BAR
CREATING A ACTION BAR STRUCTURE.
MAKING THE ACTION ...
3
Create A New Android
Project to understand the
Action Bar Making.
4
Create New Android Project with
1) Application Name: HandlingActionBar
2) Project Name: HandlingActionBar
3) Package Nam...
5
CREATING A ACTION BAR
STRUCTURE.
To create a menu structure which appears
on clicking the menu button on your
emulator.
6
<item android:id="@+id/action_google"
android:title="@string/google"
android:orderInCategory="100"
app:showAsAction="nev...
7
<string name="google">Google</string>
<string name="yahoo">Yahoo</string>
<string name="hello_world">Select any option f...
8
MAKING THE ACTION BAR
WORK
To make the items defined in a action bar
to operate their respective functions.
9
fragment1.xml
CREATE NEW RESOURCE FILE: fragment1.xml-1
1. Go to HandlingActionBar ->res->layout.
2. Right click on layo...
10
CREATE NEW RESOURCE FILE: fragment1.xml-2
1.Copy all code from fragment_main.xml
and Paste it in fragment1.xml
11
EDITING RESOURCE FILE: fragment1.xml -1
1. Go to HandlingActionBar->res->layout->fragment1.xml file.
2. Click on the Gr...
12
EDITING RESOURCE FILE: fragment1.xml -2
Go to Pallete and drag and drop
WebView widget from Composite.
13
android:id="@+id/webView_google"
EDITING RESOURCE FILE: fragment1.xml -3
1) Go to fragment1.xml (XML view) file.
2) add...
14
CREATE NEW RESOURCE FILE: fragment2.xml-1
1. Go to HandlingActionBar ->res->layout.
2. Right click on layout.
3. Select...
15
CREATE NEW RESOURCE FILE: fragment2.xml-2
Copy all code from fragment1.xml and Paste it in fragment2.xml
2) Change its...
16
android:id="@+id/fragment_main "
EDITING RESOURCE FILE: fragment_main.xml
1) Go to fragment_main.xml (XML view) file.
...
17
public static class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup ...
18
JAVA CODE-2
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new Fragment2()).commit();
getSupportFr...
19
JAVA CODE-3
Now delete the highlighted code (which showing error because we have removed
action-settings menu item from...
20
RelativeLayout layoutmain=(RelativeLayout) findViewById(R.id.fragment_main);
RelativeLayout layoutf1 = (RelativeLayout)...
21
JAVA CODE-5
1. Typed code before
return statement
2. return statement
22
EDIT MANIFEST.XML FILE-1
1. Go to HandlingActionBar -> AndroidManifest.xml file.
2. Click on the Permissions.
3. Now cl...
23
EDIT MANIFEST.XML FILE-2
1. A new dialog box appears.
Now select Uses Permission
and click on OK.
2. Now write
android....
24
RUNNING THE APPLICATION ON EMULATOR-1
Run your application on your emulator.
2. Select any one from
the given options....
25
RUNNING THE APPLICATION ON EMULATOR-2
Similarly when you will select
Google, Google page in WebView of
Fragment1 will b...
26
CODE EXPLANATION
27
CODE EXPLANATION: menu->main.xml
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://sch...
28
CODE EXPLANATION: MainActivity.java-1
public static class Fragment1 extends Fragment {
@Override
public View onCreateVi...
29
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.lay...
30
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar
if it ...
31
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
RelativeLayout layoutmain=(RelativeLay...
32
WebView
webview=(WebView)findViewById(R.id.webView_google);
webview.loadUrl("http://www.google.co.in");
webview.setWebV...
33
MODIFICATION AND ERROR
TRIALS
34
android:icon="@drawable/google "
app:showAsAction="ifRoom" />
android:icon="@drawable/yahoo "
app:showAsAction="ifRoom"...
35
MODIFICATION TRIAL-2
1. Copy 2 images from http://sunmitra.com/cm-
android/actionbar/google.png
and http://sunmitra.c...
36
RUNNING THE APPLICATION ON EMULATOR-1
Watch the affect on Action
Bar items position.
Run your application on your emul...
37
ERROR TRIALS-1
Go to HandlingActionBar->src-><Package Name>-> MainActivity.java file
getSupportFragmentManager().begin...
38
else if(id == R.id.action_yahoo) {
layoutf2.setVisibility(View.VISIBLE);
layoutf1.setVisibility(View.GONE);
WebView web...
39
HOME EXERCISE
 Create a Project to create a Action
Bar with 3 items.
1. 1st item displays the Wikipedia.
2. 2nd item d...
40
SUMMARY
Creating a Action Bar structure.
 Making the Action Bar menu work.
Understanding the use of MenuInflater.
H...
41
Ask me and guide me at
sunmitraeducation@gmail.com.
Share this information with as many
people as possible.
Keep vis...
Upcoming SlideShare
Loading in …5
×

Handling action bar in Android

1,128 views

Published on

Helps to learn the action bar feature of Android Version 4.4 (Kit kat) in a simple easy to learn way.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Handling action bar in Android

  1. 1. 1 A Programme Under the Compumitra Series Copyright 2014 © Sunmitra Education Technologies Limited, India Handling Action Bar The action bar is a window feature that identifies the user location, and provides user actions and navigation modes.
  2. 2. 2 OUTLINE CREATE A NEW ANDROID PROJECT TO UNDERSTAND THE ACTION BAR CREATING A ACTION BAR STRUCTURE. MAKING THE ACTION BAR WORK CODE EXPLANATION MODIFICATION AND ERROR TRIALS HOME EXERCISE. SUMMARY
  3. 3. 3 Create A New Android Project to understand the Action Bar Making.
  4. 4. 4 Create New Android Project with 1) Application Name: HandlingActionBar 2) Project Name: HandlingActionBar 3) Package Name: com.company.handlingactionbar 4) Set Minimum Required SDK: API 8 5) Target SDK: API 19 6) Compile With: API 19 7) Theme: Holo Light with… 8) Activity Name: MainActivity 9) And Navigation Type: None CREATE NEW APPLICATION
  5. 5. 5 CREATING A ACTION BAR STRUCTURE. To create a menu structure which appears on clicking the menu button on your emulator.
  6. 6. 6 <item android:id="@+id/action_google" android:title="@string/google" android:orderInCategory="100" app:showAsAction="never" /> <item android:id="@+id/action_yahoo" android:title="@string/yahoo" android:orderInCategory="101" app:showAsAction="never" /> MODIFICATION IN MENUMAIN.XML FILE  Go to HandlingActionBar->res->menu->main.xml file (XML view). 1) Remove pre-written <item android:id ....... ="never"/> code. 2) Add this code with in <menu> element of main.xml file.
  7. 7. 7 <string name="google">Google</string> <string name="yahoo">Yahoo</string> <string name="hello_world">Select any option from Action Bar</string> EDITING STRINGS.XML FILE 1. Go to HandlingActionBar ->res->values->strings.xml file. 2. Click on strings.xml (XML view ). 1) Change value of string app_name to Action Bar 2) Change value of string hello_world to Select any option from Action Bar 3)Add these codes in strings.xml
  8. 8. 8 MAKING THE ACTION BAR WORK To make the items defined in a action bar to operate their respective functions.
  9. 9. 9 fragment1.xml CREATE NEW RESOURCE FILE: fragment1.xml-1 1. Go to HandlingActionBar ->res->layout. 2. Right click on layout. 3. Select New->File (from the drop down list). 1.A new dialog box appears. Type fragment1.xml in File_name and click on Finish.
  10. 10. 10 CREATE NEW RESOURCE FILE: fragment1.xml-2 1.Copy all code from fragment_main.xml and Paste it in fragment1.xml
  11. 11. 11 EDITING RESOURCE FILE: fragment1.xml -1 1. Go to HandlingActionBar->res->layout->fragment1.xml file. 2. Click on the Graphical Layout. 3.Delete the default TextView 1.Select the given TextView and press delete.
  12. 12. 12 EDITING RESOURCE FILE: fragment1.xml -2 Go to Pallete and drag and drop WebView widget from Composite.
  13. 13. 13 android:id="@+id/webView_google" EDITING RESOURCE FILE: fragment1.xml -3 1) Go to fragment1.xml (XML view) file. 2) add android:id="@+id/fragment1" in Layout (if already given, change it to fragment1 ) 4) and change ID to android:id="@+id/webView_google" in WebView
  14. 14. 14 CREATE NEW RESOURCE FILE: fragment2.xml-1 1. Go to HandlingActionBar ->res->layout. 2. Right click on layout. 3. Select New->File (from the drop down list). 1.A new dialog box appears. Type fragment2.xml in File_name and click on Finish.
  15. 15. 15 CREATE NEW RESOURCE FILE: fragment2.xml-2 Copy all code from fragment1.xml and Paste it in fragment2.xml 2) Change its ID to android:id="@+id/fragment2" in Layout 3) and change ID of WebView to android:id="@+id/webView_yahoo"
  16. 16. 16 android:id="@+id/fragment_main " EDITING RESOURCE FILE: fragment_main.xml 1) Go to fragment_main.xml (XML view) file. 2) add android:id="@+id/ fragment_main " in Layout (if already given, change it to fragment_main)
  17. 17. 17 public static class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment1, container, false); return rootView; } } public static class Fragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment2, container, false); return rootView; } } JAVA CODE-1 Add this code after the PlaceholderFragment class to create 2 Fragment classes. Go to HandlingActionBar->src-><Package Name>-> MainActivity.java file
  18. 18. 18 JAVA CODE-2 getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment2()).commit(); getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment1()).commit(); 2. Add this code before the pre-written lines in if statement of onCreate method of MainActivity class. pre-written lines in if statement of onCreate method. 1. Import android.webkit.WebView; , android.webkit.WebViewClient;, android.widget.RelativeLayout;.
  19. 19. 19 JAVA CODE-3 Now delete the highlighted code (which showing error because we have removed action-settings menu item from menu>main.xml file) from onOptionsItemSelected method of MainActivity class.
  20. 20. 20 RelativeLayout layoutmain=(RelativeLayout) findViewById(R.id.fragment_main); RelativeLayout layoutf1 = (RelativeLayout) findViewById(R.id.fragment1); RelativeLayout layoutf2 = (RelativeLayout) findViewById(R.id.fragment2); layoutmain.setVisibility(View.GONE); if (id == R.id.action_google) { layoutf2.setVisibility(View.GONE); layoutf1.setVisibility(View.VISIBLE); WebView webview=(WebView)findViewById(R.id.webView_google); webview.loadUrl("http://www.google.co.in"); webview.setWebViewClient(new WebViewClient()); webview.setHorizontalScrollBarEnabled(false); return true; } else if(id == R.id.action_yahoo) { layoutf2.setVisibility(View.VISIBLE); layoutf1.setVisibility(View.GONE); WebView webview=(WebView)findViewById(R.id.webView_yahoo); webview.loadUrl("http://www.yahoo.com"); webview.setWebViewClient(new WebViewClient()); webview.setHorizontalScrollBarEnabled(false); return true; } JAVA CODE-4 Type this code in onOptionsItemSelected method just before the return statement.
  21. 21. 21 JAVA CODE-5 1. Typed code before return statement 2. return statement
  22. 22. 22 EDIT MANIFEST.XML FILE-1 1. Go to HandlingActionBar -> AndroidManifest.xml file. 2. Click on the Permissions. 3. Now click on Add Button.
  23. 23. 23 EDIT MANIFEST.XML FILE-2 1. A new dialog box appears. Now select Uses Permission and click on OK. 2. Now write android.permission.INTERNET in the Name or you can also select from the drop down window.
  24. 24. 24 RUNNING THE APPLICATION ON EMULATOR-1 Run your application on your emulator. 2. Select any one from the given options. 1. Click on default Action bar icon to open Action bar sub menu.
  25. 25. 25 RUNNING THE APPLICATION ON EMULATOR-2 Similarly when you will select Google, Google page in WebView of Fragment1 will be displayed on your emulator screen. 1.Select Yahoo, and wait to load page. your emulator screen will display Yahoo page in WebView of Fragment2.
  26. 26. 26 CODE EXPLANATION
  27. 27. 27 CODE EXPLANATION: menu->main.xml <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="com.company.handlingactionbar.MainActivity" > <item android:id="@+id/action_google" android:title="@string/google" android:orderInCategory="100" app:showAsAction="never" /> <item android:id="@+id/action_yahoo" android:title="@string/yahoo" android:orderInCategory="101" app:showAsAction="never" /> </menu> The first attribute ID allows the item tag to be given a name and referenced in your Java code. Title attribute id is the title or label for the menu button. Menu tag is used to use menu. This keyword Defines, When and how this item should appear as an action item in the Action Bar.
  28. 28. 28 CODE EXPLANATION: MainActivity.java-1 public static class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment1, container, false); return rootView; } } public static class Fragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment2, container, false); return rootView; } } Here we creates 2 classes Fragment1 and Fragment2 for fragment1 and fragment2 layout.
  29. 29. 29 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment1()).commit(); getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment2()).commit(); getSupportFragmentManager().beginTransaction() .add(R.id.container, new PlaceholderFragment()).commit(); } } These lines adds Fragment1, Fragment2, PlaceholderFragment to MainActivity. CODE EXPLANATION: MainActivity.java-2
  30. 30. 30 @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } Inflate the menu; this adds items to the action bar if it is present. Uses the inflate( ) method and the R.menu.main path to our mein.xml file. The R equates to the res folder of our project. CODE EXPLANATION: MainActivity.java-3
  31. 31. 31 public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); RelativeLayout layoutmain=(RelativeLayout) findViewById(R.id.fragment_main); RelativeLayout layoutf1 = (RelativeLayout) findViewById(R.id.fragment1); RelativeLayout layoutf2 = (RelativeLayout) findViewById(R.id.fragment2); layoutmain.setVisibility(View.GONE); if (id == R.id.action_google) { layoutf2.setVisibility(View.GONE); layoutf1.setVisibility(View.VISIBLE); CODE EXPLANATION: MainActivity.java-4 Gets the selected Action Bar item ID. This method is called on selection of menu item. Creates the objects of fragment_main, fragment1 and fragment2 layout types. Sets the visibility of layoutmain to hidden Sets the visibility of layoutf1 (fragment1) and Checks, whether selected item ID matches with given item ID or not.
  32. 32. 32 WebView webview=(WebView)findViewById(R.id.webView_google); webview.loadUrl("http://www.google.co.in"); webview.setWebViewClient(new WebViewClient()); webview.setHorizontalScrollBarEnabled(false); return true; } else if(id == R.id.action_yahoo) { layoutf2.setVisibility(View.VISIBLE); layoutf1.setVisibility(View.GONE); WebView webview=(WebView)findViewById(R.id.webView_yahoo); webview.loadUrl("http://www.yahoo.com"); webview.setWebViewClient(new WebViewClient()); webview.setHorizontalScrollBarEnabled(false); return true; } return super.onOptionsItemSelected(item); } Creates the object of webview and sets its URL. CODE EXPLANATION: MainActivity.java-5 Checks, whether selected item ID matches with given item ID or not.
  33. 33. 33 MODIFICATION AND ERROR TRIALS
  34. 34. 34 android:icon="@drawable/google " app:showAsAction="ifRoom" /> android:icon="@drawable/yahoo " app:showAsAction="ifRoom" /> MODIFICATION TRIAL-1 1) Add attribute android:icon="@drawable/ google" in action_google item 1. Go to HandlingActionBar->res->menu->main.xml file (XML view). 3) Add Change attribute value of app:showAsAction to "ifRoom" from both items. 2) Add attribute android:icon="@drawable/yahoo" in action_google item Note: If Minimum Required SDK of your app is Android 3.0 and Above (If your app is not using the Support Library for compatibility) then use android:showAsAction instead of app:showAsAction
  35. 35. 35 MODIFICATION TRIAL-2 1. Copy 2 images from http://sunmitra.com/cm- android/actionbar/google.png and http://sunmitra.com/cm-android/actionbar/yahoo.png Samples 1- google.png 2-yahoo.png Pasted files. 3) And paste both images in all drawable folders.
  36. 36. 36 RUNNING THE APPLICATION ON EMULATOR-1 Watch the affect on Action Bar items position. Run your application on your emulator .
  37. 37. 37 ERROR TRIALS-1 Go to HandlingActionBar->src-><Package Name>-> MainActivity.java file getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment2()).commit(); getSupportFragmentManager().beginTransaction() .add(R.id.container, new Fragment1()).commit(); Pre-written lines. Remove these lines from onCreate method of MainActivity class and write again after the pre-written lines. RUN project and watch the affects.
  38. 38. 38 else if(id == R.id.action_yahoo) { layoutf2.setVisibility(View.VISIBLE); layoutf1.setVisibility(View.GONE); WebView webview=(WebView)findViewById(R.id.webView_yahoo); webview.loadUrl("http://www.yahoo.com"); webview.setWebViewClient(new WebViewClient()); webview.setHorizontalScrollBarEnabled(false); return true; } ERROR TRIALS-2 Go to HandlingActionBar->src-><Package Name>-> MainActivity.java file 1.Remove these lines from onOptionsItemSelected method of MainActivity class. 2.RUN project and watch the affects on Action Bar item selection.
  39. 39. 39 HOME EXERCISE  Create a Project to create a Action Bar with 3 items. 1. 1st item displays the Wikipedia. 2. 2nd item displays Youtube. 3. 3rd item should be Back link to return on main fragment.
  40. 40. 40 SUMMARY Creating a Action Bar structure.  Making the Action Bar menu work. Understanding the use of MenuInflater. Handling Action Bar item selection. Adding Action Bar items in different ways.
  41. 41. 41 Ask me and guide me at sunmitraeducation@gmail.com. Share this information with as many people as possible. Keep visiting www.sunmitra.com for programme updates. THANK YOU…

×