Multi-Pane Development in Android with Fragments

Posted by

Hello everyone and welcome to easytechsolutions A place for all your queries , So in today’s post we are going to learn how to implement fragments in android by making a small Multi-Pane Android App.

This post is about how you can add multiple fragments inside your single activity through XML in future post we will definitely going to post how you can add dynamically or programmatically.

So let’s get started below are the steps you need to follow:-

Step 1:- Open up your Android Studio and make a new project name it whatever you want and select blank activity.

Step 2:- Make 3 new resources file inside res/layout so make it :-

fragment1.xml

<?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="match_parent"
        android:id="@+id/listview"
        android:background="#ff0">

    </ListView>

</LinearLayout>

In above resource file we added a listView to show data in list in first fragment

fragment2.xml

<?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="#ff00"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text2"
        android:text="Android Name \nAndroid Version \nVersion Release Date"
        android:textAppearance="?android:textAppearanceLarge"
        android:textColor="#000"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"/>
</LinearLayout>

In above resource file we just simply added textView to show some text data in second fragment

item_list_layout.xml

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/row_item"
        android:text="Android"
        android:textAppearance="?android:textAppearanceLarge"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="#000"/>

</LinearLayout>

In above resource file we added text skeleton its is to define how our data will style in listView means in fragment1

Step 3:- Now we are going to add Java Activity for each fragments :-

FragmentOne.java

package com.listview;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.zip.Inflater;

import static android.support.v7.widget.AppCompatDrawableManager.get;

/**
 * Created by AJAY THAKUR on 9/10/2017.
 */

public class FragmentOne extends Fragment {

    String[] Name = {"Android alpha","Android beta","Android cupcake","Android donut","Android eclairs","Android fryo","Android gingerbread"
                      ,"Android honeycomb","Android icecream ","Android jellybean","Android kitkat","Android lolipop","Android marshmallow"
                       ,"Android nougat","Android oreo"};

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragement1,container,false);

        ListView listView = (ListView) view.findViewById(R.id.listview);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),R.layout.item_list_layout,R.id.row_item,Name);
        listView.setAdapter(adapter);
        return view;
    }
}

In above activity file we added array of data and also adapter which sets every data inside our listView in fragment1

FragmentTwo.java

package com.listview;

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by AJAY THAKUR on 9/10/2017.
 */

public class FragmentTwo extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment2,container,false);

        return view;
    }
}

In above activity we added our second fragment layout and just view it

Step 4:- Now go inside res/layout/activity_main.xml file and paste below code in it :-

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:orientation="horizontal"
    tools:context="com.listview.MainActivity">

    <fragment
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/fragment1"
        android:name="com.listview.FragmentOne"/>

    <fragment
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:id="@+id/fragment2"
        android:name="com.listview.FragmentTwo"/>
</LinearLayout>

So this is the most crucial step in which we added both the fragments inside a single activity by using fragment tag and refer each fragment with name attribute.

Step 5:- Now need to change anything inside MainActivity.java now save all and run it you will get to see a single activity with multiple pane fragment layout in one side fragment1 and other side fragment2.

That’s it for now friends hope you will grab some useful knowledge about the fragments and how you can implement it in your App too.

LIKE | SHARE | SUPPORT

our facebook page URL :-https://www.facebook.com/easytechsolutions.info/?ref=aymt_homepage_panel

Leave a Reply

Your email address will not be published. Required fields are marked *