Operating System

Android

In this tutorial we will try to create a Simple Fragment Application using Android. This simple app will open some new layout as a fragment to display it within the main layout. Android is an open source so that developer find it easy to develop and expand new features. Android is available to any devices such as TV, phones, watches etc. So let's now do the coding...

Getting Started:

First you will have to download & install the Android Development IDE (Android Studio or Eclipse). Android Studio is an open source development feel free to develop your things.

Here's the link for the Android Studio https://developer.android.com/studio/index.html.

Layout Design

We will now create the design for the application, first locate the layout file called activity_main.xml, this is the default name when create a new activity. Then write these codes inside your layout file.

1. <?
   
   xml version=
   
   "1.0"
   
   encoding=
   
   "utf-8"
   
   ?>
   
2. <
   
   RelativeLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
3. xmlns:
   
   app=
   
   "http://schemas.android.com/apk/res-auto"
   
4. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
5. android:
   
   layout_width=
   
   "match_parent"
   
6. android:
   
   layout_height=
   
   "match_parent"
   
7. android:
   
   orientation=
   
   "vertical"
   
8. android:
   
   weightSum=
   
   "1"
   
9. tools:
   
   context=
   
   "com.razormist.simplefragmentapplication.MainActivity"
   
   >
   
10. 
    
11. <
    
    TextView
    
12. android:
    
    id=
    
    "@+id/tv_title"
    
13. android:
    
    layout_height=
    
    "wrap_content"
    
14. android:
    
    layout_width=
    
    "wrap_content"
    
15. android:
    
    layout_alignParentTop=
    
    "true"
    
16. android:
    
    text=
    
    "Please Select A Color"
    
17. android:
    
    layout_marginTop=
    
    "20dp"
    
18. android:
    
    layout_centerHorizontal=
    
    "true"
    
19. android:
    
    textSize=
    
    "20sp"
    
    />
    
20. 
    
21. <
    
    fragment
    
22. android:
    
    id=
    
    "@+id/f_display"
    
23. android:
    
    layout_below=
    
    "@+id/tv_title"
    
24. android:
    
    layout_width=
    
    "match_parent"
    
25. android:
    
    layout_height=
    
    "400dp"
    
26. android:
    
    name=
    
    "layout.blankfragment"
    
27. tools:
    
    layout=
    
    "@layout/fragment_blankfragment"
    
    >
    
28. </
    
    fragment>
    
29. 
    
30. <
    
    Button
    
    
    
31. android:
    
    id=
    
    "@+id/btn_first_fragment"
    
32. android:
    
    layout_width=
    
    "wrap_content"
    
33. android:
    
    layout_height=
    
    "wrap_content"
    
34. android:
    
    onClick=
    
    "UpdateFragment"
    
35. android:
    
    text=
    
    "Green"
    
36. android:
    
    layout_alignParentBottom=
    
    "true"
    
37. android:
    
    layout_marginLeft=
    
    "22dp"
    
    />
    
38. 
    
39. <
    
    Button
    
    
    
40. android:
    
    id=
    
    "@+id/btn_second_fragment"
    
41. android:
    
    layout_width=
    
    "wrap_content"
    
42. android:
    
    layout_toRightOf=
    
    "@id/btn_first_fragment"
    
43. android:
    
    layout_height=
    
    "wrap_content"
    
44. android:
    
    onClick=
    
    "UpdateFragment"
    
45. android:
    
    layout_alignParentBottom=
    
    "true"
    
46. android:
    
    text=
    
    "Red"
    
    />
    
47. <
    
    Button
    
    
    
48. android:
    
    id=
    
    "@+id/btn_third_fragment"
    
49. android:
    
    layout_width=
    
    "wrap_content"
    
50. android:
    
    layout_alignParentBottom=
    
    "true"
    
51. android:
    
    layout_toRightOf=
    
    "@id/btn_second_fragment"
    
52. android:
    
    layout_height=
    
    "wrap_content"
    
