How to Make Android Apps 10

Android Fragment TutorialIn this few parts of my Android tutorial I’ll focus on a Android Fragment Tutorial. I’ll start off slow here by showing you how to switch fragments based on screen orientation, which is very commonly used.

I’ll specifically cover the basics of fragments, layout fragments, FragmentManager, FragmentTransaction, committing fragment replacements, LayoutInflator, Configuration and more.

If you like videos like this, it helps to share on Google Plus with a click here

Code From the Video

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

    <TextView
        android:text="@string/portrait_mode_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"/>

</RelativeLayout>

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

    <TextView
        android:text="@string/landscape_mode_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30dp"/>

</RelativeLayout>

activity_my.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:context=".MyActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/landscape_fragment" />

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/portrait_fragment" />

</RelativeLayout>

FragmentLandscape.java

package com.newthinktank.derekbanas.androidfragments;


import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentLandscape extends Fragment{

    /*
     LayoutInflator takes the provided xml layout and puts it in a view
     container is the view the fragment should be attached to
     savedInstanceState is passed if the fragment is being re-constructed from a saved state

     inflate() is passed the layout xml to place, the optional view to attach to and
     true or false on whether to attach to the optional view named container
      */

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.landscape_fragment, container, false);
    }
}

FragmentPortrait.java

package com.newthinktank.derekbanas.androidfragments;


import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentPortrait extends Fragment{

/*
     LayoutInflator takes the provided xml layout and puts it in a view
     container is the view the fragment should be attached to
     savedInstanceState is passed if the fragment is being re-constructed from a saved state

     inflate() is passed the layout xml to place, the optional view to attach to and
     true or false on whether to attach to the optional view named container
      */

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.portrait_fragment, container, false);
    }

}

MyActivity.java

package com.newthinktank.derekbanas.androidfragments;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.res.Configuration;
import android.os.Bundle;

/*
Fragments make it easy to create interfaces that work on different
screen sizes. They do this by breaking different parts of your
interface into fragments. Activities can then decide which fragments
to use and where to put them based on screen size or orientation.
It is also nice to use the same fragment on multiple activities.

If your app is running on a phone you should have a single fragment
normally and as the screen size increases you can add more.

Version 3.0 is required to use fragments unless you use a support
library. You cannot use the PreferenceFragment class unless you
use API 11 or higher though. You install the support library in the
SDK Manager. Look in the Extras folder. The location of the jar file
is /sdk/extras/android/support/v4/android-support-v4.jar ( Save it in
your libs folder )
 */

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Allows you to interact with Fragments in an Activity
        FragmentManager fragmentManager = getFragmentManager();

        // beginTransaction() begins the FragmentTransaction which allows you to
        // add, attach, detach, hide, remove, replace, animate, transition or
        // show fragments
        FragmentTransaction fragmentTransaction =
                fragmentManager.beginTransaction();

        // The Configuration object provides device configuration info
        // http://developer.android.com/reference/android/content/res/Configuration.html
        Configuration configInfo = getResources().getConfiguration();

        // Depending on the screen orientation replace with the correct fragment
        if(configInfo.orientation == Configuration.ORIENTATION_LANDSCAPE){

            FragmentLandscape fragmentLandscape = new FragmentLandscape();

            fragmentTransaction.replace(android.R.id.content,
                    fragmentLandscape);

        } else {

            FragmentPortrait fragmentPortrait = new FragmentPortrait();

            fragmentTransaction.replace(android.R.id.content,
                    fragmentPortrait);

        }

        // Schedule for the replacement of the Fragment as soon as possible
        fragmentTransaction.commit();

        // setContentView(R.layout.activity_my);
    }

}

11 Responses to “How to Make Android Apps 10”

  1. Rowan says:

    Seriously love your tutorials!
    😉

  2. Great tutorial. your explanation is simply good. easy understand the coding and its implementation

    Thanks

  3. idan says:

    Hi derek ,thanks for the tutorial , its really detailed good and even fun 🙂 even for people who are not english native speaker like me.
    A little basic question, is the procedure onCreate on myActivity is executed each time I change the orientation of my device?

    I understand fragmentTransaction is responsible for replacing fragments. However,the condition to replace a fragment (=what is our orientation) is checked in onCreate procedure.
    thanks!

  4. Breno says:

    O love your code comments, it helps me a lot.

    Thank you Derek.

  5. Daniel says:

    Hi Derek!
    Thanks for tutorial. It really helped me a lot . But i am not sure about one thing. Can you please tell me what is activity_my.xml for?
    It is not used anywhere and i deleted it from my app and everything worked just perfect. Thank you for your answer.

    • Derek Banas says:

      Hi Daniel, You’re very welcome 🙂 activity_my.xml is normally the default xml layout for the app. I kept it there for those people that used it because it is created by default.

  6. Jack says:

    Hi Derek,
    The support folder is not in my sdk directory structure. Am I missing a package to install from the SDK manager?

Leave a Reply

Your email address will not be published.

Google+