Stepping In Fragment With Landscape View In Android

Create a 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 how to create fragments. Now here I will explain how to add a 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 on the same page as the right side of the current Activity. In Portrait mode, it will navigate to the 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 on the right side of the page. Please see the screenshot 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, which is creating the main layout for the landscape mode. For creating a 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 contain both the fragments added in the layout with horizontal alignment 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.