Checkout Step
Download MaterialX 2.8
Get the Full Android Source Code for all the listed Layouts and more.
Buy Now for $25Layout Screenshot

package com.material.components.activity.shopping;
import android.graphics.PorterDuff;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.material.components.R;
import com.material.components.fragment.FragmentConfirmation;
import com.material.components.fragment.FragmentPayment;
import com.material.components.fragment.FragmentShipping;
import com.material.components.utils.Tools;
public class ShoppingCheckoutStep extends AppCompatActivity {
private enum State {
SHIPPING,
PAYMENT,
CONFIRMATION
}
State[] array_state = new State[]{State.SHIPPING, State.PAYMENT, State.CONFIRMATION};
private View line_first, line_second;
private ImageView image_shipping, image_payment, image_confirm;
private TextView tv_shipping, tv_payment, tv_confirm;
private int idx_state = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_shopping_checkout_step);
initToolbar();
initComponent();
displayFragment(State.SHIPPING);
}
private void initComponent() {
line_first = (View) findViewById(R.id.line_first);
line_second = (View) findViewById(R.id.line_second);
image_shipping = (ImageView) findViewById(R.id.image_shipping);
image_payment = (ImageView) findViewById(R.id.image_payment);
image_confirm = (ImageView) findViewById(R.id.image_confirm);
tv_shipping = (TextView) findViewById(R.id.tv_shipping);
tv_payment = (TextView) findViewById(R.id.tv_payment);
tv_confirm = (TextView) findViewById(R.id.tv_confirm);
image_payment.setColorFilter(getResources().getColor(R.color.grey_10), PorterDuff.Mode.SRC_ATOP);
image_confirm.setColorFilter(getResources().getColor(R.color.grey_10), PorterDuff.Mode.SRC_ATOP);
(findViewById(R.id.lyt_next)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (idx_state == array_state.length - 1) return;
idx_state++;
displayFragment(array_state[idx_state]);
}
});
(findViewById(R.id.lyt_previous)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (idx_state < 1) return;
idx_state--;
displayFragment(array_state[idx_state]);
}
});
}
private void initToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_close);
toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.grey_60), PorterDuff.Mode.SRC_ATOP);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Tools.setSystemBarColor(this, android.R.color.white);
Tools.setSystemBarLight(this);
}
private void displayFragment(State state) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
Fragment fragment = null;
refreshStepTitle();
if (state.name().equalsIgnoreCase(State.SHIPPING.name())) {
fragment = new FragmentShipping();
tv_shipping.setTextColor(getResources().getColor(R.color.grey_90));
image_shipping.clearColorFilter();
} else if (state.name().equalsIgnoreCase(State.PAYMENT.name())) {
fragment = new FragmentPayment();
line_first.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
image_shipping.setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_ATOP);
image_payment.clearColorFilter();
tv_payment.setTextColor(getResources().getColor(R.color.grey_90));
} else if (state.name().equalsIgnoreCase(State.CONFIRMATION.name())) {
fragment = new FragmentConfirmation();
line_second.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
image_payment.setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_ATOP);
image_confirm.clearColorFilter();
tv_confirm.setTextColor(getResources().getColor(R.color.grey_90));
}
if (fragment == null) return;
fragmentTransaction.replace(R.id.frame_content, fragment);
fragmentTransaction.commit();
}
private void refreshStepTitle() {
tv_shipping.setTextColor(getResources().getColor(R.color.grey_20));
tv_payment.setTextColor(getResources().getColor(R.color.grey_20));
tv_confirm.setTextColor(getResources().getColor(R.color.grey_20));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_setting, menu);
Tools.changeMenuIconColor(menu, getResources().getColor(R.color.grey_60));
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
} else {
Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();
}
return super.onOptionsItemSelected(item);
}
}