Simple Fragment Transactions

What we are going to do here is a simple Activity with a button. When we click that button a Fragment Transaction takes place and we add the Fragment's layout.

1. You start a new Project and you are using support library if you target API less than 11. So first add the support lib to the project.

2. In my case I'm extending FragmentActivity ( i'm using minimum sdk version 8  ) or for API 11 and above you can use just Activity.

3.  First we are going to create the Fragment.

We extend Fragment class, inflate Fragment's layout at onCreateView() method and declare an Interface for future communication between Fragment and Activity.
So our code is here :


public class Fragment_A extends Fragment {

protected static final String TAG = "FRAGMENTS_A";
private CallbackInterface listener;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_a_layout, container, false);

        return view; //returns view
    }
 
    // ********** declare INTERFACE ***************** //
 
    public interface CallbackInterface {
    public void onSomethingSelected(int position);
      }      

 
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
     
        // This makes sure that the container activity has implemented the callback interface. If not, it throws an exception
        try {
            listener = (CallbackInterface) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement CallbackInterface");
        }
    }
 
 
}

4. Fragment's layout 

<?xml version="1.0" encoding="utf-8"?>
<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="@color/cool">
    
    <TextView
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Fragment A" />
</LinearLayout>

5. Now we are going to create our Activity :


public class MainActivity extends FragmentActivity  implements CallbackInterface  {

private static final String TAG = "passNumberTAG";

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


final Button button = (Button) findViewById(R.id.button_id);
    button.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
         
       Fragment_A Frag_A = new Fragment_A();
         
       FragmentManager fm1 = getSupportFragmentManager();
        FragmentTransaction transaction = fm1.beginTransaction();
            
        transaction.add(R.id.fragment_container, Frag_A);
        transaction.commit();
            
        }
    });

}

@Override
public void onSomethingSelected(int position) {
Log.d(TAG, "Give me the result  " + position  );
position = position +1;
Log.d(TAG, "Give me the result  " + position  );

}

}

The part where the Transaction takes place is inside the click listener : 
        Fragment_A Frag_A = new Fragment_A();
          
        FragmentManager fm1 = getSupportFragmentManager();
        FragmentTransaction transaction = fm1.beginTransaction();
             
        transaction.add(R.id.fragment_container, Frag_A);
        transaction.commit();

-> new Fragment -> get FragmentManager -> beginTransaction -> add new layout and commit.


One last thing is the Activity's layout. The activity's layout includes an empty FrameLayoutthat acts as the fragment container. 



<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" >

        <Button 
         android:id="@+id/button_id"
         android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="@string/button_text" />

        
        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
        
        
</RelativeLayout>

ActionBarSherlock configuration

1.
I'm creating a custom Theme, let's call it TestABS with parent the HOLO Theme ( in our case Sherlock ).
So now in my styles.xml I add the line :
<style name="Theme.TestABS" parent="@style/Theme.Sherlock"></style> 

2.
Later I'll edit Manifest file like this :

<activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:theme="@style/Theme.TestABS"
      android:logo="@drawable/ad_logo">

3.
When Activity starts, the system adds ActionBar and the overflow menu by calling onCreateOptionsMenu().
This method inflates an XML resource which defines the menu items. This files is in the folder /res/menu. In those items on the XML file I have to add the android:showAsAction keyword, so now the items will appear as Action Items in my ActionBar and not Options Menu.

So a simple item should be like :

    <item
        android:id="@+id/menu_settings"
        android:orderInCategory="100"
        android:showAsAction="ifRoom"
        android:title="Text Here" />



This works as long as I have an ActionBar in my Activity( When do I have an ActionBar ? When I add   android:theme="@style/Theme.HOLO" in my manifest file for android 3.0 and greater. For lower versions I need Theme.Sherlock . In both cases I can declare mine custom theme like I did above with TestABS ).


Links :
1) Adding ActionBarSherlock to your Project
2) Adding Items to the ActionBar 
3) The Overflow menu ( As a rule of thumb you should always use ifRoom, if you want the icon to be part of your action bar and you should use never if you want the item to always be part of the overflow menu. )

Add Marker to Google Map

To detect a long map click by the user, so add a new Marker, we need to implement OnMapLongClickListener Interface.

Then we set our map to listen for any calls when its long pressed :    mMap.setOnMapLongClickListener(this);

And now in our code we can add a new Marker every time the user long clicks the map :

mMap.addMarker(new MarkerOptions().position(point));