53. android:
    
    onClick=
    
    "UpdateFragment"
    
54. android:
    
    text=
    
    "Blue"
    
    />
    
55. <
    
    Button
    
    
    
56. android:
    
    id=
    
    "@+id/btn_fourth_fragment"
    
57. android:
    
    layout_width=
    
    "wrap_content"
    
58. android:
    
    layout_alignParentBottom=
    
    "true"
    
59. android:
    
    layout_toRightOf=
    
    "@id/btn_third_fragment"
    
60. android:
    
    layout_height=
    
    "wrap_content"
    
61. android:
    
    onClick=
    
    "UpdateFragment"
    
62. android:
    
    text=
    
    "Pink"
    
    />
    
63. 
    
64. </
    
    RelativeLayout>
    

Android Manifest File

The Android Manifest file provides essential information about your app to the Android system in which the system must required before running the code. It describe the overall information about the application. It contains some libraries that needed to access the several method within the app.

1. <?
   
   xml version=
   
   "1.0"
   
   encoding=
   
   "utf-8"
   
   ?>
   
2. <
   
   manifest xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
3. package
   
   =
   
   "com.razormist.simplefragmentapplication"
   
   >
   
4. 
   
5. <
   
   application
   
6. android:
   
   allowBackup=
   
   "true"
   
7. android:
   
   icon=
   
   "@mipmap/ic_launcher"
   
8. android:
   
   label=
   
   "@string/app_name"
   
9. android:
   
   roundIcon=
   
   "@mipmap/ic_launcher_round"
   
10. android:
    
    supportsRtl=
    
    "true"
    
11. android:
    
    theme=
    
    "@Style/AppTheme"
    
    >
    
12. <
    
    activity android:
    
    name=
    
    ".MainActivity"
    
13. android:
    
    configChanges=
    
    "orientation"
    
14. android:
    
    screenOrientation=
    
    "portrait"
    
    >
    
15. <
    
    intent-
    
    filter>
    
16. <
    
    action android:
    
    name=
    
    "android.intent.action.MAIN"
    
    />
    
17. 
    
18. <
    
    category android:
    
    name=
    
    "android.intent.category.LAUNCHER"
    
    />
    
19. </
    
    intent-
    
    filter>
    
20. </
    
    activity>
    
21. </
    
    application>
    
22. </
    
    manifest>
    

Fragments

Fragment represented as a behavior to utilize the event on a layout You can think of a fragment as a modular section of an activity, which have receiver and sender of data information. To create a fragment, go to layout then right click select New then Fragment lastly Fragment(Blank). A new layout and java will be created at the same time.

Create a Five Fragments named them as follow: FirstFragment, SecondFragment, ThirdFragment, FourthFragment, and last blankfragment. After that open the java file of one of the fragment then delete some unnecessary block of codes, and leave only some codes as shown below.

1. package
   
   layout
   
   ;
   
2. 
   
3. import
   
   android.content.Context
   
   ;
   
4. import
   
   android.net.Uri
   
   ;
   
5. import
   
   android.os.Bundle
   
   ;
   
6. import
   
   android.support.v4.app.Fragment
   
   ;
   
7. import
   
   android.view.LayoutInflater
   
   ;
   
8. import
   
   android.view.View
   
   ;
   
9. import
   
   android.view.ViewGroup
   
   ;
   
10. 
    
11. import
    
    com.razormist.simplefragmentapplication.R
    
    ;
    
12. 
    
13. 
    
14. public
    
    class
    
    FirstFragment extends
    
    Fragment {
    
15. 
    
16. @Override
    
17. public
    
    View
    
    onCreateView(
    
    LayoutInflater inflater, ViewGroup container,
    
18. Bundle savedInstanceState)
    
    {
    
19. // Inflate the layout for this fragment
    
20. return
    
    inflater.inflate
    
    (
    
    R.layout
    
    .fragment_first
    
    , container, false
    
    )
    
    ;
    
21. }
    
22. }
    

