3 Temmuz 2020 Cuma

Kotlin-3 (Android custom toast message - ekran da özelleştirilmiş mesaj göstermek)


Herkese merhaba,
bu yazımda sizlere Kotlin ile Android uygulama geliştirirken kendi toast message laoyutunuzu nasıl tasarlanacağını ve bu  ekranda kendi tasarladığınız layout üzerinde mesaj göstermeyi paylaşacağım.

İlk olarak Android Studio ile bir Kotlin projesi oluşturun. Daha sonra activity_main.xml
  dosyasını açarak buradaki TextView’ ı  kaldırın ve yerine bir Button ekleyin. Bu butona tıklayınca Toast mesajı gösterilecektir.

activity_main.xml dosyasının içeriği aşağıdaki gibi olacaktır.


<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/constraintLayoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
android:id="@+id/showToastBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Toast"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>


 

Daha sonra activity_main.xml dosyasının yanında   toast_layout.xml adında bir xml dosyası oluşturun.  Bu xml dosyası içindeki component ler blok şeklinde görünmesi için xml  LinearLayout olarak tasarlanmıştır. Ayrıca resim ve mesajın yan yana(aynı satırda) görünmesi için   android:orientation="horizontal"  olarak set edilmiştir. 


LieneerLayout olarak tasarladığınız toast_layout.xml  dosyasına bir ImageView be bir TextView ekleyin. ImageView ile icon TextView ile ise girilen mesaj gösterilecektir.

toast_layout.xml dosyasının son hali aşağıdaki gibi olacaktır.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/customToastLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/colorYellow"
android:maxHeight="50dp"
android:orientation="horizontal"
android:padding="10dp"
android:weightSum="1">

<ImageView
android:id="@+id/toastImageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_weight="0.1" />

<TextView
android:id="@+id/toastTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.9"
android:textColor="@color/colorBlue"
android:textSize="18sp"
android:textStyle="bold" />

</LinearLayout>

 

 

Son adım olarak MainActivity.kt dosyasına giderek onCreate methodu içerisinde  activity_main.xml de tanımladığımız button’a onClickListener tanımlıyoruz. Bu sayede  ekrandaki butona tıklayınca ekranda mesaj gösterilecektir.

onCreate methodunda  ve  setOnClickListener içerisinde çağrılan showCustomToast method incelendiğinde LayoutInflater
 ile xml ile tanımlanan layout bulunarak kotlin objesine dönüştürülmüştür. 
Obje’ ye dönüştürme işleminden sonra ise TextView ve ImageView componentlerine erişerek hem icon hem de  mesaj içeriği güncellenmiştir.

Son gelinen noktada MainActivity.kt dosyasının içeriği aşağıdaki şekilde olacaktır.


package com.tutorials.showcustomtoast

import android.os.Bundle
import android.view.Gravity
import android.view.LayoutInflater
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.toast_layout.view.*

class MainActivity : AppCompatActivity() {

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

showToastBtn.setOnClickListener {
showCustomToast("Custom Toast Message", R.drawable.info)
}
}

fun showCustomToast(message: String, imageSrc: Int) {
val toast = Toast(this)
toast.apply {
val layout =
LayoutInflater.from(applicationContext)
.inflate(R.layout.toast_layout, null, false)

layout.toastTextView.text = message
layout.toastImageView.setImageResource(imageSrc)

setGravity(Gravity.CENTER, 0, 0)
setDuration(Toast.LENGTH_SHORT)
setView(layout)
show()
}
}
}


 

Uygulamanın kaynak dosyalarına aşağıdaki linkten ulaşabilirsiniz.
github : https://github.com/lvntyldz/tutorials/tree/master/kotlin-android-app-examples/03-show-custom-toast 


Hiç yorum yok:

Yorum Gönderme