Android Fragments Tutorial

1- What is Android Fragment?

To design an interface, you can design fragments and put it together. In this example, I will guide you to work with the fragment.
And process event which interacts between 2 fragment.

2- Android Fragment Example

Tạo mới một Project có tên " AndroidFragment"
Prepare an image file, such as andrea.jpg.
  • andrea.jpg
Copy and paste andrea.jpg file to mipmap folder of project
Android Studio will require you to choose imagine quality that will be created. Select mipmap-mdpi as this is the average image quality.
Next we create activity_top.xml file:
In Android Studio select:
  • File/New/Layout resource file
Enter:
  • File name: activity_top.xml
  • Root element: RelativeLayout
  • Directory name: layout
Similarly create activity_bottom.xml file.

Design Interface on activity_top.xml

activity_top.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_top_image_text"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_bottom_image_text"
        android:layout_below="@+id/input_top_image_text"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply"
        android:id="@+id/button_apply"
        android:layout_below="@+id/input_bottom_image_text"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Design Interface on activity_bottom.xml

Design SLIDER:
activity_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@mipmap/andrea">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/top_image_text"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/bottom_image_text"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />


</RelativeLayout>
Each fragment will correspond to a Java class. This class is extended from Fragment class
Create 2 class: TopFragment and BottomFragment and edit its code.
TopFragment .java
package org.o7planning.androidfragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TopFragment  extends Fragment {

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

 
        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)

        View view= inflater.inflate(R.layout.activity_top, container, false);
        return view;
    }

}
BottomFragment.java
package org.o7planning.androidfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class BottomFragment extends Fragment {

   @Nullable
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 
       // Read xml file and return View object.


       // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
       View view= inflater.inflate(R.layout.activity_bottom, container, false);
       return view;
   }

}
Now, you need to arrange the fragment on the main interface of the Activity. Open activity_main.xml file 
Select TopFragment:
Next drag and drop BottomFragment to UI.
Set ID for fragments.
  • top_fragment
  • bottom_fragment
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="org.o7planning.androidfragment.MainActivity">

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="170dp"
       android:name="org.o7planning.androidfragment.TopFragment"
       android:id="@+id/top_fragment"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:name="org.o7planning.androidfragment.BottomFragment"
       android:id="@+id/bottom_fragment"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_alignRight="@+id/top_fragment"
       android:layout_alignEnd="@+id/top_fragment"
       android:layout_below="@+id/top_fragment" />
   
</RelativeLayout>
OK, you need to change code of MainActivity, TopFragment, BottomFragment classes to process events:
MainActivity.java
package org.o7planning.androidfragment;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

    }


    public void showText(String topImageText, String bottomImageText) {
        BottomFragment bottomFragment
                = (BottomFragment) this.getSupportFragmentManager()
                .findFragmentById(R.id.bottom_fragment);
        bottomFragment.showText(topImageText, bottomImageText);
    }

}
TopFragment.java
package org.o7planning.androidfragment;


import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;

public class TopFragment extends Fragment {

    private EditText inputTopImageText;
    private EditText inputBottomImageText;

    private MainActivity mainActivity;


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


        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_top, container, false);

        inputTopImageText = (EditText) view.findViewById(R.id.input_top_image_text);
        inputBottomImageText = (EditText) view.findViewById(R.id.input_bottom_image_text);

        Button applyButton = (Button) view.findViewById(R.id.button_apply);

        applyButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                applyText();
            }
        });

        return view;
    }


 
    // Called when a fragment is first attached to its context.
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        if (context instanceof MainActivity) {
            this.mainActivity = (MainActivity) context;
        }
    }


    private void applyText() {
        String topText = this.inputTopImageText.getText().toString();
        String bottomText = this.inputBottomImageText.getText().toString();

        this.mainActivity.showText(topText, bottomText);
    }
}
BottomFragment.java
package org.o7planning.androidfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class BottomFragment extends Fragment {

    private TextView topText;
    private TextView bottomText;

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

        // Read xml file and return View object.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_bottom, container, false);

        topText = (TextView) view.findViewById(R.id.top_image_text);
        bottomText = (TextView) view.findViewById(R.id.bottom_image_text);

        return view;
    }


    public void showText(String topImageText, String bottomImageText) {
        topText.setText(topImageText);
        bottomText.setText(bottomImageText);
    }
}
Running Apps: