How to Make Android Apps 11

Posted by on Jul 25, 2014 in Android Development Tutorial | 19 comments

Android Multipane Fragment ExampleIn 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

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);
        }
    }

}

19 Responses to “How to Make Android Apps 11”

  1. Altiano says:
    August 2, 2014 at 3:39 am

    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

    Reply
  2. Raunak says:
    September 3, 2014 at 8:34 pm

    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.

    Reply
  3. Martshal Kohn says:
    September 16, 2014 at 7:00 pm

    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?

    Reply
  4. idan says:
    October 10, 2014 at 1:09 am

    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?

    Reply
  5. Matt says:
    December 9, 2014 at 9:22 am

    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

    Reply

Leave a Reply

Your email address will not be published.

Google+