Android Create popup Dialog Menu Payment

Android Create popup Dialog Menu Payment

1. Project Structure


2. Gradle

plugins {
  id 'com.android.application'
}

android {
  compileSdkVersion 30
  buildToolsVersion "30.0.3"

  defaultConfig {
      applicationId "com.example.menupayment"
      minSdkVersion 19
      targetSdkVersion 30
      versionCode 1
      versionName "1.0"

      testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  }

  buildTypes {
      release {
          minifyEnabled false
          proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
      }
  }
  compileOptions {
      sourceCompatibility JavaVersion.VERSION_1_8
      targetCompatibility JavaVersion.VERSION_1_8
  }
}

dependencies {

  implementation 'androidx.appcompat:appcompat:1.3.0'
  implementation 'com.google.android.material:material:1.4.0'
  implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
  testImplementation 'junit:junit:4.+'
  androidTestImplementation 'androidx.test.ext:junit:1.1.3'
  androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}


3. Main Activity

package com.example.menupayment;

import android.os.Bundle;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatButton;

import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import com.example.menupayment.fragment.DialogPaymentFragment;

public class MainActivity extends AppCompatActivity {

  public static final int DIALOG_QUEST_CODE = 300;

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

      ((AppCompatButton) findViewById(R.id.btnShowMenu)).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              showDialogFullscreen();
          }
      });
  }

  private void showDialogFullscreen() {
      FragmentManager fragmentManager = getSupportFragmentManager();
      DialogPaymentFragment newFragment = new DialogPaymentFragment();
      newFragment.setRequestCode(DIALOG_QUEST_CODE);
      FragmentTransaction transaction = fragmentManager.beginTransaction();
      transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
      transaction.add(android.R.id.content, newFragment).addToBackStack(null).commit();
      newFragment.setOnCallbackResult(new DialogPaymentFragment.CallbackResult() {
          @Override
          public void sendResult(int requestCode) {
              Toast.makeText(getApplicationContext(), "Menu clicked", Toast.LENGTH_SHORT).show();
          }
      });
  }


  @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);
  }
}


4. Fragment 

package com.example.menupayment.fragment;

import android.app.Dialog;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;

import androidx.annotation.NonNull;
import androidx.fragment.app.DialogFragment;

import com.example.menupayment.R;

public class DialogPaymentFragment extends DialogFragment {

  public CallbackResult callbackResult;

  public void setOnCallbackResult(final CallbackResult callbackResult) {
      this.callbackResult = callbackResult;
  }

  private int request_code = 0;
  private View root_view;

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

      root_view = inflater.inflate(R.layout.dialog_menu_payment, container, false);
      ((ImageButton) root_view.findViewById(R.id.btnClose)).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              dismiss();
          }
      });
      (root_view.findViewById(R.id.lyt_add_card)).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              onPaymentClick();
          }
      });
      (root_view.findViewById(R.id.lyt_request)).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              onPaymentClick();
          }
      });
      (root_view.findViewById(R.id.lyt_link_account)).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              onPaymentClick();
          }
      });
      return root_view;
  }

  private void onPaymentClick() {
      if (callbackResult != null) {
          callbackResult.sendResult(request_code);
      }
      dismiss();
  }

  @NonNull
  @Override
  public Dialog onCreateDialog(Bundle savedInstanceState) {
      Dialog dialog = super.onCreateDialog(savedInstanceState);
      dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
      return dialog;
  }

  public void setRequestCode(int request_code) {
      this.request_code = request_code;
  }

  public interface CallbackResult {
      void sendResult(int requestCode);
  }

}


5. Layout

<?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"
  android:background="@android:color/white"
  android:fitsSystemWindows="true"
  android:orientation="vertical">

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <androidx.appcompat.widget.AppCompatButton
          android:id="@+id/btnShowMenu"
          style="@style/Button.Accent"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:paddingLeft="15dp"
          android:paddingRight="15dp"
          android:text="Show Menu Payment" />

  </RelativeLayout>

</LinearLayout>


