Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create muliple fragment image display in common Frame

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 467
    Comment on it

     

    In the below example I have created a multiple fragment images use in common Frame .

    In first step, First I have created a fragment_common.xml layout , here I have added four ImageView. After then I have created four new xml layout -(fragmentone, fragmenttwo,fragmentthree, fragmentfour). On these four layouts first I have added backgraund image within LinearLayout and I have added a TextView and Button.

    In Next Step, actvity_main.xml layout, Here I have added a FrameLayout.

     

    Now see Programming part here first I have created Fragment_common class in this I have used setOnClickListener method. Then I have created another four new classes (FragmentOne, FragmentTwo, FragmentThree, FragmentFour).

    These classes are extended with Fragment class, then I have used OnClickListener() method On this method I have used getActivity().getSupportFragmentManager().popBackStack(); methods for retuning Fragment to Fragment_common class.

    In MainActivity I have used getSupportFragmentManager() method to replace Fragment_common to frameContainer.You can see below example code it clearly describe you "How to create multiple fragment image display in common Frame ".

     

     

     

    Step(1)Created fragment_common.xml layout-

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="3"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:id="@+id/one1"
            android:layout_weight="1">
    
            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.50"
                android:id="@+id/alpha"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:src="@drawable/one"/>
    
            <ImageView
                android:scaleType="fitXY"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:id="@+id/beta"
                android:layout_weight="0.50"
                android:src="@drawable/two" />
    
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:id="@+id/two2"
            android:layout_weight="1">
            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.50"
                android:scaleType="fitXY"
                android:id="@+id/gama"
                android:adjustViewBounds="true"
                android:src="@drawable/three"/>
    
            <ImageView
                android:layout_width="0dp"
                android:layout_weight="0.50"
                android:layout_height="wrap_content"
                android:id="@+id/zesta"
                android:src="@drawable/four"
                android:scaleType="fitXY"/>
    
    
        </LinearLayout>
    </LinearLayout>

     

    Step(2)-Created a new fragmentone.xml layout-

    <?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"
        android:background="@drawable/coll1">
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Evon"
            android:textStyle="bold" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/prv"
            android:text="Click"/>
    
    
    </LinearLayout>

     

    Step(3)-Created a new fragmenttwo.xml layout-

    <?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"
        android:background="@drawable/coll2">
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Evon"
            android:textStyle="bold" />
    
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/prv"
            android:text="Click"/>
    </LinearLayout>

     

    Step(4)-Created a new fragmentthree.xml layout-

    <?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"
        android:background="@drawable/coll3">
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Evon"
            android:textStyle="bold" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/prv"
            android:text="Click"/>
    
    
    </LinearLayout>

     

    Step(5)-Created a new fragmentfour.xml layout-

    <?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"
        android:background="@drawable/coll4">
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Evon"
            android:textStyle="bold" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/prv"
            android:text="Click"/>
    
    
    </LinearLayout>

     

    Step(6)-activity_main.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" >
    
    
            <FrameLayout
                android:id="@+id/frameContainer"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:layout_height="0dp">
    
            </FrameLayout>
    
        </LinearLayout>

     

    Step(7)Created a new Fragment_common class-

      public class Fragment_common extends Fragment {
    
        ImageView alpha,beta,gama,zesta;
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
    
            View rootView = inflater.inflate(R.layout.fragment_common, container, false);
    
            alpha = (ImageView)rootView.findViewById(R.id.alpha);
            beta =(ImageView)rootView.findViewById(R.id.beta);
            gama=(ImageView)rootView.findViewById(R.id.gama);
            zesta=(ImageView)rootView.findViewById(R.id.zesta);
    
            return rootView;
    
        }
    
        @Override
        public void onActivityCreated( Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
    
            alpha.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    getActivity().getSupportFragmentManager().beginTransaction()
                            .replace(R.id.frameContainer, new FragmentOne())
                            .addToBackStack(null)
                            .commit();
                }
            });
    
    
            beta.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().beginTransaction()
                            .replace(R.id.frameContainer,new FragmentTwo())
                            .addToBackStack(null)
                            .commit();
                }
            });
    
            gama.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().beginTransaction()
                            .replace(R.id.frameContainer,new FragmentThree())
                            .addToBackStack(null)
                            .commit();
    
                }
            });
            zesta.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().beginTransaction()
                            .replace(R.id.frameContainer,new FragmentFour())
                            .addToBackStack(null)
                            .commit();
                }
            });
    
    
        }
    }

     

    Step(8)-Created a new FragmentOne class-

    public class FragmentOne extends Fragment {
    
        Button prv;
        public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
    
            View rootView = inflater.inflate(R.layout.fragmentone, container, false);
            prv = (Button)rootView.findViewById(R.id.prv);
    
            prv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().popBackStack();
                }
            });
           return rootView;
    
        }
    }


     

    Step(9)-Craeted a new FragmentTwo class-

    public class FragmentTwo extends Fragment {
        Button prv;
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
            View rootView = inflater.inflate(R.layout.fragmenttwo, container, false);
            prv = (Button)rootView.findViewById(R.id.prv);
    
            prv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().popBackStack();
                }
            });
            return rootView;
    
        }
        }

     

    Step(10)-Craeted a new FragmentThree class-

    public class FragmentThree extends Fragment {
        Button prv;
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
    
            View rootView = inflater.inflate(R.layout.fragmentthree, container, false);
            prv = (Button)rootView.findViewById(R.id.prv);
    
            prv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().popBackStack();
                }
            });
            return rootView;
    
        }
        }


       

    Step(11)-Craeted a new FragmentFour class-
     

       public class FragmentFour extends Fragment {
        Button prv;
    
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragmentfour, container, false);
            prv = (Button) rootView.findViewById(R.id.prv);
    
            prv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager().popBackStack();
                }
            });
            return rootView;
        }
    
    
    }
    
    

     

    Step(12)MainActivity-

    public class MainActivity extends AppCompatActivity{
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.frameContainer, new Fragment_common())
                    .addToBackStack(null)
                    .commit();
    
        }
    
    }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: