Android App Development Tutorial for Beginners - Your First App

Introduction

This tutorial is designed to guide you through the process of building your first Android app—a tip calculator—using Kotlin and XML. No prior experience with Android development is required. By following these steps, you will learn how to create a user interface, implement app logic, and make your app functional and visually appealing.

Step 1: Set Up Your Development Environment

• Download and install Android Studio, the official IDE for Android development.
• Open Android Studio and create a new project:
  • Choose "Empty Activity."
  • Name your project (e.g., "TipCalculator").
  • Select Kotlin as the programming language.
• Ensure you have the correct SDK installed for Android development.

Step 2: Design the User Interface

• Open activity_main.xml in the Layout Editor.
• Use ConstraintLayout to arrange your UI elements:
  • Drag and drop a TextView for the title.
  • Add an EditText for the base amount input.
  • Add another EditText for the tip percentage input.
  • Place a Button to trigger the tip calculation.
  • Include TextViews to display the calculated tip and total.

Example Layout Code

<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/titleTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tip Calculator"
        app:layout_constraintTop_toTopOf(parent)
        app:layout_constraintStart_toStartOf(parent) />

    <EditText
        android:id="@+id/baseAmountEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Base Amount"
        app:layout_constraintTop_toBottomOf(titleTextView)
        app:layout_constraintStart_toStartOf(parent)
        app:layout_constraintEnd_toEndOf(parent) />

    <EditText
        android:id="@+id/tipPercentageEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Tip Percentage"
        app:layout_constraintTop_toBottomOf(baseAmountEditText)
        app:layout_constraintStart_toStartOf(parent)
        app:layout_constraintEnd_toEndOf(parent) />

    <Button
        android:id="@+id/calculateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calculate"
        app:layout_constraintTop_toBottomOf(tipPercentageEditText)
        app:layout_constraintStart_toStartOf(parent) />

    <TextView
        android:id="@+id/tipTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf(calculateButton)
        app:layout_constraintStart_toStartOf(parent) />

    <TextView
        android:id="@+id/totalTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf(tipTextView)
        app:layout_constraintStart_toStartOf(parent) />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Implement the App Logic

• Open MainActivity.kt and set up the event listeners:
  • Create variables for the UI elements.
  • Use setOnClickListener to handle the button click event.

Example Kotlin Code

class MainActivity : AppCompatActivity() {

    private lateinit var baseAmountEditText: EditText
    private lateinit var tipPercentageEditText: EditText
    private lateinit var calculateButton: Button
    private lateinit var tipTextView: TextView
    private lateinit var totalTextView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        baseAmountEditText = findViewById(R.id.baseAmountEditText)
        tipPercentageEditText = findViewById(R.id.tipPercentageEditText)
        calculateButton = findViewById(R.id.calculateButton)
        tipTextView = findViewById(R.id.tipTextView)
        totalTextView = findViewById(R.id.totalTextView)

        calculateButton.setOnClickListener {
            calculateTip()
        }
    }

    private fun calculateTip() {
        val baseAmount = baseAmountEditText.text.toString().toDoubleOrNull() ?: 0.0
        val tipPercentage = tipPercentageEditText.text.toString().toDoubleOrNull() ?: 0.0
        val tip = baseAmount * (tipPercentage / 100)
        val total = baseAmount + tip

        tipTextView.text = "Tip: $tip"
        totalTextView.text = "Total: $total"
    }
}

Step 4: Enhance the User Experience

• Add animations to the tip percentage display.
• Customize the app's footer for a unique look.

Conclusion

Congratulations on creating your first Android app! You have learned how to set up your development environment, design a user interface, and implement basic app logic. For the next steps, consider exploring more features like publishing your app or learning additional Kotlin concepts. Keep practicing to enhance your skills in Android development.