<?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"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/blue_900"
  android:fitsSystemWindows="true"
  android:orientation="vertical">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:layout_margin="10dp"
      android:orientation="horizontal">

      <ImageButton
          android:id="@+id/btnClose"
          android:layout_width="?attr/actionBarSize"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/selectableItemBackgroundBorderless"
          android:tint="@android:color/white"
          app:srcCompat="@drawable/ic_close" />

      <TextView
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:gravity="center"
          android:text="Payment"
          android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
          android:textColor="@color/white" />

      <View
          android:layout_width="56dp"
          android:layout_height="?attr/actionBarSize" />

  </LinearLayout>

  <androidx.core.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/nestedScroll"
      android:scrollbars="none"
      android:scrollingCache="true">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:layout_marginTop="@dimen/spacing_large"
          android:padding="@dimen/spacing_large">

          <LinearLayout
              android:id="@+id/lyt_add_card"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/selectableItemBackground"
              android:clickable="true"
              android:gravity="center_vertical"
              android:orientation="horizontal">

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

              <RelativeLayout
                  android:layout_width="50dp"
                  android:layout_height="50dp">

                  <ImageView
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:tint="@color/blue_700"
                      app:srcCompat="@drawable/circle_shape_white" />

                  <ImageView
                      android:layout_width="@dimen/spacing_mxlarge"
                      android:layout_height="@dimen/spacing_mxlarge"
                      android:layout_centerInParent="true"
                      android:tint="@color/grey_10"
                      app:srcCompat="@drawable/ic_credit_card" />

              </RelativeLayout>

              <View
                  android:layout_width="@dimen/spacing_large"
                  android:layout_height="0dp" />

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

                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="Add Card"
                      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                      android:textColor="@color/grey_5" />


                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="@dimen/spacing_medium"
                      android:text="Add more payment method"
                      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                      android:textColor="@color/grey_40" />

              </LinearLayout>

              <View
                  android:layout_width="0dp"
                  android:layout_height="0dp"
                  android:layout_weight="1" />

              <ImageView
                  android:layout_width="@dimen/spacing_mxlarge"
                  android:layout_height="@dimen/spacing_mxlarge"
                  android:tint="@color/grey_10"
                  app:srcCompat="@drawable/ic_arrow_right" />

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

          </LinearLayout>

          <View
              android:layout_width="match_parent"
              android:layout_height="1dp"
              android:layout_margin="@dimen/spacing_mlarge"
              android:background="@color/overlay_light_10" />

          <LinearLayout
              android:id="@+id/lyt_request"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/selectableItemBackground"
              android:clickable="true"
              android:gravity="center_vertical"
              android:orientation="horizontal">

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

              <RelativeLayout
                  android:layout_width="50dp"
                  android:layout_height="50dp">

                  <ImageView
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:tint="@color/blue_700"
                      app:srcCompat="@drawable/circle_shape_white" />

                  <ImageView
                      android:layout_width="@dimen/spacing_mxlarge"
                      android:layout_height="@dimen/spacing_mxlarge"
                      android:layout_centerInParent="true"
                      android:tint="@color/grey_10"
                      app:srcCompat="@drawable/ic_monetization_on" />

              </RelativeLayout>

              <View
                  android:layout_width="@dimen/spacing_large"
                  android:layout_height="0dp" />

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

                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="Request"
                      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                      android:textColor="@color/grey_5" />


                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="@dimen/spacing_medium"
                      android:text="Ask money from other"
                      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                      android:textColor="@color/grey_40" />

              </LinearLayout>

              <View
                  android:layout_width="0dp"
                  android:layout_height="0dp"
                  android:layout_weight="1" />

              <ImageView
                  android:layout_width="@dimen/spacing_mxlarge"
                  android:layout_height="@dimen/spacing_mxlarge"
                  android:tint="@color/grey_10"
                  app:srcCompat="@drawable/ic_arrow_right" />

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

          </LinearLayout>

          <View
              android:layout_width="match_parent"
              android:layout_height="1dp"
              android:layout_margin="@dimen/spacing_mlarge"
              android:background="@color/overlay_light_10" />

          <LinearLayout
              android:id="@+id/lyt_link_account"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/selectableItemBackground"
              android:clickable="true"
              android:gravity="center_vertical"
              android:orientation="horizontal">

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

              <RelativeLayout
                  android:layout_width="50dp"
                  android:layout_height="50dp">

                  <ImageView
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"
                      android:tint="@color/blue_700"
                      app:srcCompat="@drawable/circle_shape_white" />

                  <ImageView
                      android:layout_width="@dimen/spacing_mxlarge"
                      android:layout_height="@dimen/spacing_mxlarge"
                      android:layout_centerInParent="true"
                      android:tint="@color/grey_10"
                      app:srcCompat="@drawable/ic_add" />

              </RelativeLayout>

              <View
                  android:layout_width="@dimen/spacing_large"
                  android:layout_height="0dp" />

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

                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:text="Link account"
                      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                      android:textColor="@color/grey_5" />


                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginTop="@dimen/spacing_medium"
                      android:text="Add new bank account"
                      android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                      android:textColor="@color/grey_40" />

              </LinearLayout>

              <View
                  android:layout_width="0dp"
                  android:layout_height="0dp"
                  android:layout_weight="1" />

              <ImageView
                  android:layout_width="@dimen/spacing_mxlarge"
                  android:layout_height="@dimen/spacing_mxlarge"
                  android:tint="@color/grey_10"
                  app:srcCompat="@drawable/ic_arrow_right" />

              <View
                  android:layout_width="@dimen/spacing_middle"
                  android:layout_height="0dp" />

          </LinearLayout>

          <View
              android:layout_width="match_parent"
              android:layout_height="1dp"
              android:layout_margin="@dimen/spacing_mlarge"
              android:background="@color/overlay_light_10" />

      </LinearLayout>

  </androidx.core.widget.NestedScrollView>

