How To Create Fragments Add Images, Buttons, ScrollView, Add OnClick Listener in Fragments

Full tutorial is given below. Dear Viewer we are working hard to maintain this website. We doesn't want any think from you. Its just a humble request If you thinks that this posts helps you please share this post with your friends.

working with fragments create, use, add elements, and set onclick listener and much more

So first add this code in your mainActivity

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"
    tools:context=".MainActivity">


    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment1"
        android:name="com.usmtip.demoappbyusmtip.Fragment1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        tools:layout="@layout/fragment_1" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment2"
        android:name="com.usmtip.demoappbyusmtip.Fragment2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        tools:layout="@layout/fragment_2" />


</LinearLayout>

at this time we are not using any code in mainActivity.java

MainActivity.java

package com.usmtip.demoappbyusmtip;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


}

Then create new blank fragment 1 and then add this given code

fragment_1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:textSize="20dp"
        android:layout_height="wrap_content"
        android:text="Fragment Number 1" />

    <Button
        android:id="@+id/btnOneFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:id="@+id/btnTwoFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />




    <Button
        android:id="@+id/btnThreeFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />


    <ImageView
        android:id="@+id/imgFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>





</LinearLayout>

After designing then add this code to java file

Fragment1.java

package com.usmtip.demoappbyusmtip;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;


public class Fragment1 extends Fragment {



    //Declare Button
    Button button1;
    Button button2;
    Button button3;

    //Declare image
    ImageView imageView;





    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);




    }


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



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





        // find buttons by id
        button1 = (Button) view.findViewById(R.id.btnOneFragment1);
        button2 = (Button) view.findViewById(R.id.btnTwoFragment1);
        button3 = (Button) view.findViewById(R.id.btnThreeFragment1);


        // find imageView by id
        imageView = (ImageView) view.findViewById(R.id.imgFragment1);

        // set onclick listener on imageView
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "ImageView Clicked of Fragment 1", Toast.LENGTH_SHORT).show();
            }
        });






        // set onclick listener on buttons
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // perform any action on button click
                Toast.makeText(getActivity(), "Button 1 Clicked of Fragment 1", Toast.LENGTH_SHORT).show();
            }
        });


        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "Button 2 Clicked of Fragment 1", Toast.LENGTH_SHORT).show();
            }
        });



        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "Button 3 Clicked of Fragment 1", Toast.LENGTH_SHORT).show();
            }
        });


        // Inflate the layout for this fragment
        return view;
    }
}

Create new or second blank fragment and add this code in fragment

fragment_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:background="#DCDCDC"
    tools:context=".Fragment2">



    <TextView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment Number 2" />

    <Button
        android:id="@+id/btnOneFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:id="@+id/btnTwoFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />



    <ImageView
        android:id="@+id/imgFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>


    <Button
        android:id="@+id/btnThreeFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />



    <Button
        android:id="@+id/btnFourFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 4" />






</LinearLayout>

after designing second fragment add this code

Fragment2.java

package com.usmtip.demoappbyusmtip;

import android.media.Image;
import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;


public class Fragment2 extends Fragment {


    // declare Buttons
    Button button1;
    Button button2;
    Button button3;
    Button button4;



    // declare imageView
    ImageView imageView;




    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }



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



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



        // find buttons by id
        button1 = (Button) view.findViewById(R.id.btnOneFragment2);
        button2 = (Button) view.findViewById(R.id.btnTwoFragment2);
        button3 = (Button) view.findViewById(R.id.btnThreeFragment2);
        button4 = (Button) view.findViewById(R.id.btnFourFragment2);


        // find imageView by id
        imageView = (ImageView) view.findViewById(R.id.imgFragment2);

        // set onclick listener on imageView
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "ImageView Clicked of Fragment 2", Toast.LENGTH_SHORT).show();
            }
        });






        // set onclick listener on buttons
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // perform any action on button click
                Toast.makeText(getActivity(), "Button 1 Clicked of Fragment 2", Toast.LENGTH_SHORT).show();
            }
        });


        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "Button 2 Clicked of Fragment 2", Toast.LENGTH_SHORT).show();
            }
        });



        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "Button 3 Clicked of Fragment 2", Toast.LENGTH_SHORT).show();
            }
        });


        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "Button 4 Clicked of Fragment 2", Toast.LENGTH_SHORT).show();
            }
        });



        // Inflate the layout for this fragment
        return view;
    }
}

That's it now your coding is done. Now can use this code in your own way.

If you want to use ScrollView in fragments then check this code. This code will help you to use scrolling in fragments

Extra coding use ScrolView in Fragments

fragment_1.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    tools:context=".Fragment1">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:textSize="20dp"
        android:textColor="@color/black"
        android:layout_height="wrap_content"
        android:text="Fragment Number 1" />

    <Button
        android:id="@+id/btnOneFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:id="@+id/btnTwoFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />




    <Button
        android:id="@+id/btnThreeFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />


    <ImageView
        android:id="@+id/imgFragment1"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>


        <Button
            android:id="@+id/btnFiveFragment1"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Number 3" />


        <ImageView
            android:id="@+id/imgThreeFragment1"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/ic_launcher"/>

        <Button
            android:id="@+id/btnSixFragment1"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Number 3" />


        <ImageView
            android:id="@+id/imggeFragment1"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@mipmap/ic_launcher"/>


    </LinearLayout>



</ScrollView>

Second Fragment Coding

fragment_2.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:background="#DCDCDC"
    tools:context=".Fragment2">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    <TextView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:textSize="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment Number 2" />

    <Button
        android:id="@+id/btnOneFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:id="@+id/btnTwoFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />



    <ImageView
        android:id="@+id/imgFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>


    <Button
        android:id="@+id/btnThreeFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />



    <Button
        android:id="@+id/btnFourFragment2"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 4" />


    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />



    <ImageView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>


    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />



    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 4" />



    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 1" />


    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 2" />



    <ImageView
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"/>


    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 3" />



    <Button
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Number 4" />



</LinearLayout>



</ScrollView>