Android App Development Course in Kotlin, Creating an Image Sharing App

Android app development is currently one of the preferred fields among many developers. In this article, we will detail how to create a simple image-sharing app using Kotlin. Through this process, you will learn how to handle user authentication, upload and display images, and utilize cloud services like Firebase.

1. Preparing the Project

After installing Android Studio, create a new project. Choose the following settings:

• Project Name: ImageShareApp
• Package Name: com.example.imageshareapp
• Language: Kotlin
• Minimum API Level: API 21 (Lollipop)

2. Firebase Setup

This app stores and manages image data through Firebase. You need to set up Firebase’s Realtime Database and Storage.

1. Log in to the Firebase console.
2. Create a new project.
3. Add an Android app in the project settings and enter the package name.
4. Download the google-services.json file and add it to the app directory of the project.

Now, activate Firebase Realtime Database and Firebase Storage.

Firebase Gradle Setup

Add Firebase dependencies to your project’s build.gradle file:

dependencies {
    implementation platform("com.google.firebase:firebase-bom:30.0.0")
    implementation "com.google.firebase:firebase-storage"
    implementation "com.google.firebase:firebase-database"
}

3. UI Design

Here’s how to design the basic layout of the app. Open the activity_main.xml file and add the following code to create the UI:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button_upload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Upload Image"/>

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/button_upload">
    </ListView>

</RelativeLayout>

4. Select and Upload Image

This is the necessary code to select an image and upload it to Firebase Storage. Add the following code in MainActivity.kt:

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import com.google.firebase.storage.FirebaseStorage
import com.google.firebase.database.FirebaseDatabase

class MainActivity : AppCompatActivity() {

    private lateinit var storage: FirebaseStorage
    private lateinit var database: FirebaseDatabase
    private val IMAGE_PICK_CODE = 1000
    private var imageUri: Uri? = null

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

        storage = FirebaseStorage.getInstance()
        database = FirebaseDatabase.getInstance()

        findViewById(R.id.button_upload).setOnClickListener {
            pickImage()
        }
    }

    private fun pickImage() {
        val intent = Intent(Intent.ACTION_PICK)
        intent.type = "image/*"
        startActivityForResult(intent, IMAGE_PICK_CODE)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == IMAGE_PICK_CODE && resultCode == RESULT_OK && data != null) {
            imageUri = data.data
            uploadImage()
        }
    }

    private fun uploadImage() {
        val fileRef = storage.reference.child("images/${System.currentTimeMillis()}.jpg")
        imageUri?.let { uri ->
            fileRef.putFile(uri).addOnSuccessListener { taskSnapshot ->
                // Get the URL after successfully uploading.
                fileRef.downloadUrl.addOnSuccessListener { uri ->
                    saveImageUrlToDatabase(uri.toString())
                }
            }.addOnFailureListener { e ->
                // Handle errors
            }
        }
    }

    private fun saveImageUrlToDatabase(imageUrl: String) {
        val imageRef = database.reference.child("images").push()
        imageRef.setValue(imageUrl)
    }
}

5. Displaying the Image List

To display the uploaded images in the ListView, add the following code.

import android.widget.AdapterView
import android.widget.ArrayAdapter
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class MainActivity : AppCompatActivity() {
    // omitted...

    override fun onCreate(savedInstanceState: Bundle?) {
        // omitted...

        loadImageUrls()
    }

    private fun loadImageUrls() {
        database.reference.child("images").addValueEventListener(object : ValueEventListener {
            override fun onDataChange(snapshot: DataSnapshot) {
                val imageUrls = mutableListOf()
                for (imageSnapshot in snapshot.children) {
                    val imageUrl = imageSnapshot.getValue(String::class.java)
                    imageUrls.add(imageUrl ?: "")
                }
                displayImages(imageUrls)
            }

            override fun onCancelled(error: DatabaseError) {
                // Handle errors
            }
        })
    }

    private fun displayImages(imageUrls: List) {
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, imageUrls)
        findViewById(R.id.list_view).adapter = adapter
    }
}

6. Running the App

Once all the code is prepared, run the app. Check if the image upload and list display functions are working well. If issues arise, check the errors via Logcat.

7. Improving the App

After creating the basic image-sharing app, you can improve the app by adding features such as:

• Displaying the image list in thumbnail format
• Adding a preview feature when selecting an image
• Implementing user authentication for personalized image sharing
• Improving the app’s UI/UX

Conclusion

In this lecture, we explored the process of creating a simple image-sharing app using Kotlin. By utilizing Firebase, you can easily store and manage data without setting up a server. Furthermore, you can continuously improve it by adding various features. I hope this lecture helps you in your Android app development journey.