In this video I present the Android multipane Fragment example code many of you have requested. I did my best to create a template you can use in numerous apps. I also did my best to keep the code very short.
We’ll cover creating layouts that contain multiple fragments. We’ll switch between layouts based on screen orientation. We’ll also cover how to use the support libraries and Gradle so that we can use Fragments in older versions of Android.
If you like videos like this, it helps to tell Google Plus with a click here [googleplusone]
Here is the whole package for this app.
Code From the Video
fragment_main_panel.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:background="@android:color/holo_red_dark" android:gravity="top|center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Main Panel" android:textColor="@android:color/white" android:textStyle="bold" android:textSize="20sp"/> </LinearLayout>
fragment_side_panel.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:background="@android:color/holo_blue_dark" android:gravity="top|center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Side Panel" android:textColor="@android:color/white" android:textStyle="bold" android:textSize="20sp"/> </LinearLayout>
SidePanelFragment.java
package com.newthinktank.derekbanas.multipanefragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class SidePanelFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_side_panel, container, false); return view; } }
MainPanelFragment.java
package com.newthinktank.derekbanas.multipanefragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MainPanelFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_main_panel, container, false); return view; } }
activity_my.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:id="@+id/RelativeLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:baselineAligned="false" android:animateLayoutChanges="true" tools:context=".MyActivity" > <fragment android:id="@+id/main_panel" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" class="com.newthinktank.derekbanas.multipanefragment.MainPanelFragment" /> <fragment android:id="@+id/side_panel" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" class="com.newthinktank.derekbanas.multipanefragment.SidePanelFragment" /> </RelativeLayout>
/layout-land/activity_my.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:id="@+id/RelativeLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:baselineAligned="false" android:animateLayoutChanges="true" tools:context=".MyActivity" > <fragment android:id="@+id/main_panel" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" class="com.newthinktank.derekbanas.multipanefragment.MainPanelFragment" /> <fragment android:id="@+id/side_panel" android:layout_width="150dp" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" class="com.newthinktank.derekbanas.multipanefragment.SidePanelFragment" /> </RelativeLayout>
build.gradle
apply plugin: 'com.android.application' android { compileSdkVersion 20 buildToolsVersion "20.0.0" defaultConfig { applicationId "com.newthinktank.derekbanas.multipanefragment" minSdkVersion 15 targetSdkVersion 20 versionCode 1 versionName "1.0" } buildTypes { release { runProguard false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } // Add to use support libraries dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:support-v4:20.0.0' } // Add to make sure support libraries are only added once configurations { all*.exclude group: 'com.android.support', module: 'support-v4' }
MyActivity.java
package com.newthinktank.derekbanas.multipanefragment; import android.content.res.Configuration; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.View; public class MyActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); // Hide the side pane when in portrait mode int screenOrientation = getResources().getConfiguration().orientation; if (screenOrientation == Configuration.ORIENTATION_PORTRAIT) { hideSidePane(); } } // Hides the side panel private void hideSidePane() { View sidePane = findViewById(R.id.side_panel); if (sidePane.getVisibility() == View.VISIBLE) { sidePane.setVisibility(View.GONE); } } }
i have follow very carefully this tutorial, but my code doesn’t, are you sure the code in the video is not missing anything?
i have upload my code to github, if you can check if i did something wrong it would be very helpful..
here is the link: https://github.com/Altiano/MultipaneFragments
*..but my code doesnโt work, are..
Here is the whole package available for download. Sorry you’re having trouble with it.
i can’t download the package, when i click the link it says “Sorry, the page your requested could not be found, or no longer exists.”
Sorry about that. I fixed it.
Hello Derek, great tutos.
I still am having problems downloading the code in ZIP that you setup.
What about uploading that into github so we can just clone the repo?
BTW: Great videos, man!
Thank you ๐ I just tested the download and it worked. I’ll try to uplad to github, but the code is also available under the link in the mean time. Sorry about the issues your having.
@Altiano maybe it is too late, but for another reader :
In the Video MyActivity extends from Activity.
Change Activity to FragmentActivity. That is the problem.
Hope it helps.
Happy Coding
I am using an emulator to check my apps.
1.
In the tutorial-10(how to make and. apps) , I’m using ctrl+f11 to change the orientation of my emulator(portrait to landscape) but the text is not changing with the action.
2.
Also in the logcat I’m constantly getting the message : Skipped …. frames! The application may be doing too much work on its main thread.
How to take care of this.
Also , can you please explain the life cycle in android.
In this tutorial , whenever I’m changing the configuration , side panel is getting hidden and visible according to the config., is this because onCreate is being called everytime we change config.
Thank you for bringing that up. I’ll cover it very soon.
Yes the emulator doesn’t change the orientation in the way you’d think. That is a common error that I hope they fix soon.
Derek:
Unless I comment out the exclude method of your code:
31 configurations {
32 all*.exclude group: ‘com.android.support’, module: ‘support-v4’
33 }
gradle refuses to sync. But once I do, the project build returns with errors:
UNEXPECTED TOP-LEVEL EXCEPTION:
com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompatIcs;
I’m completely unfamiliar with this build tool, any ideas?
Try right click project -> properties. Under java compiler, make sure compliance is set to 1.6
Hi , I didnt understand why we neeed /layout-land/activity_my.xml , I didnt see reference to this layout in MyActivity.java.
How does android know to use this layout in landscape mode?
It does it automatically because it looks in the layout-land directory
Hello Derek,
I got problem that my fragments overlapping. I have been looking for answer on stackoverflow etc and couldn’t find anything ๐ do you know why that might be?
Thanks,
Matt
The only thing different that I did I used RelativeLayout to build fragments…
If you use a relative layout you need to make sure you define exactly how everything is laid out. It may be better to use the linear layout.