Android: use Fragments to optimize the interface

Good day. Today I would like to show you a small and fairly simple example of using Fragments. I hope it will be useful to those who have just begun to get acquainted with the principles of the Fragments. Initially, fragments have been implemented since Android 3.0 for more dynamic user interface design.
In short, Fragment is similar to Activity, they both have their own life cycle. However, Fragment cannot exist outside the Activity. You can use different Fragments for the same Activity, which gives flexibility and variability in the development process.

You can read more about Fragments here:
Fragments. Android Developer

Finally, let's move on to practice. Let's write a small training program in which fragments will be used. With a vertical position of the screen, a static list of links will be displayed first and when you click on the link, the Activity will be launched, displaying the contents of the web page on the selected link. When the screen is horizontal, the list of links and the contents of the web page will be placed in the Fragments and displayed simultaneously. The scheme of the application is as follows:
')


Let's write the class FragmentActivity, the application starts with it:

public class FragmentActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment); } } 

Next, you need to create a layout in the fragment.xml file for the vertical and horizontal orientation of the screen, which is used in the FragmentActivity class. For horizontal orientation, we define two fragments, each will occupy half the width of the device screen. The contents of the file /res/layout-land/fragment.xml for the horizontal orientation of the screen:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment class="com.example.hellopeacefullworld.FragmentList" android:id="@+id/fragment_list" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent" > </fragment> <fragment class="com.example.hellopeacefullworld.FragmentDetail" android:id="@+id/fragment_detail" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent" > </fragment> </LinearLayout> 

The contents of the /res/layout/fragment.xml file for vertical (portrait) screen orientation:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment class="com.example.hellopeacefullworld.FragmentList" android:id="@+id/fragment_list" android:layout_width="match_parent" android:layout_height="match_parent" > </fragment> </LinearLayout> 

We describe the layout file /res/layout/fragment_detail_activity.xml for an Activity that will display the contents of a web page in a vertical (portrait) orientation:

 <?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" > <fragment class="com.example.hellopeacefullworld.FragmentDetail" android:id="@+id/fragment_detail" android:layout_width="match_parent" android:layout_height="match_parent" > </fragment> </LinearLayout> 

Activity class itself. In it, we read the link received via extras and display the content of the web page in WebView. This Activity is invoked in a vertical orientation:

 public class FragmentDetailActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_detail_activity); Bundle extras = getIntent().getExtras(); String s = extras.getString("selectedValue"); WebView viewer = (WebView) findViewById(R.id.webView1); viewer.loadUrl(s); } } 

The FragmentList class is the most voluminous, but not difficult to implement. In the onListItemClick function, we check for the presence of a FragmentDetail with a WebView. If such a fragment exists, then we call its function goToLink (String link), which loads the web page. Otherwise, if the fragment does not exist, then the FragmentDetailActivity is called, to which the link is sent via extras.

 public class FragmentList extends ListFragment { @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); String[] values = new String[] { "http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/80s-phone-app-slicing/", "http://mobile.tutsplus.com/tutorials/corona/create-a-brick-breaker-game-with-the-corona-sdk-game-controls/", "http://mobile.tutsplus.com/articles/news/best-of-tuts-in-february-2011/"}; ArrayAdapter adapter = new ArrayAdapter(getActivity(), android.R.layout.simple_list_item_1, values); setListAdapter(adapter); } @Override public void onListItemClick(ListView l, View v, int position, long id) { String item = (String) getListAdapter().getItem(position); FragmentDetail fragment = (FragmentDetail)getFragmentManager().findFragmentById(R.id.fragment_detail); if (fragment != null && fragment.isInLayout()) { fragment.goToLink(item); } else { Intent intent = new Intent(getActivity().getApplicationContext(), FragmentDetailActivity.class); intent.putExtra("selectedValue", item); startActivity(intent); } } } 

We describe the class FragmentDetail, it will serve to display the contents of a web page in a WebView. In particular, the goToLink (String link) function deals with mapping, it is called in the FragmentList class.

 public class FragmentDetail extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_detail, container, false); return view; } public void goToLink(String item){ WebView viewer = (WebView)getView().findViewById(R.id.webView1); viewer.loadUrl(item); } } 

File fragment_detail.xml

 <?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" > <WebView android:id="@+id/webView1" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> 

Well that's all. Now run our application. The result of the work should be as follows:




Thanks for attention.

UPDATE 1:
Thanks to the user vtimashkov for a sensible remark, which is in the first comment to the article. Below is the code that solves this problem.

So, first, we’ll make the following changes to the AndroidManifest file:

 <activity android:name=".FragmentDetailActivity" android:configChanges="orientation|screenSize|keyboardHidden"></activity> 

This will allow us to control the screen orientation change in the FragmentDetailActivity. Next, change the functionality of the FragmentDetailActivity class. Save the current link to the currentLink variable. The onConfigurationChanged function is called when the screen orientation changes. In it, we check if we are from vertical mode to horizontal mode, then we launch FragmentActivity and pass the current link to it.

 public class FragmentDetailActivity extends Activity { String currentLink; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_detail_activity); Bundle extras = getIntent().getExtras(); currentLink = extras.getString("selectedValue"); WebView viewer = (WebView) findViewById(R.id.webView1); viewer.loadUrl(currentLink); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) { Intent intent = new Intent(this, FragmentActivity.class); intent.putExtra("selectedValue", currentLink); startActivity(intent); } } } 

And finally our FragmentActivity. First we check if we got the link in extras. If yes, then this means that we have switched to FragmentDetailActivity in horizontal mode and now display the contents of the web page in.

 public class FragmentActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment); FragmentDetail fragment = (FragmentDetail)getFragmentManager().findFragmentById(R.id.fragment_detail); Bundle extras = getIntent().getExtras(); if(extras != null){ String link = extras.getString("selectedValue"); if(link !=null && fragment != null && fragment.isInLayout()){ fragment.goToLink(link); } } } }