Android studio payment app UI design

Android studio Xml, Kotlin payment app ui with complete source code for free by Shashank Singhal. Ideal for payment app, homepage design templates etc.

Author

Author Name:- Vishal Swami
GitHub Link:- https://github.com/

Here’s an example of a payment app UI design using Android Studio. Below is a step-by-step guide:

Step 1: Set up your project
Create a new Android project in Android Studio.

Step 2: Create the layout files
Create the following layout files in your project:

activity_payment.xml:

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

    <!-- Payment amount -->
    <TextView
        android:id="@+id/textViewAmount"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="Enter payment amount"
        android:textSize="18sp" />

    <!-- Payment input field -->
    <EditText
        android:id="@+id/editTextPayment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="32dp"
        android:hint="Payment amount"
        android:inputType="numberDecimal"
        android:textSize="24sp" />

    <!-- Payment methods -->
    <TextView
        android:id="@+id/textViewPaymentMethods"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="Select payment method"
        android:textSize="18sp" />

    <!-- Payment method options -->
    <RadioGroup
        android:id="@+id/radioGroupPaymentMethods"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="32dp"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/radioButtonCreditCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Credit Card" />

        <RadioButton
            android:id="@+id/radioButtonPayPal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="PayPal" />

        <RadioButton
            android:id="@+id/radioButtonGooglePay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Google Pay" />
    </RadioGroup>

    <!-- Pay button -->
    <Button
        android:id="@+id/buttonPay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="32dp"
        android:text="Pay Now" />

</LinearLayout>

Step 3: Create the Activity class
Create a new Java or Kotlin class named PaymentActivity and update it with the following code:

PaymentActivity.java:

public class PaymentActivity extends AppCompatActivity {

    private TextView textViewAmount;
    private EditText editTextPayment;
    private RadioGroup radioGroupPaymentMethods;
    private Button buttonPay;

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

        textViewAmount = findViewById(R.id.textViewAmount);
        editTextPayment = findViewById(R.id.editTextPayment);
        radioGroupPaymentMethods = findViewById(R.id.radioGroupPaymentMethods);
        buttonPay = findViewById(R.id.buttonPay);

        buttonPay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String paymentAmount = editTextPayment.getText().toString();
                int selectedPaymentMethodId = radioGroupPaymentMethods.getCheckedRadioButtonId();
                String paymentMethod = "";

                switch (selectedPaymentMethodId) {
                    case R.id.radioButtonCreditCard:
                        paymentMethod = "Credit Card";
                        break;
                    case R.id.radioButtonPayPal:
                        paymentMethod = "PayPal";
                        break;
                    case R.id.radioButtonGooglePay:
                        paymentMethod = "Google Pay";
                        break;
                }

                String paymentDetails = "Payment Amount: " + paymentAmount +
                        "\nPayment Method: " + paymentMethod;

                Toast.makeText(PaymentActivity.this, paymentDetails, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Step 4: Connect the Activity to the layout file
Open the AndroidManifest.xml file and add the following line inside the <application> tag:

<activity android:name=".PaymentActivity" />

Step 5: Build and run the app
Build and run your app on an emulator or physical device.

Congratulations! You have created a payment app UI design in Android Studio. The UI includes an input field for the payment amount, radio buttons for selecting the payment method, and a button to initiate the payment. When the user clicks the “Pay Now” button, a Toast message is displayed showing the payment amount and selected payment method.

Feel free to customize the UI elements and add additional functionality as per your requirements.