Friday, November 13, 2015

201-Android Studio Introduction To Fragments


.
201-Android Studio Introduction To Fragments
Android Fragments is a new concept introduced in Android API 3.0.
Before doing this tutorial, it is recommended that you go through the basic tutorials 1XX series starting with  http://android-steps.blogspot.my/2015/11/101-android-studio-create-new-project.html 
1) GETTING STARTED
1.1) Configure your new project
Type application name eg MyFragments1
1.2) Select form factors
eg API 14
1.3) Add an activity
Select Blank Activity
1.4) Customize the Activity
Accept defaults.
Select “Use a fragment”.
1.5) Done.
1.6) Run.
The string “Hello World” comes from the fragment_main.xml
DOWNLOAD
2) OBSERVE THE FILES
2.1) MainActivity.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
       fab.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                       .setAction("Action"null).show();
           }
       });
   }
   @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);
   }
}
2.2) res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
   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"  
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:context=".MainActivity">
   <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
       android:layout_width="match_parent"android:theme="@style/AppTheme.AppBarOverlay">
       <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
           android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
           android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay" />
   </android.support.design.widget.AppBarLayout>
   <include layout="@layout/content_main/>
   <android.support.design.widget.FloatingActionButton android:id="@+id/fab"
       android:layout_width="wrap_content" android:layout_height="wrap_content"
       android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"
       android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
2.3) res/layout/content_main.xml
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/fragment"
   android:name="com.notarazi.myfragments1.MainActivityFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   tools:layout="@layout/fragment_main/>
2.4) res/layout/fragment_main.xml
<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"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"    
   tools:showIn="@layout/activity_main"
   tools:context=".MainActivityFragment">
   <TextView
       android:text="Hello World!"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
</RelativeLayout>
tools:context=”.MainActivityFragment”
That attribute is basically the persistence for the “Associated Activity” selection above the layout. At runtime, a layout is always associated with an activity. It can of course be associated with more than one, but at least one. In the tool, we need to know about this mapping (which at runtime happens in the other direction;
an activity can call setContentView(layout) to display a layout) in order to drive certain features.
2.5) MainActivityFragment.java
package com.notarazi.myfragments1;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
   public MainActivityFragment() {
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       return inflater.inflate(R.layout.fragment_main, container, false);
   }
}
3) ADDING UI, EVENTS AND ACTIONS
3.1) Edit Fragment Layout
res/layout/fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   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"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:orientation="horizontal">
   <TextView android:text="Name:"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
   <EditText
       android:id="@+id/edit_message"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:layout_height="wrap_content"
       android:hint="Type name here..." />
   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Send"
       android:onClick="sendMessage"/>
</LinearLayout>
If you run your apps now, you will get a run-time error because the method “sendMessage” is not recognized.
3.2) Add sendMessage method to MainActivity
MainActivity.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
       fab.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                       .setAction("Action"null).show();
           }
       });
   }
   public void sendMessage(View view) {
       Toast.makeText(getApplicationContext(), "Responding...", Toast.LENGTH_LONG).show();
   }
   @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);
   }
}
Method calls from fragment layout is be placed in the host activity eg MainActivity.java
OUTCOME.
3.3.) Capture input value from UI.
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
       fab.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                       .setAction("Action"null).show();
           }
       });
   }
   public void sendMessage(View view) {
       EditText editText = (EditText) findViewById(R.id.edit_message);
       Toast.makeText(getApplicationContext(), "You have entered, \n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
   }
   @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);
   }
}
Capture UI object approach is similar to that of non-fragment application.
DOWNLOAD
4) OPTIONS MENU
4.1) Create a fragment menu
res/menu/menu_fragment.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=".MainActivity">
   <item android:id="@+id/action_send"
       android:title="fragment action"
       android:icon="@android:drawable/ic_menu_send"
       android:orderInCategory="10"
       app:showAsAction="always" />
</menu>
4.2) Overrides methods in fragment controller file
MainActivityFragment.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
   public MainActivityFragment() {
   }
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
       inflater.inflate(R.menu.menu_fragment, menu);
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       return inflater.inflate(R.layout.fragment_main, container, false);
   }
}
OUTCOME.
4.3) Add Response Actions for the Options Menu.
MainActivityFragment.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.Toast;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
   public MainActivityFragment() {
   }
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
       inflater.inflate(R.menu.menu_fragment, menu);
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();
       if(id == R.id.action_send){
           //Do whatever you want to do
           EditText editText = (EditText) getActivity().findViewById(R.id.edit_message);
           Toast.makeText(getActivity().getApplicationContext(), "You have entered,\n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       return inflater.inflate(R.layout.fragment_main, container, false);
   }
}
OUTCOME.
DOWNLOAD
5) PUTTING RESPONSE CODES IN FRAGMENT ACTIVITY
In Step 3.2 and 3.3, the response codes are placed in the Host Activity. This makes the Fragment Activity dependent on the Host Activity
We can take out fragment-related codes and placed in the fragment controller instead to avoid dependency problem.
5.1) Edit the fragment layout to add id and omit event call.
res/layout/fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   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"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:orientation="horizontal">
   <TextView android:text="Name:"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
   <EditText
       android:id="@+id/edit_message"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:layout_height="wrap_content"
       android:hint="Type name here..." />
   <Button
       android:id="@+id/send_message"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Send"
       android:onClick="sendMessage"/>
</LinearLayout>
5.2) Cut sendMessage method from MainActivity and Paste into MainActivityFragment
MainActivityFragment.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
   public MainActivityFragment() {
   }
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
       inflater.inflate(R.menu.menu_fragment, menu);
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();
       if(id == R.id.action_fragment){
           //Do whatever you want to do
           EditText editText = (EditText) getActivity().findViewById(R.id.edit_message);
           Toast.makeText(getActivity().getApplicationContext(), "You have entered,\n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       return inflater.inflate(R.layout.fragment_main, container, false);
   }
   public void sendMessage(View view) {
       EditText editText = (EditText) getActivity().findViewById(R.id.edit_message);
       Toast.makeText(getActivity().getApplicationContext(), "You have entered, \n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
   }
}
5.3) Overrides method onActivityCreated to bind sendButton control to send_message view id and set onClick event listener to call sendMessage method.
MainActivityFragment.java
package com.notarazi.myfragments1;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
/**
* A placeholder fragment containing a simple view.
*/
public class MainActivityFragment extends Fragment {
   public MainActivityFragment() {
   }
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setHasOptionsMenu(true);
   }
   @Override
   public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
       inflater.inflate(R.menu.menu_fragment, menu);
   }
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();
       if(id == R.id.action_fragment){
           //Do whatever you want to do
           EditText editText = (EditText) getActivity().findViewById(R.id.edit_message);
           Toast.makeText(getActivity().getApplicationContext(), "You have entered,\n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
                            Bundle savedInstanceState) {
       return inflater.inflate(R.layout.fragment_main, container, false);
   }
   @Override
   public void onActivityCreated(Bundle savedInstanceState)
   {
       // TODO Auto-generated method stub
       super.onActivityCreated(savedInstanceState);
       Button sendButton = (Button) getActivity().findViewById(R.id.send_message);
       sendButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               sendMessage(v);
           }
       });
   }
   public void sendMessage(View view) {
       EditText editText = (EditText) getActivity().findViewById(R.id.edit_message);
       Toast.makeText(getActivity().getApplicationContext(), "You have entered, \n+ editText.getText().toString(), Toast.LENGTH_LONG).show();
   }
}
DOWNLOAD

.

No comments:

Post a Comment