Stepping In Fragment With Landscape View In Android

Create view for landscape and portrait in Android with fragments

 

Fragments are the most important feature in  Android Applications. In my previous articles I have described about how to create fragments. Now here I will explain how to add view in both Portrait and Landscape mode.

 

Here I am creating a ListView in the first activity and  on clicking on each item in the ListView it will show the Details in the Second Activity . In Landscape view the details will be shown in the same page as the right side of the current Activity. In Portrait mode it will navigate to next Activity. We know that in the Tab there will be lots of space; to avoid this we can use fragments and show the details in the right side of the page. Please see the screen shot below, this will give you an exact idea about this.

 

Portrait mode view

 

 

 

Landscape

 

 

This is the task I am going to do now.

For this I have to string array, one for listing and one for the details, please see the string array,

<string-array name="titles">
    <item>Activity</item>
    <item>Services</item>
    <item>Broad Cast Receiver</item>
    <item>Content Providers</item>

</string-array>
<string-array name="description">
    <item>This is the Activity Decription</item>
    <item>This is the Service Decription</item>
    <item>This is the Broad Cast Receiver Decription</item>
    <item>This is the Content Provider Decription</item>
</string-array>

First create the Fragments for listview and details. That is FragmentA and FragmentB

 

FragmentA for showing the Listview,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
    <ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_gravity="center_horizontal" />
</LinearLayout>

Now we will load the XML file to the fragmentA class file in the onCreateView(). and we will create an interface for communication between the Fragments. The interface is named Communicator and this interface has a method named respond(int index);

 

With this interface we are passing the clicked index value to the next fragment. In the FragmentA class there we need to create a method for setting the  communicator,

public void setCommunicator(Communicator comm)
{
    this.communicator = comm;
}

Now create the FragmentB layout and java class. The layout file contains only a TextView which will be used to display the details. Please see the layout file below,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#ff00dd"
android:layout_height="match_parent">
    <TextView
android:layout_width="wrap_content"
android:layout_margin="20dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textView"
android:layout_gravity="center_horizontal" />
</LinearLayout>

In the Java file there will be a method named changeText(int index); this method will give the selected index from FragmentA to FragmentB with the help of communicator interface, please see the code below,

public void changeText(int index)
{
    String[] arary = getResources().getStringArray(R.array.description);
    textView.setText(arary[index]);
}

Now create the second Activity and its layout. The SecondActivity will be called only in the Portrait view.

Please see the layout file for second_activity,

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
    <fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="study.fragment.negociosit.com.fragementstudyworks.FragmentB"
android:id="@+id/fragmentb"
android:layout_gravity="center_horizontal" />
</LinearLayout>

In the Java class (This will be used only in the Portrait view) In the onCreate() call the method changeText(int),

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.second_activity);
    int index = getIntent().getIntExtra("index", 0);
    FragmentB fragmentB = (FragmentB) getFragmentManager().findFragmentById(R.id.fragmentb);
    fragmentB.changeText(index);
}

Now create the main_activity for the portrait view,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#ff1a1a"
android:layout_height="match_parent">

    <fragment
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="study.fragment.negociosit.com.fragementstudyworks.FragmentA"
android:id="@+id/fragmenta"
android:layout_gravity="center_horizontal" />

</LinearLayout>

Now comes the most important part of this application, that is creating the main layout for the landscape mode. For creating layout file for Landscape mode please follow the steps.

 

Right on Layout, New, then Layout resource file 

 

 

Please see the code for activity_main for the landscape view,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
    <fragment
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:name="study.fragment.negociosit.com.fragementstudyworks.FragmentA"
android:id="@+id/fragmenta" />
    <fragment
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:name="study.fragment.negociosit.com.fragementstudyworks.FragmentB"
android:id="@+id/fragmentb"
android:layout_gravity="center_horizontal" />
</LinearLayout>

This will contains both the fragments added in the layout with horizondal alignement with width 0dp and weight 1 for both so that it will be equal with

and please see the code for MainActivity,

public class MainActivity extends Activity implements Communicator
{
    private FragmentA fragmentA = null;
    private FragmentB fragmentB = null;
    private FragmentManager manager = null;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        manager = getFragmentManager();
        fragmentA = (FragmentA) manager.findFragmentById(R.id.fragmenta);
        fragmentA.setCommunicator(this);
    }
    @Override
    public void resopond(int index)
    {
        fragmentB = (FragmentB) manager.findFragmentById(R.id.fragmentb);
        if (fragmentB != null && fragmentB.isVisible())
        {
            fragmentB.changeText(index);
        } else
        {
            Intent intent = new Intent(MainActivity.this, SecondActivity.class);
            intent.putExtra("index", index);
            startActivity(intent);
        }
    }
}

On clicking on the listitem in the FragmentA then the respond method will be called and it will check whether the device is in Portrait or Landscape and then it will do the necessary action according to the view. That is, in portrait mode it will call the next activity and pass the index with putExtra, it its in Landscape mode then the changeText() method of FragmentB will be called.

Read more articles on Android:

• SQLite With GridView in Android
• Android Studio And Git Configuration - Day Four