Do these to the rest of the fragment java file.

Now were done with the Fragment Java File let's now go to the layout of each individual fragment. Write these corresponding block of codes inside the xml file as shown below.

fragment_blankfragment.xml

1. <
   
   FrameLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
2. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
3. android:
   
   layout_width=
   
   "match_parent"
   
4. android:
   
   layout_height=
   
   "match_parent"
   
5. tools:
   
   context=
   
   "layout.blankfragment"
   
   >
   
6. 
   
7. <!--
   
   TODO:
   
   Update blank fragment layout -->
   
8. 
   
9. </
   
   FrameLayout>
   

fragment_first.xml

1. <
   
   FrameLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
2. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
3. android:
   
   layout_width=
   
   "match_parent"
   
4. android:
   
   layout_height=
   
   "match_parent"
   
5. tools:
   
   context=
   
   "layout.FirstFragment"
   
6. android:
   
   background=
   
   "#00ff00"
   
   >
   
7. 
   
8. <!--
   
   TODO:
   
   Update blank fragment layout -->
   
9. 
   
10. </
    
    FrameLayout>
    

fragment_second.xml

1. <
   
   FrameLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
2. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
3. android:
   
   layout_width=
   
   "match_parent"
   
4. android:
   
   layout_height=
   
   "match_parent"
   
5. tools:
   
   context=
   
   "layout.SecondFragment"
   
6. android:
   
   background=
   
   "#ff0000"
   
   >
   
7. 
   
8. <!--
   
   TODO:
   
   Update blank fragment layout -->
   
9. 
   
10. 
    
11. </
    
    FrameLayout>
    

fragment_third.xml

1. <
   
   FrameLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
2. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
3. android:
   
   layout_width=
   
   "match_parent"
   
4. android:
   
   layout_height=
   
   "match_parent"
   
5. tools:
   
   context=
   
   "layout.ThirdFragment"
   
6. android:
   
   background=
   
   "#0000ff"
   
   >
   
7. 
   
8. <!--
   
   TODO:
   
   Update blank fragment layout -->
   
9. 
   
10. </
    
    FrameLayout>
    

fragment_fourth.xml

1. <
   
   FrameLayout xmlns:
   
   android=
   
   "http://schemas.android.com/apk/res/android"
   
2. xmlns:
   
   tools=
   
   "http://schemas.android.com/tools"
   
3. android:
   
   layout_width=
   
   "match_parent"
   
4. android:
   
   layout_height=
   
   "match_parent"
   
5. tools:
   
   context=
   
   "layout.FourthFragment"
   
6. android:
   
   background=
   
   "#ff00ff"
   
   >
   
7. 
   
8. <!--
   
   TODO:
   
   Update blank fragment layout -->
   
9. <
   
   TextView
   
10. android:
    
    layout_width=
    
    "wrap_content"
    
11. android:
    
    layout_height=
    
    "wrap_content"
    
12. android:
    
    text=
    
    "Fourth Fragment"
    
13. android:
    
    layout_centerInParent=
    
    "true"
    
14. android:
    
    textSize=
    
    "30sp"
    
15. android:
    
    textColor=
    
    "#ff00ff"
    
    />
    
16. 
    
17. </
    
    FrameLayout>
    

The Main Function

This code contains the main function of the application. This code will render the Fragment data when a button is clicked. To start with first locate your MainActivity java file and open it, then write these block of codes inside the MainActivity class.

1. package
   
   com.razormist.simplefragmentapplication
   
   ;
   
2. 
   
3. import
   
   android.support.v7.app.AppCompatActivity
   
   ;
   
4. import
   
   android.os.Bundle
   
   ;
   
5. import
   
   android.support.v4.app.Fragment
   
   ;
   
6. import
   
   android.support.v4.app.FragmentManager
   
   ;
   
7. import
   
   android.support.v4.app.FragmentTransaction
   
   ;
   
8. import
   
   android.view.View
   
   ;
   
9. 
   
