DEV Community

mushokuuuu
mushokuuuu

Posted on

A comprehensive how to on Tab layout for android

//activity_main.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.appbar.AppBarLayout>

   Pager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Enter fullscreen mode Exit fullscreen mode
//MainActivity.java
public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

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

        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);

        tabLayout.addTab(tabLayout.newTab().setText("Purchase Tickets"));
        tabLayout.addTab(tabLayout.newTab().setText("Profile"));
        tabLayout.addTab(tabLayout.newTab().setText("Past Bookings"));

        final PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}

            @Override
            public void onTabReselected(TabLayout.Tab tab) {}
        });
    }
}

Enter fullscreen mode Exit fullscreen mode
//PagerAdapter.java
public class PagerAdapter extends FragmentPagerAdapter {

    private int numOfTabs;

    public PagerAdapter(FragmentManager fm, int numOfTabs) {
        super(fm);
        this.numOfTabs = numOfTabs;
    }

    @Override
    public Fragment getItem(int position) {
        (position) {
            case 0:
                return new PurchaseTicketsFragment();
            case 1:
                return new ProfileFragment();
            case 2:
                return new PastBookingsFragment();
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return numOfTabs;
    }
}

Enter fullscreen mode Exit fullscreen mode
//fragment_purchase_tickets.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name" />

    <EditText
        android:id="@+id/age"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Age"
        android:inputType="number" />

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TimePicker
        android:id="@+id/time_picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:timePickerMode="spinner" />

    <Spinner
        android:id="@+id/seat_type_spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/seat_types" />

    <!-- Add other fields using checkboxes, radio buttons, context menus, and popup menus here -->

    <Button
        android:id="@+id/submit_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit" />
</LinearLayout>

Enter fullscreen mode Exit fullscreen mode
//PurchaseTicketsFragment.java
public class PurchaseTicketsFragment extends Fragment {

    private EditText nameEditText, ageEditText;
    private DatePicker datePicker;
    private TimePicker timePicker;
    private Spinner seatTypeSpinner;
    private Button submitButton;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_purchase_tickets, container, false);

        nameEditText = view.findViewById(R.id.name);
        ageEditText = view.findViewById(R.id.age);
        datePicker = view.findViewById(R.id.date_picker);
        timePicker = view.findViewById(R.id.time_picker);
        seatTypeSpinner = view.findViewById(R.id.seat_type_spinner);
        submitButton = view.findViewById(R.id.submit_button);

        submitButton.setOnClickListener(v -> submitTicket());

        return view;
    }

    private void submitTicket() {
        String name = nameEditText.getText().toString();
        String age = ageEditText.getText().toString();
        String date = datePicker.getDayOfMonth() + "/" + (datePicker.getMonth() + 1) + "/" + datePicker.getYear();
        String time = timePicker.getHour() + ":" + timePicker.getMinute();
        String seatType = seatTypeSpinner.getSelectedItem().toString();

        // Handle ticket submission logic here
        // Navigate to ticket printing activity
        Intent intent = new Intent(getActivity(), TicketPrintingActivity.class);
        intent.putExtra("name", name);
        intent.putExtra("age", age);
        intent.putExtra("date", date);
        intent.putExtra("time", time);
        intent.putExtra("seatType", seatType);
        startActivity(intent);
    }
}

Enter fullscreen mode Exit fullscreen mode

//activity_login_signup.xml
//LoginSignupActivity.java

Top comments (0)