</LinearLayout>


<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:contentInsetStartWithNavigation="0dp"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


6. Values

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="purple_200">#FFBB86FC</color>
  <color name="purple_500">#FF6200EE</color>
  <color name="purple_700">#FF3700B3</color>
  <color name="teal_200">#FF03DAC5</color>
  <color name="teal_700">#FF018786</color>
  <color name="black">#FF000000</color>
  <color name="white">#FFFFFFFF</color>

  <color name="colorAccent">#FF4081</color>
  <color name="blue_900">#0D47A1</color>
  <color name="blue_700">#1976D2</color>
  <color name="grey_10">#e6e6e6</color>
  <color name="overlay_light_10">#1AFFFFFF</color>
  <color name="grey_40">#999999</color>
  <color name="grey_5">#f2f2f2</color>


</resources>


<resources>
  <!-- Default screen margins, per the Android Design guidelines. -->
  <dimen name="actionBarSize">56dp</dimen>

  <dimen name="activity_horizontal_margin">16dp</dimen>
  <dimen name="activity_vertical_margin">16dp</dimen>
  <dimen name="nav_header_vertical_spacing">16dp</dimen>
  <dimen name="nav_header_height">200dp</dimen>
  <dimen name="fab_margin">16dp</dimen>
  <dimen name="viewpager_margin_overlap">-60dp</dimen>
  <dimen name="viewpager_margin_overlap_payment">-30dp</dimen>

  <!--genaral spacing-->
  <dimen name="spacing_xsmall">2dp</dimen>
  <dimen name="spacing_small">3dp</dimen>
  <dimen name="spacing_medium">5dp</dimen>
  <dimen name="spacing_xmedium">7dp</dimen>
  <dimen name="spacing_middle">10dp</dimen>
  <dimen name="spacing_large">15dp</dimen>
  <dimen name="spacing_smlarge">18dp</dimen>
  <dimen name="spacing_mlarge">20dp</dimen>
  <dimen name="spacing_mxlarge">25dp</dimen>
  <dimen name="spacing_xlarge">35dp</dimen>
  <dimen name="spacing_xmlarge">40dp</dimen>
  <dimen name="spacing_xxlarge">50dp</dimen>
  <dimen name="spacing_xxxlarge">55dp</dimen>
  <dimen name="appbar_padding_top">8dp</dimen>

</resources>


<resources xmlns:tools="http://schemas.android.com/tools">
  <!-- Base application theme. -->
  <style name="Theme.MenuPayment" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
      <!-- Primary brand color. -->
      <item name="colorPrimary">#1976D2</item>
      <item name="colorPrimaryVariant">@color/purple_700</item>
      <item name="colorOnPrimary">@color/white</item>
      <!-- Secondary brand color. -->
      <item name="colorSecondary">@color/teal_200</item>
      <item name="colorSecondaryVariant">@color/teal_700</item>
      <item name="colorOnSecondary">@color/black</item>
      <!-- Status bar color. -->
      <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
      <!-- Customize your theme here. -->
      <item name="colorAccent">@color/colorAccent</item>

  </style>

  <style name="Button.Accent" parent="@style/Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@color/colorAccent</item>
      <item name="android:textColor">@android:color/white</item>
  </style>
</resources>