10. import
    
    layout.FirstFragment
    
    ;
    
11. import
    
    layout.FourthFragment
    
    ;
    
12. import
    
    layout.SecondFragment
    
    ;
    
13. import
    
    layout.ThirdFragment
    
    ;
    
14. 
    
15. 
    
16. public
    
    class
    
    MainActivity extends
    
    AppCompatActivity {
    
17. 
    
18. @Override
    
19. protected
    
    void
    
    onCreate(
    
    Bundle savedInstanceState)
    
    {
    
20. super
    
    .onCreate
    
    (
    
    savedInstanceState)
    
    ;
    
21. setContentView(
    
    R.layout
    
    .activity_main
    
    )
    
    ;
    
22. }
    
23. 
    
24. public
    
    void
    
    UpdateFragment(
    
    View
    
    view)
    
    {
    
25. Fragment fragment;
    
26. 
    
27. 
    
28. if
    
    (
    
    view ==
    
    findViewById(
    
    R.id
    
    .btn_first_fragment
    
    )
    
    )
    
    {
    
29. fragment =
    
    new
    
    FirstFragment(
    
    )
    
    ;
    
30. FragmentManager fragmentManager =
    
    getSupportFragmentManager(
    
    )
    
    ;
    
31. FragmentTransaction fragmentTransaction =
    
    fragmentManager.beginTransaction
    
    (
    
    )
    
    ;
    
32. fragmentTransaction.replace
    
    (
    
    R.id
    
    .f_display
    
    , fragment)
    
    ;
    
33. fragmentTransaction.commit
    
    (
    
    )
    
    ;
    
34. }
    
    else
    
    if
    
    (
    
    view ==
    
    findViewById(
    
    R.id
    
    .btn_second_fragment
    
    )
    
    )
    
    {
    
35. fragment =
    
    new
    
    SecondFragment(
    
    )
    
    ;
    
36. FragmentManager fragmentManager =
    
    getSupportFragmentManager(
    
    )
    
    ;
    
37. FragmentTransaction fragmentTransaction =
    
    fragmentManager.beginTransaction
    
    (
    
    )
    
    ;
    
38. fragmentTransaction.replace
    
    (
    
    R.id
    
    .f_display
    
    , fragment)
    
    ;
    
39. fragmentTransaction.commit
    
    (
    
    )
    
    ;
    
40. }
    
    else
    
    if
    
    (
    
    view ==
    
    findViewById(
    
    R.id
    
    .btn_third_fragment
    
    )
    
    )
    
    {
    
41. fragment =
    
    new
    
    ThirdFragment(
    
    )
    
    ;
    
42. FragmentManager fragmentManager =
    
    getSupportFragmentManager(
    
    )
    
    ;
    
43. FragmentTransaction fragmentTransaction =
    
    fragmentManager.beginTransaction
    
    (
    
    )
    
    ;
    
44. fragmentTransaction.replace
    
    (
    
    R.id
    
    .f_display
    
    , fragment)
    
    ;
    
45. fragmentTransaction.commit
    
    (
    
    )
    
    ;
    
46. }
    
    else
    
    if
    
    (
    
    view ==
    
    findViewById(
    
    R.id
    
    .btn_fourth_fragment
    
    )
    
    )
    
    {
    
47. fragment =
    
    new
    
    FourthFragment(
    
    )
    
    ;
    
48. FragmentManager fragmentManager =
    
    getSupportFragmentManager(
    
    )
    
    ;
    
49. FragmentTransaction fragmentTransaction =
    
    fragmentManager.beginTransaction
    
    (
    
    )
    
    ;
    
50. fragmentTransaction.replace
    
    (
    
    R.id
    
    .f_display
    
    , fragment)
    
    ;
    
51. fragmentTransaction.commit
    
    (
    
    )
    
    ;
    
52. }
    
53. }
    
54. }
    

Try to run the app and see if it worked.

There you have it we create a Simple Fragment Application using Android. I hope that this tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download