DEV Community

Varun Vikyat b
Varun Vikyat b

Posted on

TabLayout with both image and calculation(Java & XML)

ImageFragment.java

package com.example.tablayout;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageFragment extends Fragment {

public ImageFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_image, container, false);
    ImageView imageView = view.findViewById(R.id.imageView);
    imageView.setImageResource(R.drawable.sample_image); // Add an image to your drawable folder
    return view;
}
Enter fullscreen mode Exit fullscreen mode

}

Image (XML)

<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- ImageView with the ID imageView -->
<ImageView
    android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/sample_image" />
Enter fullscreen mode Exit fullscreen mode

MainActivity.java

package com.example.tablayout;

import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

public class MainActivity extends AppCompatActivity {

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

    TabLayout tabLayout = findViewById(R.id.tabLayout);
    ViewPager2 viewPager = findViewById(R.id.viewPager);

    ViewPagerAdapter adapter = new ViewPagerAdapter(this);
    viewPager.setAdapter(adapter);

    new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
        if (position == 0) {
            tab.setText("Image");
        } else {
            tab.setText("Sum Calculator");
        }
    }).attach();
}
Enter fullscreen mode Exit fullscreen mode

}

MainActivity (XML)

<?xml version="1.0" encoding="utf-8"?>
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">

<!-- TabLayout for Tabs -->
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@android:color/holo_blue_light"
    app:tabSelectedTextColor="@android:color/holo_blue_light"
    app:tabTextColor="@android:color/darker_gray" />

<!-- ViewPager2 to swap between Fragments -->
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/tabLayout" />
Enter fullscreen mode Exit fullscreen mode

ViewPagerAdapter.java

package com.example.tablayout;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {

public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
}

@NonNull
@Override
public Fragment createFragment(int position) {
    if (position == 0) {
        return new ImageFragment();
    } else {
        return new SumFragment();
    }
}

@Override
public int getItemCount() {
    return 2; // Two fragments (Image and Sum Calculator)
}
Enter fullscreen mode Exit fullscreen mode

}

SumFragment.java

package com.example.tablayout;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import androidx.fragment.app.Fragment;

public class SumFragment extends Fragment {

public SumFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_sum, container, false);

    EditText editText1 = view.findViewById(R.id.editText1);
    EditText editText2 = view.findViewById(R.id.editText2);
    Button button = view.findViewById(R.id.calculateButton);

    button.setOnClickListener(v -> {
        String num1 = editText1.getText().toString();
        String num2 = editText2.getText().toString();
        if (!num1.isEmpty() && !num2.isEmpty()) {
            int sum = Integer.parseInt(num1) + Integer.parseInt(num2);
            Toast.makeText(getActivity(), "Sum: " + sum, Toast.LENGTH_SHORT).show();
        }
    });

    return view;
}
Enter fullscreen mode Exit fullscreen mode

}

sumfragment (XML)

<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

<!-- EditText for the first number -->
<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter first number"
    android:inputType="number" />

<!-- EditText for the second number -->
<EditText
    android:id="@+id/editText2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter second number"
    android:inputType="number" />

<!-- Button to trigger sum calculation -->
<Button
    android:id="@+id/calculateButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate Sum"
    android:layout_gravity="center" />

<!-- TextView to display the result -->
<TextView
    android:id="@+id/resultTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Result: "
    android:textSize="18sp" />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)