Detect user click on Map

To detect click on GoogleMap we implement OnMapClickListener Interface.
We add to our GoogleMap setOnMapClickListener . This sets a callback to the Interface when the map is clicked

Then we need to override the onMapClick(LatLng point) 


@Override 
public void onMapClick(LatLng point) { mMap.animateCamera(CameraUpdateFactory.newLatLng(point)); }

We are using CameraUpdateFactory to get a new CameraUpdate Object ( an object to modify a map's camera ) and animate to the new point with animateCamera.

Display my Location - Google maps API V2

All we need to do is to use the method setMyLocationEnabled(boolean enabled) which enables the my-Location layer.
Like that :

private GoogleMap mMap;
mMap.setMyLocationEnabled(true);

Fragments Tutorial - Simple 2 - Passing Data

Passing Data between Fragment and host Activity

To pass data from a Fragment to the host Activity we need to Define/declare an Interface and

Implement it on the Activity.

1. Declare an Interface on Fragment_A. 

public interface OnSomethingSelectedListener {
    public void passData(int position);
      }  

2. onAttach() : To be sure that Activity implements the Interface  onAttach callback method of Fragment_A  we instantiate an Instance of Ιnterface by casting the Activity  passed into onAttach().
The Fragment captures the interface implementation during its onAttach() lifecycle method and can then call the Interface methods in order to communicate with the Activity.

@Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        
        // This makes sure that the container activity has implemented the callback interface. If not, it throws an exception
        try {
            listener = (OnSomethingSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }
    }

3. On Main Activity we implement the Interface like this :

public class MainActivity extends FragmentActivity implements OnSomethingSelectedListener

@Override
public void passData(int position) {
 Log.d(TAG, "Give me the result  " + position  );
 position = position +1;
 Log.d(TAG, "Give me the result  " + position  ); 
}

We just take the integer value parameter from the Fragment and add one to it.



4. A button on Fragment's layout so we can add onClick event

 

<button 
android:id="@+id/button_id" 
android:layout_height="wrap_content" 
android:layout_width="wrap_content" 
android:text="send Integer">
</button>

5. And on Fragment's onCreateView() we add the listener for the event:

Button button = (Button) view.findViewById(R.id.button_id);
    button.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            Log.v(TAG, "onClick 1");
            listener.passData(5); //pass an Integer
        }
    });

We pass the value five to the method passData() Now when we click on the Button we open LogCat View and we see that value one has been added to the  value  of the parameter:

Fragments Simple Example - Version 1

We will make an Activity that will display 2 fragments in its layout.
One fragment will be above the other just like the screen. Both fragments will be of the TextView type and will display text.

So here is what we 're going to have:

Where in the above image is shown the TextView that we are going to define in the layout for Fragment A and respectively down the TextView in layout for Fragment B.

public class Fragment_A extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

          return inflater.inflate(R.layout.fragment_a_layout, container, false);

     }
}

and the fragment_a_layout as we said is a TextView :

<linearlayout 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    
<textview 
    android:id="@+id/tv" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:text="Fragment A">
</linearlayout>

Respectively we make up the class for the Fragment B and layout as fragment_a_layout. Now what's left is to bind the 2 fragments on Activity's layout.

main_layout:

<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=".MainLayoutActivity" >

    
      <fragment 
          android:name="org.example.fragmentsapp.Fragment_A"
          android:id="@+id/id_frag_A"
          android:layout_width="100dp"
          android:layout_height="50dp"
          android:layout_marginBottom="20dp" />

      <fragment
          android:id="@+id/id_frag_B"
          android:name="org.example.fragmentsapp.Fragment_B"
          android:layout_width="100dp"
          android:layout_height="50dp"
          android:layout_below="@id/id_frag_A" />

</RelativeLayout>

What you must take care is that we use RelativeLayout because its much more dynamic and flexible than LinearLayout and thats something we are going to need for the next Fragment Tutorials.
Also every <fragment> element has its own name, ie for Fragment A we call it as android:name="org.example.fragmentsapp.Fragment_A" and the same for B. Later when we are going to use them inside the Activity scope that will be based on the id we have define.

So our Activity is :

package org.example.fragmentsapp;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainLayoutActivity extends FragmentActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_layout);
	
	}
}

Keep in mind that we refer also to APIs lower than API 11 so we extend FragmentActivity and not Activity.
If you target device with android 3.0 or later then you can change FragmentActivity with Activity.


FragmentActivity is something that we can use because of the  Support library