Tuğba Üstündağ | Smality Mobile Software

Android’de Erişilebilirlik İyileştirmeleri

Tasarım, yazılım projelerinizin vitrinde ön plan çıkmasını sağlayan önemli bir etmendir. Tasarımın göze hitap etmesi haricinde müşterinin projeyi uzun bir süre kullanabilmesi içinde tasarım elementlerine erişilebilirliğin yüksek olması gerekir.
Bu makale de Accessibility Scanner App ile bir Android uygulamasının arayüz elementlerine erişilebilirliğin kolay bir şekilde arttırmasını sağlayarak kullanıcı deneyimini iyileştirmeyi anlatacağım.

Accessibility(Erişilebilirlik) Nedir?

Bir kişinin bir Android cihazı kullanımını etkileyen yaygın durumlar arasında körlük veya az görme, sağırlık veya işitme bozukluğu, kısıtlı motor beceriler, bilişsel engeller ve renk körlüğü yer alır.
Diğer bir yandan bu durumları yaşamayan kullanıcılar da dahi uygulamadaki arayüz elementlerine erişmekte zorluluklar yaşayabildiğinden kaynaklı kullanıcı deneyimini olumsuz etkilenir.
Android uygulamanızdaki erişilebilirlik sorunlarını tespit etmek için Google oluşturduğu Accessibility Scanner uygulamasından yararlanacağız. İlk önce cihazınıza Google Play’den Accessibility Scanner linkinden uygulamayı indirmeliyiz. Adımlar:

Accessibility Scanner uygulamasını kullanabilmek için gerekli izinleri vermeliyiz
Uygulamaya izinleri verdiğimizde yuvarlak mavi icon oluşur. İcon’a tıkladığında inceleme yapmak istediğiniz arayüzün ekran görüntüsünü alırsınız
Accessibility Scanner ekran görüntüsü aldığınız arayüzdeki elementlerin erişilebilirliğini arttırabilmek için önerilerde bulunur.

Bu anlattıklarımı Accessibility Scanner ile nasıl uygulayabileceğimizi gösteren videoyu izleyelim.

Video gösterdiğim üzere Accessibility Example uygulamamızın anasayfasını Accessibility Scanner ile inceledik.

Accessibility Scanner kullanıcı deneyiminin arttırılması gereken öğeleri Şekil-1 deki gibi turuncu çizgilerle belirtir. Şekil-2 de, belirlenen öğelerin id bilgisini verip düzeltilmesi gereken yapıların açıklamalarını listelemektedir.

Elementlerin Erişilebilirliklerini Nasıl Arttıracağız?

Örneğimizde verilen önerileri dikkate alarak çözümler üretelim

Color contrast

Ön plan ve arka plan renkleri arasında yeterli kontrast yoksa, görme bozukluğu olan kullanıcılar ekrandaki bilgileri okumakta daha fazla güçlük çekerler. Düşük kontrast oranları, bazı kullanıcılar için görüntülerin birlikte bulanıklaşmasına neden olabilirken, yüksek kontrast oranları, görüntülerin daha net bir şekilde öne çıkmasını sağlar. Bu yüzden id değeri “title” olan arayüz elementimiz için Metin kontrastı uyarısını gösterdi. Bu elementin rengini aşağıdaki videoyayı uygulayarak kontrastını bulalım.

Videoda kontrast oranını uygun renkleri bulduğum için şeklinde doğruladı ve başta 6 tane önerim bulunurken. Şimdi 5 tane kaldı.:) Kontrast yüksek olan rengimizi kodda güncelleyelim.

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nature Pictures"
        android:textColor="#7C602F"/>

1

2

3

4

5

6

<TextView

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Nature Pictures"

android:textColor="#7C602F"/>

Touch Targets (Dokunma Hedefi)

id değeri imgBack olan ImageButton öğesine kullanıcıların daha rahat tıklayabilmeleri için boyutunu büyütmeyi önermektedir. Odaklanılabilir öğelerin dokunulabilir alanının en az 48dp X 48dp olmasını önermektedir. Sizde bu öneriyi dikkate alarak layout_width ve layout_height değerlerini düzenleyebilirsiniz.

Item Label (Öğe Etiketi)

Accessibility(Erişilebilirlik)’de TalkBack adında bir özellik bulunmaktadır. TalkBack aktif edildiğinde ekrandaki tüm öğeleri sesli bir şekilde okunur. Bu görme yetisi olmayan insanlar için çok önemli bir özelliktir. Bu kullanıcı kitlesini önemsiyorsanız tasarımdaki arayüz elementlerine label(etiket) tanımlamanız gerekir.

TalkBack aktif edebilmek için Settings->Accessibility->Vision tabındaki TalkBack seçeneğini aktif edebilirsiniz. Öğeye etiket eklemek için android:contentDescription özelliğini kullanmalısınız.

<ImageButton
   android:id="@+id/imgBack"
   ...
   android:contentDescription="Before Image" />

1

2

3

4

<ImageButton

android:id="@+id/imgBack"

...

android:contentDescription="Before Image" />

Kotlin ile Google Play In-App Review Kullanımı

Yayınlanan Android uygulamanızın puanlanma ve yorumlarının yapılması indirme sayısına etkisi çok büyüktür. Puanlandırmayı uygulama içinde yaptırılmasıyla müşterinin uygulamada kalmasını sağlayabilirsiniz. Böylelikle kullanıcı deneyimini arttırmış olursunuz.

Bu makalemde, Google Play In-App Review API kullanarak Kotlin dilinde yazılan Android uygulamanın içinde kullanıcının uygulama puanlanma ve yorumlarını yapmasını sağlayan yapıyı örneklendirdim.

Google Play In-App Review API kullanarak Java dilinde yazılan Android uygulamanın makalesine Java ile Google Play In-App Review API linkinden ulaşabilirsiniz.

Örnek projemizin ekran görüntüsü;

In-App Review için Önemli Noktalar

Bu API yalnızca Android 5.0 (API seviyesi 21) veya sonraki sürümlere sahip olan Android cihazlarda çalışır.
Google Play, kullanıcıya ne sıklıkla review dialog arayüzünü gösterilebileceğiniz konusunda zamana bağlı bir kota uygular. Bu kota nedeniyle, launchReviewFlow yöntemini kısa bir süre içinde birden çok kez çağırmak her zaman bir iletişim kutusu görüntülemeyebilir. (örneğin, bir aydan az). Kota hakkında bilgileri quotas linkinden ulaşabilirsiniz.
Google Play bu yapıyı kullanırken tasarımını değiştirmemize olanak sağlamamaktadır.

Kotlin ile geliştireceğimiz projemizde Google Play In-App Review API’yi uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Play Core API kütüphanelerini yüklüyoruz.

implementation 'com.google.android.play:core:1.8.0'
implementation 'com.google.android.play:core-ktx:1.8.1'

1 2	implementation 'com.google.android.play:core:1.8.0' implementation 'com.google.android.play:core-ktx:1.8.1'

2- Backend Kodlama

Kullanıcıdan doğru zamanda puanlandırma istemek için uygulamanızın akışındaki iyi noktaları belirlemeniz (örneğin, kullanıcı bir oyunda bir seviyeyi tamamladığında) çok önemlidir.

İlk önce ReviewManagerFactory sınıfı ile ilgili Activity sınıfında puanlandırma isteğini oluşturmamız gerekir. Sonrasında requestReviewFlow metodundan dönen istediği isSuccessful ile kontrol ettiğimizde sonuç başarılı ise ReviewInfo nesnesi üzerinden launchReviewFlow () yöntemini çağırdık. Bazı nedenlerden dolayı işleyiş başarısız olursa, hatayı log console da göstermesini sağladık.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.google.android.play.core.review.ReviewManagerFactory
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //Button'a tıklandığında puanlandırma sistemini çalıştıran metod çağırdım
        show_rate_app_btn.setOnClickListener {
            inAppReview()
        }
    }
    //Google Play puanlandırma ekranını oluşturan metod
    fun inAppReview() {
        val reviewManager = ReviewManagerFactory.create(this)
        val requestReviewFlow = reviewManager.requestReviewFlow()
        requestReviewFlow.addOnCompleteListener { request ->
            //Widget açılıp, puanlandırma ve yorum yapılabildiği bölüm
            if (request.isSuccessful) {
                val reviewInfo = request.result
                val flow = reviewManager.launchReviewFlow(this, reviewInfo)
                flow.addOnCompleteListener { 
                    //Kullanıcının puanlandırma ekranındaki işlemi bitmiş ve yazılım akışına devam edilecek bölüm
                }
            } else {
                Log.d("Error: ", request.exception.toString())
            }
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.util.Log

import com.google.android.play.core.review.ReviewManagerFactory

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

//Button'a tıklandığında puanlandırma sistemini çalıştıran metod çağırdım

show_rate_app_btn.setOnClickListener {

inAppReview()

}

//Google Play puanlandırma ekranını oluşturan metod

fun inAppReview() {

val reviewManager = ReviewManagerFactory.create(this)

val requestReviewFlow = reviewManager.requestReviewFlow()

requestReviewFlow.addOnCompleteListener { request ->

//Widget açılıp, puanlandırma ve yorum yapılabildiği bölüm

if (request.isSuccessful) {

val reviewInfo = request.result

val flow = reviewManager.launchReviewFlow(this, reviewInfo)

flow.addOnCompleteListener {

//Kullanıcının puanlandırma ekranındaki işlemi bitmiş ve yazılım akışına devam edilecek bölüm

}

} else {

Log.d("Error: ", request.exception.toString())

}

3- Arayüz Kodlama

Activity sınıfımızda kullandığınız arayüz xml sayfasınıza bir button ekledim. Button id değerini de “show_rate_app_btn” yaptım. Üstte kotlin kodlamasında da kullandım.

Kaynak

1-https://developer.android.com/guide/playcore/in-app-review/kotlin-java

2- https://smality.com/google-play-in-app-review-api-kullanimi/

Kotlin ile Android’de Facebook Login

Yazılımcılar, mobil uygulama içinde kullanıcının sosyal medya ağlarıyla (Facebook, Twitter vb.) bağlantı kurmalarını sağlayarak kullanıcıya kolaylıklar sağlamaktadır.

Bu makalede, Kotlin dili ile Android uygulamasına Facebook API’sini entegre ederek, kullanıcının Facebook hesabına giriş ve profil bilgilerini gösterme işlemlerinin nasıl yapılacağını anlatacağım.

Örneğimizin çıktısı:

Bu uygulamayı oluşturabilmek için sırasıyla adımlarımızı anlatmaya başlayalım.

1-Facebook’da App Oluşturma

developers.facebook.com sayfasını açıp, facebook hesabınıza giriş yaptıktan sonra menüdeki My Apps linkine tıklayın. Açılan sayfada resimde belirttiğim butonu seçmelisiniz.

Sonrasında açılan pencerede “Select an app type” sorusuna cevap olarak Tüketici seçeneğini seçip, continue butonuna basın. Sonrasında Şekil-1 resminde belirttiğim şekilde App’i oluşturun.

Şekil-1

App oluşturulduktan sonra aşağıdaki resmi göreceksiniz. Facebook Login bölümünde Setup butonuna basmalısınız.

Ve açılan ekranda Android ikonunu seçmelisiniz. Yeni açılan sayfada yapılması gereken farklı farklı adımlar göreceksiniz. 1. ve 2. adım bölümlerinde hiç birşey yapmadan Next diyerek 3. adıma geliniz.

3.adımda Android projenizin paket ismini ve kullanıcı uygulamanızı başlattığında açılacak activity sınıfını belirtiniz ve kaydedin. (Şekil-2)

Şekil-2

Not: Uygulamanızı henüz Google Play mağazasında yayınlamadıysanız, sistemin mağazada uygulamanızı bulamadığını belirten bir açılır pencere görürsünüz. Use this package name butonunu seçip, devam ediniz.

4.adımda uygulamanızın debug ve release versiyonları için hash oluşturacağız.

Uygulamanızı henüz yayınlamadıysanız, yalnızca Debug Key Hash oluşturmalısınız. Daha sonra uygulamayı Google play’e yükleyecekseniz, bu adıma geri dönüp Release Key Hash oluşturmalısınız.

Debug Key Hash Oluşturma

Bu key hash değerini oluşturabilmek için bilgisayarınızda Openssl olması gerekir. Eğer yoksa download linkindeki siteden indirip, exe yi kurabilirsiniz. Bilgisayarınızdaki JDK-> bin dizinin içindeki keytool dosyasını kullanarak hash oluşturacağız. cmd dosyasını açıp, aşağıdaki resimde belirttiğim gibi kendi JDK yolunuzu kullanarak bin dizinine gidin.

Sonra openssl ve .android dosya yollarını aşağıdaki komut da yerleştirip, çalıştırın.

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

1	keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" \| "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary \| "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

Release Key Hash Oluşturma

Uygulamanızın Apk dosyasını oluştururken ALIAS ve jks uzantılı dosyayı oluştururuz. ALIAS değerini ve jks dosya yolunu aşağıdaki komut da yerleştirip, çalıştırın.

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

1	keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH \| openssl sha1 -binary \| openssl base64

Debug ve Release Key Hash başlıklarındaki bilgiyi uyguladığınızda oluşan key değerini, 4. adımdaki Key Hashes alanına yerleştirip, Save butonuna basın. 5. adım bölümünde hiç bir şey yapmadan Next diyerek 6. adıma geliniz.

6. adımda Facebook App ID ve scheme değerlerinin bulunduğu kodu kopyalayıp, projenizdeki string xml dosyasına ekleyin. Her oluşturulan facebook app de bu değerler farklı olacaktır.AndroidManifest.xml dosyanıza <uses-permission android:name=”android.permission.INTERNET” /> kodunu ekleyerek internet izni verin ve aşağıdaki meta-data ve activity kodunu ekleyin.

<meta-data android:name="com.facebook.sdk.ApplicationId" 
        android:value="@string/facebook_app_id"/>
    
<activity android:name="com.facebook.FacebookActivity"
        android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

1

2

3

4

5

6

android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"

android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation"

android:label="@string/app_name" />

Burada yapacağımız işlemler bitti. Diğer adımları Next butonuna basarak geçebilirsiniz.

2-Facebook Login Button Oluşturma

Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek facebook-login ve Picasso kütüphanelerini yüklüyoruz.

implementation 'com.facebook.android:facebook-login:6.+'
implementation 'com.squareup.picasso:picasso:2.71828'

1 2	implementation 'com.facebook.android:facebook-login:6.+' implementation 'com.squareup.picasso:picasso:2.71828'

Ben Facebook’un hazır butonuna kullanmayı tercih etmedim. Bunun sebebi tasarımcınızın farklı buton tasarımlarını kullanması durumunda, tasarımı kolaylıkla arayüze aktarmayı göstermektir. MainActivity sınıfında ilişkilendireceğimiz arayüz kodları:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#25221D"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/facebook_login_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#1778F2"
        android:drawableStart="@drawable/facebook_icon"
        android:text="Log in with Facebook"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#25221D"

tools:context=".MainActivity">

<Button

android:id="@+id/facebook_login_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:backgroundTint="#1778F2"

android:drawableStart="@drawable/facebook_icon"

android:text="Log in with Facebook"

android:textAllCaps="false"

android:textColor="@android:color/white"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Facebook Login Kontrolü ve Verileri Alma

İlk öncelikle Kotlin’de arayüz elementlerinin id bilgilerini kullanarak, elemente kolayca erişmek için id ‘kotlin-android-extensions’ kodunu projemin app dizinin altındaki build.gradle dosyasının plugins alanının içine eklemeliyiz. Bu durumu projede uyguladım.

MainActivity, Facebook hesabına giriş yapıp yapamadığının kontrolünü yaptıktan sonra kullanıcının bazı verilerine ulaşabilmemize sağlayan sınıfdır. Aldığımız bilgileri tasarımda göstermek için DetailsActivity sınıfına aktardım. Daha detaylı açıklama yorum(comment) tag larında bulunmaktadır.

import android.annotation.SuppressLint
import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.facebook.*
import com.facebook.AccessToken
import com.facebook.login.*
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {

    lateinit var callbackManager: CallbackManager
    var id = ""
    var firstName = ""
    var lastName = ""
    var name = ""
    var email = ""
    var accessToken = ""

    //Bu uygulamayı test etmek için strings.xml dosyasına kendi App ID ve Protocol Scheme eklemeyi unutmayın!
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        callbackManager = CallbackManager.Factory.create()

        facebook_login_btn.setOnClickListener {
            LoginManager.getInstance()
                .logInWithReadPermissions(this, listOf("public_profile", "email"))
        }

        //Facebook hesabına giriş yapıp yapamadığının kontrolü
        LoginManager.getInstance()
            .registerCallback(callbackManager, object : FacebookCallback<LoginResult?> {
                override fun onSuccess(loginResult: LoginResult?) {
                    //Giriş başarılı olduğunda kullanıcı bilgilerini getiren metodu çağırdım
                    getUserProfile(loginResult?.accessToken, loginResult?.accessToken?.userId)
                }
                override fun onCancel() {
                    Toast.makeText(this@MainActivity, "Login Cancelled", Toast.LENGTH_LONG).show()
                }
                override fun onError(exception: FacebookException) {
                    Toast.makeText(this@MainActivity, exception.message, Toast.LENGTH_LONG).show()
                }
            })
    }
    //Facebook kullanıcısının bilgilerini getiren metod
    @SuppressLint("LongLogTag")
    fun getUserProfile(token: AccessToken?, userId: String?) {
        //Kullanıcının hangi bilgilerini getireceğini belirtiyoruz
        val parameters = Bundle()
        parameters.putString(
            "fields",
            "id, first_name, last_name, name, email"
        )
        GraphRequest(token,
            "/$userId/",
            parameters,
            HttpMethod.GET,
            GraphRequest.Callback { response ->
                val jsonObject = response.jsonObject

                // Facebook Access Token
                //Access Token sadece Debug mode'da görebilirsiniz.Kullanıcının access token'nın sızmasını önlemek için yapıldı
                if (BuildConfig.DEBUG) {
                    FacebookSdk.setIsDebugEnabled(true)
                    FacebookSdk.addLoggingBehavior(LoggingBehavior.INCLUDE_ACCESS_TOKENS)
                }
                accessToken = token.toString()      

                // Facebook Name
                if (jsonObject.has("name")) {
                    val facebookName = jsonObject.getString("name")
                    Log.i("Facebook Name: ", facebookName)
                    name = facebookName
                } else {
                    Log.i("Facebook Name: ", "Not exists")
                    name = "Not exists"
                }

                // Facebook Email
                if (jsonObject.has("email")) {
                    val facebookEmail = jsonObject.getString("email")
                    Log.i("Facebook Email: ", facebookEmail)
                    email = facebookEmail
                } else {
                    Log.i("Facebook Email: ", "Not exists")
                    email = "Not exists"
                }

                openDetailsActivity()
            }).executeAsync()
    }
    //Login süresinin dolup dolmadığını görmek için AccessToken'ı kontrol ederek
    // kullanıcının Login durumunu kontrol eden method
    fun isLoggedIn(): Boolean {
        val accessToken = AccessToken.getCurrentAccessToken()
        val isLoggedIn = accessToken != null && !accessToken.isExpired
        return isLoggedIn
    }
    //Kullanıcının logOut(çıkış) yapmasını sağlayan metod
    fun logOutUser() {
        LoginManager.getInstance().logOut()
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        callbackManager.onActivityResult(requestCode, resultCode, data)
        super.onActivityResult(requestCode, resultCode, data)
    }
    //Kullanıcı bilgilerini DetailsActivity sınıfına aktaran metod
    private fun openDetailsActivity() {
        val myIntent = Intent(this, DetailsActivity::class.java)
        myIntent.putExtra("facebook_name", name)
        myIntent.putExtra("facebook_email", email)
        startActivity(myIntent)
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

import android.annotation.SuppressLint

import android.content.Intent

import android.os.Bundle

import android.util.Log

import android.widget.Toast

import androidx.appcompat.app.AppCompatActivity

import com.facebook.*

import com.facebook.AccessToken

import com.facebook.login.*

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

lateinit var callbackManager: CallbackManager

var id = ""

var firstName = ""

var lastName = ""

var name = ""

var email = ""

var accessToken = ""

//Bu uygulamayı test etmek için strings.xml dosyasına kendi App ID ve Protocol Scheme eklemeyi unutmayın!

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

callbackManager = CallbackManager.Factory.create()

facebook_login_btn.setOnClickListener {

LoginManager.getInstance()

.logInWithReadPermissions(this, listOf("public_profile", "email"))

}

//Facebook hesabına giriş yapıp yapamadığının kontrolü

LoginManager.getInstance()

.registerCallback(callbackManager, object : FacebookCallback<LoginResult?> {

override fun onSuccess(loginResult: LoginResult?) {

//Giriş başarılı olduğunda kullanıcı bilgilerini getiren metodu çağırdım

getUserProfile(loginResult?.accessToken, loginResult?.accessToken?.userId)

}

override fun onCancel() {

Toast.makeText(this@MainActivity, "Login Cancelled", Toast.LENGTH_LONG).show()

}

override fun onError(exception: FacebookException) {

Toast.makeText(this@MainActivity, exception.message, Toast.LENGTH_LONG).show()

}

})

}

//Facebook kullanıcısının bilgilerini getiren metod

@SuppressLint("LongLogTag")

fun getUserProfile(token: AccessToken?, userId: String?) {

//Kullanıcının hangi bilgilerini getireceğini belirtiyoruz

val parameters = Bundle()

parameters.putString(

"fields",

"id, first_name, last_name, name, email"

)

GraphRequest(token,

"/$userId/",

parameters,

HttpMethod.GET,

GraphRequest.Callback { response ->

val jsonObject = response.jsonObject

// Facebook Access Token

//Access Token sadece Debug mode'da görebilirsiniz.Kullanıcının access token'nın sızmasını önlemek için yapıldı

if (BuildConfig.DEBUG) {

FacebookSdk.setIsDebugEnabled(true)

FacebookSdk.addLoggingBehavior(LoggingBehavior.INCLUDE_ACCESS_TOKENS)

}

accessToken = token.toString()

// Facebook Name

if (jsonObject.has("name")) {

val facebookName = jsonObject.getString("name")

Log.i("Facebook Name: ", facebookName)

name = facebookName

} else {

Log.i("Facebook Name: ", "Not exists")

name = "Not exists"

}

// Facebook Email

if (jsonObject.has("email")) {

val facebookEmail = jsonObject.getString("email")

Log.i("Facebook Email: ", facebookEmail)

email = facebookEmail

} else {

Log.i("Facebook Email: ", "Not exists")

email = "Not exists"

}

openDetailsActivity()

}).executeAsync()

}

//Login süresinin dolup dolmadığını görmek için AccessToken'ı kontrol ederek

// kullanıcının Login durumunu kontrol eden method

fun isLoggedIn(): Boolean {

val accessToken = AccessToken.getCurrentAccessToken()

val isLoggedIn = accessToken != null && !accessToken.isExpired

return isLoggedIn

}

//Kullanıcının logOut(çıkış) yapmasını sağlayan metod

fun logOutUser() {

LoginManager.getInstance().logOut()

}

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {

callbackManager.onActivityResult(requestCode, resultCode, data)

super.onActivityResult(requestCode, resultCode, data)

}

//Kullanıcı bilgilerini DetailsActivity sınıfına aktaran metod

private fun openDetailsActivity() {

val myIntent = Intent(this, DetailsActivity::class.java)

myIntent.putExtra("facebook_name", name)

myIntent.putExtra("facebook_email", email)

startActivity(myIntent)

}

4- Facebook Kullanıcı Bilgilerini Tasarımda Gösterme

Örnek deki detay sayfasının tasarımını yapabilmek için github linkinde bulunan proje içindeki activity_details xml dosyasını kullanabilirsiniz. DetailsActivity sınıfında da activity_details xml’ini kullandık. DetailsActivity sınıfında ise kullanıcı bilgilerini MainActivity sınıfından alıp, arayüz tasarımına aktardık. Profil resmini de Picasso kütüphanesini kullanarak arayüz de gösterilmesini sağladım.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.squareup.picasso.Picasso
import kotlinx.android.synthetic.main.activity_details.*
import com.facebook.Profile;
class DetailsActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_details)
        //facebook name ve email bilgilerini MainActivity'den aldım.
        val facebookName = intent.getStringExtra("facebook_name")
        val facebookEmail = intent.getStringExtra("facebook_email")
        //Bilgileri arayüze aktardım
        facebook_name_textview.text = facebookName
        facebook_email_textview.text = facebookEmail

        //Facebook kullanıcısının profil fotoğrafını alıp,
        //Picasso sınıfı ile arayüzde gösterdim
        Picasso.get().load(Profile.getCurrentProfile().getProfilePictureUri(400, 400)).into(profil_pic);
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.squareup.picasso.Picasso

import kotlinx.android.synthetic.main.activity_details.*

import com.facebook.Profile;

class DetailsActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_details)

//facebook name ve email bilgilerini MainActivity'den aldım.

val facebookName = intent.getStringExtra("facebook_name")

val facebookEmail = intent.getStringExtra("facebook_email")

//Bilgileri arayüze aktardım

facebook_name_textview.text = facebookName

facebook_email_textview.text = facebookEmail

//Facebook kullanıcısının profil fotoğrafını alıp,

//Picasso sınıfı ile arayüzde gösterdim

Picasso.get().load(Profile.getCurrentProfile().getProfilePictureUri(400, 400)).into(profil_pic);

}

Projenin tüm dosya ve kodlarına github linkinden ulaşabilirsiniz.

Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius

UI, bizim müşteriye göstereceğimiz vitrinimizdir. Bu yüzden yazılımınızın basit, etkili ve kullanıcı dostu bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.

Bu makale, Android tasarımlarında son zamanlarda trend olan arayüz elementlerinin köşelerini yuvarlatma işlemini en kolay ve iyi nasıl yapabileceğinizi anlatacağım.

Aşağıdaki resimde kullanılan köşeleri yuvarlatılmış öğeleri oluşturmayı örneklendireceğim.

Anlatacağım yöntemler:

CardView ile köşeleri yuvarlatma
Shape xml yapısı ile köşeleri yuvarlatma

1-CardView ile köşeleri yuvarlatma

CardView bir arayüz elementidir. CardView’in cardCornerRadius adında bir özelliği bulunmaktadır. Bu özelliği ekleyip, sonrasında CardView’in içine koyduğunuz arayüz elementlerinin kapsadığı alanın köşeleri yuvarlatılmış olacaktır.

Peki tüm arayüz elementlerinde bu işlevi eklemek için CardView kullanmak mantıklı mıdır? Eğer tek bir arayüz elementinin köşelerini yuvarlatacaksanız CardView tercih edilmez. Çünkü Shape xml yapısını kullanarak bu işi daha sade ve az kod ile yapabiliriz.:) CardView yöntemi, içeresinde birden fazla arayüz elementlerinin olduğu kapsama alanının köşelerini yuvarlatacağınızda daha çok tercih edilir. (Şekil-1)

Şekil-1

CardView Örneği

İlk örneğimizin görünümü üstteki Şekil-1 deki gibi olacak.:) Bu örneği tamamladıktan sonra tasarıma yeni örnekler ekleyeceğim.

İlk önce bu örnekte kullandığım resimleri https://smality.com/resimler.zip linkinden indiriniz. Sonrasında zip klasörünün içindeki tüm dosyaları alıp, projenizde app->src->main>res yolunu takip ederek, res dizinin içine ekleyin.

Örnek resimde bulunan Vegetables alanını tek başına nasıl yapacağımızı görelim.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#F6F4F4">
    <!--cardCornerRadius haricinde kullanılan özellikler sadece CardView'i hızalamak için kullanıldı -->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        app:cardCornerRadius="15dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints">
        <!-- ConstraintLayout'u sadece arayüz elementlerini kolay hızalamak için kullandım.-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/image2" />
            <TextView
                android:id="@+id/vege"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="10dp"
                android:text="Vegetables"
                android:textColor="#000000"
                android:textSize="20sp"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView2" />
            <TextView
                android:id="@+id/number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="18dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="15dp"
                android:text="(43)"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/vege" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<?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"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:tools="http://schemas.android.com/tools"

android:background="#F6F4F4">

<androidx.cardview.widget.CardView

android:id="@+id/cardView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_marginTop="40dp"

app:cardCornerRadius="15dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

tools:ignore="MissingConstraints">

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/imageView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:srcCompat="@drawable/image2" />

<TextView

android:id="@+id/vege"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="18dp"

android:layout_marginTop="10dp"

android:text="Vegetables"

android:textColor="#000000"

android:textSize="20sp"

android:textStyle="bold"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/imageView2" />

<TextView

android:id="@+id/number"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="18dp"

android:layout_marginTop="5dp"

android:layout_marginBottom="15dp"

android:text="(43)"

android:textSize="12sp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/vege" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

2-Shape xml yapısı ile köşeleri yuvarlatma

EditText, Button, TextView vb. arayüz elementlerinin köşelerini yuvarlatma işlemini daha az kod ile oluşturmak istiyorsanız, shape xml yapısını kullanmalısınız. Örneğin, sayfa tasarımınızda birden fazla köşeleri yuvarlanmış EditText var olduğunu düşünelim. Bu görseli CardView kullanarak kodlarsanız, her bir EditText için ayrı bir CardView oluşturmanız gerekir. Eğer bu tasarımda shape xml yapısını kullanarak kodlarsanız, 1 tane shape xml dosyası oluşturup, bu dosyayı her bir EditText’in background özelliğinde çağırarak 1 satır kodla tüm EditText’lerin köşelerini aynı ölçüde yuvarlarsınız.

Shape xml Örneği

Örneğimizin kodlamasını bitirdiğimizde aşağıdaki gibi bir görüntü elde edeceğiz.

İlk önce projenizde app->src->main>res yolunu takip edip res dizini içindeki drawable dizinine sağ tıklayınız. Açılan pencerede New->Drawable Resource File seçerek drawable xml dosyasını oluşturun ve içine aşağıdaki kod yerleştirin.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <!--Border rengini tanımlama-->
    <stroke android:width="1dp" android:color="#e2e0e3" />
    <!--Background(arkaplan) rengini tanımlama-->
    <solid android:color="#ffffff" />
</shape>

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

</shape>

Kod açıklaması

Üstteki kodda corners tag’i arayüz elementinin köşelerinde değişiklik sağlar. Corners tag’inin radius özelliği, belirttiğiniz dp değeri kadar köşeleri yuvarlaklaştırır.

Şimdi tek yapmamız gereken işlem, layout xml’deki EditText’in background özelliğine oluşturduğumuz drawable xml’in yolunu eklemektir. (@drawable/rounded_edt)

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F6F4F4">
    <!--drawableLeft ve drawablePadding özellikleri search iconunu eklemek için kullanıldı-->
    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="40dp"
        android:layout_marginEnd="20dp"
        android:background="@drawable/rounded_edt"
        android:drawableLeft="?android:attr/actionModeWebSearchDrawable"
        android:drawablePadding="15dp"
        android:ems="10"
        android:hint="Search"
        android:inputType="textPersonName"
        android:padding="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?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"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#F6F4F4">

<EditText

android:id="@+id/editTextTextPersonName"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_marginTop="40dp"

android:layout_marginEnd="20dp"

android:background="@drawable/rounded_edt"

android:drawableLeft="?android:attr/actionModeWebSearchDrawable"

android:drawablePadding="15dp"

android:ems="10"

android:hint="Search"

android:inputType="textPersonName"

android:padding="10dp"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Anlattıklarımın hepsini bir projede birleştirdim ve aşağıdaki görünümü veren projenin kodlarına github linkinden ulaşabilirsiniz.

Kotlin Playground Kullanımı ve Avantajları

Yazılım geliştirme süreçlerinde kullandığımız kod derleyici programlar, eğer bilgisayarınızın donanımı güçlü değilse, yazılımcıyı çok fazla uğraştırabilir. Bu durum ciddi enerji ve zaman kaybına sebep olur. Bazı tool’lar bizi bu gibi sıkıntılardan kurtarıp, kod geliştirmeyi kolaylaştırmıştır.

Bu makalede Kotlin kodunuzu JVM, JS, CANVAS ve JUNIT yapılarını kullanarak çalıştırmanıza ve başkalarıyla paylaşmanıza kolaylık sağlayan online bir kod düzenleyicisi Kotlin Playground tool’u anlatacağım.

Kotlin Playground tool nedir? Ne işe yarar?

Kotlin Playground, kod derleyicisi veya IDE gibi programlar kullanmadan bir web sitesi üzerinden Kotlin kodlarınızı oluşturmanıza, çalıştırmanıza ve başkalarıyla paylaşmanıza olanak tanıyan yardımcı bir araçtır.

Kodlar ve test fikirleriyle denemeler yapmanıza izin verir. Bir programlama dilinde yeniyseniz, derleyici veya IDE gibi araçlar yüklemenize gerek kalmadan size hızlı bir şekilde yardımcı olur.

Bu makalede Kotlin Playground kullanarak şunları öğreneceğiz.

Playground, kodlarınızı çalıştırdığında JVM, JS, CANVAS ve JUNIT yapılarıyla destelediğini
Kodlarınızı kolaylıkla başkalarıyla paylaşmayı
Çalıştırılabilir kodu bir web sitesine yerleştirmenize olanak tanır.

Kotlin Playground tool kullanımı

Bu aracı kullanabilmek için https://play.kotlinlang.org/ linkini açmanız gerekir.

Kodu oluşturmak ve çalıştırmak için sağda bulunan RUN ikonuna tıklayın.

Sonuç şu şekilde gözükecektir:

Ayarları Düzenleme

Kotlin Playground aracının farklı farklı özelliklerini kullanmak istiyorsanız, ayarlardaki alanları değiştirmeniz gerekir. Ayarlar bölümüne sağdaki ikonundan ulaşabilirsiniz. Ayarlar ekranındaki alanlar;

Kotlin Version: Programınızı oluşturmak için sürümü seçeceğiniz alan
Program arguments: main fonksiyonunun parametresinden gelecek değeri girdiğimiz alan
Target Platform: Yazdığınız kodun kullanacağı JVM, JS, CANVAS veya JUNIT yapılarından birini seçme bölümüdür.

Playground ‘da JVM yapısının kullanımı

Kotlin, farklı platformlarda çalışabilecek sihirli bir yeteneğe sahiptir. Bu bölümde, Kotlin kodunuz için target platform alanını değiştirmenin ne anlama geldiğini öğreneceksiniz. Ayarlar bölümünü açalım.

JVM target platform’u varsayılan olarak seçilidir. “Hello, world” örneğindeki gibi kodları JVM programını kullanarak çalıştırır.

Playground ‘da JS yapısının kullanımı

JavaScript’i Kotlin dilinde kullanabiliriz. Kotlin / JS, Node.js gibi sunucu tarafında web geliştirmeye ve jQuery ve React gibi istemci tarafında web geliştirmeye olanak tanır. Bu tür projelerde, Kotlin ve JavaScript’in birlikte çalışabilirliği ile ilgili birkaç şeyi denemek isterseniz, Kotlin Playground yardımcı olabilir.

Bu bölümde, JavaScript’i Kotlin’den çalıştırabilmek için target platform’u JS olarak değiştirmelisiniz.

Kodunuzu aşağıdaki gibi düzenleyin.

fun main(args: Array<String>) {
  console.log("Hello " + args.joinToString())
    
  js("alert(\"This is an alert\")")
}

1

2

3

4

5

fun main(args: Array<String>) {

console.log("Hello " + args.joinToString())

js("alert(\"This is an alert\")")

}

Bu kodu çalıştırdığınızda ikinci satırdaki kod; tarayıcınızda alert pencerisi açacaktır ve tarayıcınızda aşağıdaki gibi bir görüntü göreceksiniz.

JS console açınız. Eğer Windows işletim sistemi kullanıyorsanız, F12 tuşuna basarak console sekmesini açabilirsiniz. console.log metodu sonucunda aşağıdaki görüntüyü elde edersiniz.

Playground ‘da CANVAS yapısının kullanımı

HTML5, JavaScript’i kullanarak grafikler çizen Canvas adlı yeni bir öğeyi tanıttı. Basit statik grafikler ve animasyonlar oluşturmanıza ve hatta gerçek zamanlı video oluşturmanıza olanak tanır. Canvas ile etkileşim için Kotlin’i kullanabilirsiniz.

Playground, bir Canvas’ta çizim yapmanıza izin verir. Bu işlemi yapabilmek için ayarlardan target platformu CANVAS seçin ve Program arguments alanını silin.

Kodunuzu aşağıdaki kodla değiştirin.

import org.w3c.dom.CanvasRenderingContext2D
import org.w3c.dom.HTMLCanvasElement
import kotlin.browser.document
import kotlin.browser.window

// HTML Canvas başlatıp, yükseklik ve genilkli değerlerini body e ekledik
val canvas = initalizeCanvas()
fun initalizeCanvas(): HTMLCanvasElement {
  val canvas = document.createElement("canvas") as HTMLCanvasElement
  val context = canvas.getContext("2d") as CanvasRenderingContext2D
  context.canvas.width  = window.innerWidth.toInt();
  context.canvas.height = window.innerHeight.toInt();
  document.body!!.appendChild(canvas)
  return canvas
}

val context: CanvasRenderingContext2D
  get() {
    return canvas.getContext("2d") as CanvasRenderingContext2D
  }
    
fun main() {
  //Yazı tipi ve boyutunu belirleyip, HTML Canvas'a Hello Canvas yazdık
  context.font = "30px Arial";
  context.fillText("Hello Canvas", 10.0, 50.0);
  
  //HTML Canvas'a kırmızı bir dikdörtgen çizdik
  context.fillStyle = "#FF0000";
  context.fillRect(200.0, 15.0, 50.0, 50.0);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

import org.w3c.dom.CanvasRenderingContext2D

import org.w3c.dom.HTMLCanvasElement

import kotlin.browser.document

import kotlin.browser.window

// HTML Canvas başlatıp, yükseklik ve genilkli değerlerini body e ekledik

val canvas = initalizeCanvas()

fun initalizeCanvas(): HTMLCanvasElement {

val canvas = document.createElement("canvas") as HTMLCanvasElement

val context = canvas.getContext("2d") as CanvasRenderingContext2D

context.canvas.width = window.innerWidth.toInt();

context.canvas.height = window.innerHeight.toInt();

document.body!!.appendChild(canvas)

return canvas

}

val context: CanvasRenderingContext2D

get() {

return canvas.getContext("2d") as CanvasRenderingContext2D

}

fun main() {

//Yazı tipi ve boyutunu belirleyip, HTML Canvas'a Hello Canvas yazdık

context.font = "30px Arial";

context.fillText("Hello Canvas", 10.0, 50.0);

//HTML Canvas'a kırmızı bir dikdörtgen çizdik

context.fillStyle = "#FF0000";

context.fillRect(200.0, 15.0, 50.0, 50.0);

}

Bu kodu çalıştırdığımızda aşağıdaki gibi bir görüntü elde ederiz.

HTML Canvas’ı Kotlin dilinde nasıl kullanabileceğimizi örneklendirdim. HTML Canvas hakkında daha detaylı bilgiyi bu dokümandan elde edebilirsiniz.

Playground ‘da JUNIT yapısının kullanımı

Kotlin Playground tool’da Kotlin testleri yazma, çalıştırma ve hangilerinin başarılı olup olmadığını görme seçeneğiniz de vardır. Bunu yapabilmek için ayarlardan target platformu JUNIT seçmeniz yeterlidir.

En son yazdığınız kodları silip, aşağıdaki kodu yazınız.

data class Family(val name: String, val people: Array<Person>)
data class Person(val lastname: String) {
  operator fun plus(person: Person): Family {
    return Family(
      lastname + " " + person.lastname, 
      arrayOf(this, this)
    )
  }
}

1

2

3

4

5

6

7

8

9

data class Family(val name: String, val people: Array<Person>)

data class Person(val lastname: String) {

operator fun plus(person: Person): Family {

return Family(

lastname + " " + person.lastname,

arrayOf(this, this)

)

}

Üstteki kodu test edebilmek için, sayfanın en üst bölümüne aşağıdaki kodu ekleyin.

import org.junit.Assert
import org.junit.Test

class PersonTest {
  // 1
  @Test
  fun `Person + Person should create Family containing each Person`() {
    val personOne = Person("Cortazzo")
    val personTwo = Person("Sproviero")
        
    val family = personOne + personTwo
        
    Assert.assertEquals(arrayOf(personOne, personTwo), family.people)
  }

  // 2
  @Test
  fun `Person + Person should create Family concatenating lastnames`() {
    val personOne = Person("Cortazzo")
    val personTwo = Person("Sproviero")
        
    val family = personOne + personTwo
        
    Assert.assertEquals("Cortazzo Sproviero", family.name)
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

import org.junit.Assert

import org.junit.Test

class PersonTest {

// 1

@Test

fun `Person + Person should create Family containing each Person`() {

val personOne = Person("Cortazzo")

val personTwo = Person("Sproviero")

val family = personOne + personTwo

Assert.assertEquals(arrayOf(personOne, personTwo), family.people)

}

// 2

@Test

fun `Person + Person should create Family concatenating lastnames`() {

val personOne = Person("Cortazzo")

val personTwo = Person("Sproviero")

val family = personOne + personTwo

Assert.assertEquals("Cortazzo Sproviero", family.name)

}

Test kodumuz ne gibi işler yapıyor:

1. yorum tag bölümündeki test: Family sınıfının her bir Person nesnesini içerip içermediğini kontrol eder.

2. yorum tag bölümündeki test: Person sınıfının lastname değerlerini birleştirip, Family’deki name parametresiyle aynı olup olmadığını kontrol eder.

Kodun çıktısı:

plus fonksiyonunu incelerseniz, problemin diğer person’u eklemek yerine kendisini diziye iki kez eklemesi olduğunu göreceksiniz. İşlevi aşağıdaki kodla değiştirerek düzeltebilirsiniz.

operator fun plus(person: Person): Family {
  return Family(
    lastname + " " + person.lastname, 
    arrayOf(this, person)
  )
}

1

2

3

4

5

6

operator fun plus(person: Person): Family {

return Family(

lastname + " " + person.lastname,

arrayOf(this, person)

)

}

Playground ‘daki Kodların Paylaşımı

Kotlin Playground’ da yazmaya devam ettiğiniz kodları, herhangi bir program kullanmadan diğer insanlarla paylaşıp, kod takibi yapmalarını sağlayabilirsiniz. Bu işlemi yapabilmek için sağdaki ikonuna tıklamalısınız. Sonrasında aşağıdaki ekran açılacaktır.

Bu resimde kırmızı ile belirtiğim ikonu tıklayıp, kodun bulunduğu linki kopyalayıp, paylaşmak istediğiniz kişiye gönderebilirsiniz.

JS Script ile Playground ‘daki Kodları Siteye Ekleme

Web sitenizde Playground’ da yazdığınız Kotlin kodunu çalıştırılabilir halini gösterme imkanınız bulunmaktadır. HTML’ye bir JS komut dosyası ekleyerek bu işlemi yapabilirsiniz. Dilerseniz web site testinizi https://codepen.io/pen/ gibi çalışma alanında yapabilirsiniz. Bir örnek yapalım.

HTML alanına aşağıda anlattığım gibi kodları ekleyelim.

1- İlk önce Playground scriptini ekleyelim.

<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>

1	<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>

2- Scriptin hemen altına, code tag leri arasına Kotlin kodumuzu ekleyelim.

<code>
fun main() {
  println("Hello Embedded World!!!")
}  
</code>

1

2

3

4

5

<code>

fun main() {

println("Hello Embedded World!!!")

}

</code>

Bu işlemin çıktısı aşağıdaki resmin sağındaki gibi olacaktır.

Dilerseniz Play butonuna tıklayarak, sitenizde Kotlin kod çıktısını görebilirsiniz.

Kotlin Playground hakkında daha detaylı bir bilgi edinmek isterseniz, dokümantasyon sayfasını inceleyebilirsiniz.

Kaynak

1- https://www.raywenderlich.com/16929465-kotlin-playground-getting-started#toc-anchor-007

Android’de Carousel Efekti ile Image Slider Yapımı

Yazılım projelerinde, kullanıcıların istek ve beklentilerini öngörerek bunları kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak çok önemlidir. Bu yüzden, tasarımda kullanıcı deneyimini arttıran elementler kullanmanın önemi büyüktür.

Bu makalemde Android Viewpager2 arayüz widget’ına Carousel efektini ekleyerek image slider yapmayı örnekleyeceğim.

ViewPager yapısından ViewPager2’ye geçişin avantajları ve bir Android uygulamasında ViewPager2 kullanımı konularıyla ilgili “Android ViewPager2 Kullanımı” makalemden bilgi edinebilirsiniz.

Carousel efekti ile resimleri slide olarak görüntüleyen örneğin ekran görüntüsü;

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

1-Gerekli Kütüphanelerin Eklenmesi

ViewPager2 widget, android.support kütüphanesinde bulunmamaktadır. ViewPager2 kullanabilmek için AndroidX kütüphanesine geçmeniz gerekir.

Dilerseniz AndroidX Kütüphanesine Geciş adlı makalemi okuyarak, var olan projelerinizi AndroidX yapısına kolaylıkla geçişini sağlayabilirsiniz.

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Viewpager2 kütüphanesini yüklüyoruz.

implementation "androidx.viewpager2:viewpager2:1.0.0"

1	implementation "androidx.viewpager2:viewpager2:1.0.0"

2-Java kodlama ile işlevsellik oluşturma

Örneğimizi oluşturabilmek için 2 tane Java sınıfı kullandım. İlk önce MainActivity sınıfında, ViewPager2 widget’ının hangi yönde slide işlemini yapacağını tanımladık. Sonrasında MyAdapter sınıfındaki resim nesnelerini ViewPager2’ye yükleyebilmek için setAdapter metodunu kullandık.

ViewPager2 nesnesinin setPageTransformer metodundan faydalanarak, ViewPager2 widget’da bulunacak resimlere carousel efekti eklendi. Daha detaylı açıklama kodlar arasındaki açıklamalarda bulunmaktadır.

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.ViewCompat;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    MyAdapter MyAdapter;

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

        myViewPager2 = findViewById(R.id.viewpager);
        MyAdapter = new MyAdapter(this);

        //ViewPager2 widget'ın yatay pozisyonda gösterilmesini sağlıyoruz
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
        //MyAdapter sınıfındaki resim nesnelerini ViewPager2'ye yükleniyor
        myViewPager2.setAdapter(MyAdapter);
        myViewPager2.setOffscreenPageLimit(3);

        float pageMargin= getResources().getDimensionPixelOffset(R.dimen.pageMargin);
        float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);

        //ViewPager2 widget'da bulunan resimlerin carousel efekti ile gösterimi
        myViewPager2.setPageTransformer(new ViewPager2.PageTransformer() {
            @Override
            public void transformPage(@NonNull View page, float position) {
            //Belirli margin değerleri ile ViewPager2 widget'ın sayfadaki
            //konumu hesaplanıp X ve Y ordinatlarında kullanarak efekt sağlanıyor.
                float myOffset = position * -(2 * pageOffset + pageMargin);
                if (myViewPager2.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
                    if (ViewCompat.getLayoutDirection(myViewPager2) == ViewCompat.LAYOUT_DIRECTION_RTL) {
                        page.setTranslationX(-myOffset);
                    } else {
                        page.setTranslationX(myOffset);
                    }
                } else {
                    page.setTranslationY(myOffset);
                }
            }
        });
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.view.ViewCompat;

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import android.view.View;

public class MainActivity extends AppCompatActivity {

ViewPager2 myViewPager2;

MyAdapter MyAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_java);

myViewPager2 = findViewById(R.id.viewpager);

MyAdapter = new MyAdapter(this);

//ViewPager2 widget'ın yatay pozisyonda gösterilmesini sağlıyoruz

myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

//MyAdapter sınıfındaki resim nesnelerini ViewPager2'ye yükleniyor

myViewPager2.setAdapter(MyAdapter);

myViewPager2.setOffscreenPageLimit(3);

float pageMargin= getResources().getDimensionPixelOffset(R.dimen.pageMargin);

float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);

//ViewPager2 widget'da bulunan resimlerin carousel efekti ile gösterimi

myViewPager2.setPageTransformer(new ViewPager2.PageTransformer() {

@Override

public void transformPage(@NonNull View page, float position) {

//Belirli margin değerleri ile ViewPager2 widget'ın sayfadaki

//konumu hesaplanıp X ve Y ordinatlarında kullanarak efekt sağlanıyor.

float myOffset = position * -(2 * pageOffset + pageMargin);

if (myViewPager2.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {

if (ViewCompat.getLayoutDirection(myViewPager2) == ViewCompat.LAYOUT_DIRECTION_RTL) {

page.setTranslationX(-myOffset);

} else {

page.setTranslationX(myOffset);

}

} else {

page.setTranslationY(myOffset);

}

});

}

MyAdapter.java, ViewPager2 widget’ının içinde gösterilecek, resimlerimizi eklediğimiz sınıftır. ImageView nesnenini tanımlayıp, drawable dosyasındaki resimlerimizi atadık. Daha detaylı açıklama kodlar arasındaki açıklamalarda bulunmaktadır.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Context context;
    public MyAdapter(Context context) {
        this.context = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    //Kullanılacak arayüz xml dosyasını çağırıyoruz
        View view = LayoutInflater.from(context).inflate(R.layout.row_item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    //ViewPager2 widget'da gösterilecek resimlerimizi ImageView nesneni yüklüyorüz.
        int images[]={R.drawable.nature1,R.drawable.nature2,R.drawable.nature3,R.drawable.nature4};
        holder.imgBanner.setImageResource(images[position]);

    }

    @Override
    public int getItemCount() {
        return 4;
    }
    //ViewPager2 widget içinde kullanacağımız ImageView nesneni tanımlıyoruz
    public class MyViewHolder extends RecyclerView.ViewHolder {

        ImageView imgBanner;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            imgBanner = itemView.findViewById(R.id.imgBanner);
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

private Context context;

public MyAdapter(Context context) {

this.context = context;

}

@NonNull

@Override

public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

//Kullanılacak arayüz xml dosyasını çağırıyoruz

View view = LayoutInflater.from(context).inflate(R.layout.row_item, parent, false);

return new MyViewHolder(view);

}

@Override

public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

//ViewPager2 widget'da gösterilecek resimlerimizi ImageView nesneni yüklüyorüz.

int images[]={R.drawable.nature1,R.drawable.nature2,R.drawable.nature3,R.drawable.nature4};

holder.imgBanner.setImageResource(images[position]);

}

@Override

public int getItemCount() {

return 4;

}

//ViewPager2 widget içinde kullanacağımız ImageView nesneni tanımlıyoruz

public class MyViewHolder extends RecyclerView.ViewHolder {

ImageView imgBanner;

public MyViewHolder(@NonNull View itemView) {

super(itemView);

imgBanner = itemView.findViewById(R.id.imgBanner);

}

3-Arayüz Kodlaması

Örneğimizdeki görüntüyü elde etmek içim, 2 tane xml dosyasında kodlama yapmamız gerekmektedir.

activity_main xml kodlarımızda ViewPager2 nesnesini ekledik. MainActivity sınıfında kullandık.

<?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:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
        android:layout_marginTop="100dp"
            android:clipToPadding="false"
            android:clipChildren="false"
            android:layout_width="match_parent"
            android:layout_height="250dp"/>

</LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<?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:orientation="vertical">

<androidx.viewpager2.widget.ViewPager2

android:id="@+id/viewpager"

android:layout_marginTop="100dp"

android:clipToPadding="false"

android:clipChildren="false"

android:layout_width="match_parent"

android:layout_height="250dp"/>

</LinearLayout>

row_item xml kodlarımızda ImageView nesnesini ekledik. MyAdapter sınıfında kullandık.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_marginLeft="@dimen/pageMarginAndOffset"
             android:layout_marginRight="@dimen/pageMarginAndOffset"
             android:layout_height="match_parent"
             android:orientation="vertical">
    <ImageView
            android:id="@+id/imgBanner"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:contentDescription="@string/app_name"/>
</RelativeLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_marginLeft="@dimen/pageMarginAndOffset"

android:layout_marginRight="@dimen/pageMarginAndOffset"

android:layout_height="match_parent"

android:orientation="vertical">

<ImageView

android:id="@+id/imgBanner"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@string/app_name"/>

</RelativeLayout>

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

Material Motion Part 2: Container Transform

Yazdığınız uygulamanın kullanıcı sayısının artmasını sağlayan en önemli konulardan biri, kullanıcı deneyimi yüksek ve dikkat çekici tasarıma sahip olmasıdır.

Android uygulama da UI öğeleri arasındaki geçişleri farklı animasyon görünümleri ile sağlayan çeşitli Material motion özellikleri bulunmaktadır. Bu özelliklerden biri olan Shared Axis hakkındaki örnek projeyi “Material Motion Part 1: Shared Axis” adlı makalemden ulaşabilirsiniz.

Bu makale serisinde, Android uygulamada iki farklı arayüz elementinin birbirleri arasında animasyonlu bir şekilde geçişini sağlayan Material motion Container Transform özelliğini örnekleyeceğim.

Container Transform

Bir arayüz elementinin başka bir arayüz elementine animasyonlu bir şekilde geçişini sağlayan özelliktir. Böylelikle kullanıcının mobil tasarım öğeleriyle etkileşime girmesini sağlamış oluruz. Bu durum projenin uzun vadede kullana bilirliğini artırır.

Makalemizde anlatacağım örnek uygulamanın görüntüsü;

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

Bu örneği uygulayabilmek için işlemleri adım adım yapalım.

1-Gerekli Kütüphanelerin Yüklenmesi

Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek navigation ve material kütüphanelerini yüklüyoruz.

implementation('androidx.navigation:navigation-fragment-ktx:2.3.1')
implementation('androidx.navigation:navigation-ui-ktx:2.3.1')
implementation('com.google.android.material:material:1.3.0-alpha03')

1

2

3

implementation('androidx.navigation:navigation-fragment-ktx:2.3.1')

implementation('androidx.navigation:navigation-ui-ktx:2.3.1')

implementation('com.google.android.material:material:1.3.0-alpha03')

2- Kotlin ve tasarım kodları

İlk önce Note sınıfından bahsetmek istiyorum. Tüm not başlıklarını, içeriklerini ve not kutularının renklerini atadığım ve bu değerleri bir listOf array yapısında barındırdığım sınıfdır.

import androidx.annotation.ColorRes
data class Note(
    val id: Int,
    val title: String,
    val body: String,
    @ColorRes val colorRes: Int
)

val note1 = Note(
    id = 1,
    title = "ToDo 1",
    body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus scelerisque placerat nisl, nec semper felis ullamcorper vel. Nullam egestas ante nec tortor egestas mattis. Duis ut diam nec nibh sodales commodo at at diam. Nunc tempor eu lectus ut feugiat. Etiam eget ullamcorper est, at scelerisque lectus. Aliquam erat volutpat. Maecenas est urna, vestibulum non eros non, dignissim feugiat mi. Cras sit amet ex hendrerit, accumsan dolor in, bibendum erat. Maecenas ullamcorper ut risus eget congue. Vestibulum aliquam ipsum ut turpis efficitur, vel malesuada neque aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean egestas justo id rutrum blandit. Vestibulum id orci libero. Aliquam pharetra sed mauris ac vehicula.",
    colorRes = R.color.blue300
)

val note2 = Note(
    id = 2,
    title = "ToDo 2",
    body = "Fusce hendrerit enim in eros congue, sed pharetra libero tempus. Integer accumsan euismod nibh non vestibulum. Curabitur finibus imperdiet nunc vel ornare. Ut maximus fringilla sapien in viverra. Aenean a nulla feugiat, hendrerit risus et, congue erat. Ut venenatis lorem sit amet volutpat sollicitudin. Donec ac lorem auctor sem mattis faucibus non ac ante. Phasellus id sem non ante bibendum porta non in tellus. Etiam pellentesque porta luctus.",
    colorRes = R.color.amber300
)

val note3 = Note(
    id = 3,
    title = "ToDo 3",
    body = "Praesent interdum dictum magna quis pretium. Suspendisse at cursus ante, id rutrum nunc. Nullam at lacinia nibh, nec gravida lectus. Quisque maximus vulputate leo, et sollicitudin turpis luctus pellentesque. Nullam vehicula sagittis magna, consectetur congue neque ullamcorper vel. Praesent sed vulputate nunc. Ut ligula lorem, lobortis tristique interdum at, mollis a dolor. Ut sed fringilla urna, id suscipit justo. Praesent ut tortor pharetra, laoreet metus non, iaculis mi. Duis vel lacus fermentum, porta neque id, ultricies arcu. Nunc interdum, est ac sodales tristique, elit urna feugiat dui, quis venenatis ante lorem ullamcorper mi. Nulla id condimentum lorem. Nunc ac scelerisque felis. Nam semper, mi et ultrices rutrum, neque odio molestie tortor, ac iaculis ante arcu eu elit. Phasellus imperdiet tortor quis aliquam ornare.",
    colorRes = R.color.green300
)

val notes = listOf(note1, note2, note3)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

import androidx.annotation.ColorRes

data class Note(

val id: Int,

val title: String,

val body: String,

@ColorRes val colorRes: Int

)

val note1 = Note(

id = 1,

title = "ToDo 1",

body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus scelerisque placerat nisl, nec semper felis ullamcorper vel. Nullam egestas ante nec tortor egestas mattis. Duis ut diam nec nibh sodales commodo at at diam. Nunc tempor eu lectus ut feugiat. Etiam eget ullamcorper est, at scelerisque lectus. Aliquam erat volutpat. Maecenas est urna, vestibulum non eros non, dignissim feugiat mi. Cras sit amet ex hendrerit, accumsan dolor in, bibendum erat. Maecenas ullamcorper ut risus eget congue. Vestibulum aliquam ipsum ut turpis efficitur, vel malesuada neque aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean egestas justo id rutrum blandit. Vestibulum id orci libero. Aliquam pharetra sed mauris ac vehicula.",

colorRes = R.color.blue300

)

val note2 = Note(

id = 2,

title = "ToDo 2",

body = "Fusce hendrerit enim in eros congue, sed pharetra libero tempus. Integer accumsan euismod nibh non vestibulum. Curabitur finibus imperdiet nunc vel ornare. Ut maximus fringilla sapien in viverra. Aenean a nulla feugiat, hendrerit risus et, congue erat. Ut venenatis lorem sit amet volutpat sollicitudin. Donec ac lorem auctor sem mattis faucibus non ac ante. Phasellus id sem non ante bibendum porta non in tellus. Etiam pellentesque porta luctus.",

colorRes = R.color.amber300

)

val note3 = Note(

id = 3,

title = "ToDo 3",

body = "Praesent interdum dictum magna quis pretium. Suspendisse at cursus ante, id rutrum nunc. Nullam at lacinia nibh, nec gravida lectus. Quisque maximus vulputate leo, et sollicitudin turpis luctus pellentesque. Nullam vehicula sagittis magna, consectetur congue neque ullamcorper vel. Praesent sed vulputate nunc. Ut ligula lorem, lobortis tristique interdum at, mollis a dolor. Ut sed fringilla urna, id suscipit justo. Praesent ut tortor pharetra, laoreet metus non, iaculis mi. Duis vel lacus fermentum, porta neque id, ultricies arcu. Nunc interdum, est ac sodales tristique, elit urna feugiat dui, quis venenatis ante lorem ullamcorper mi. Nulla id condimentum lorem. Nunc ac scelerisque felis. Nam semper, mi et ultrices rutrum, neque odio molestie tortor, ac iaculis ante arcu eu elit. Phasellus imperdiet tortor quis aliquam ornare.",

colorRes = R.color.green300

)

val notes = listOf(note1, note2, note3)

MainActivity sınıfımızda ise, notların grid şeklinde gösterilmesi sağlayan ve not kutucuklarına tıklandığı anda yapılan geçiş animasyonunu tetiklemesini yaptık. Detaylı açıklamalar kodlar arasında bulunmaktadır.

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import androidx.core.app.ActivityOptionsCompat
import androidx.recyclerview.widget.GridLayoutManager
import com.google.android.material.card.MaterialCardView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setRecyclerView()
    }
    private fun setRecyclerView() {
        //Note data class da tanımlanan başlık ve içerikler NotesAdapter sınıfına gönderiliyor
        val adapter = NotesAdapter(notes)
        //Not kutularına tıklanma eventi
        adapter.noteClickListener = object : NotesAdapter.NoteClickListener {
            override fun onNoteClick(id: Int, noteCard: MaterialCardView) {

                val intent = Intent(this@MainActivity, NoteDetailActivity::class.java)
                //Not kutusuna tıkladığı anda yapılan geçiş animasyonunu tetiklediğimiz bölüm
                val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this@MainActivity, noteCard, id.toString()
                )
                //İlgili içeriğin id'si NoteDetailActivity sınıfına gönderiliyor
                intent.putExtra("noteId", id)
                startActivity(intent, options.toBundle())
            }
        }
        //Notları grid şeklinde gösterilmesi sağlayan bölüm
        recycler_view.layoutManager = GridLayoutManager(this, 2)
        recycler_view.adapter = adapter
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                onBackPressed()
                true
            }
            else -> {
                true
            }
        }
    }

    override fun onBackPressed() {
        finish()
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

import android.content.Intent

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.view.MenuItem

import androidx.core.app.ActivityOptionsCompat

import androidx.recyclerview.widget.GridLayoutManager

import com.google.android.material.card.MaterialCardView

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

setRecyclerView()

}

private fun setRecyclerView() {

//Note data class da tanımlanan başlık ve içerikler NotesAdapter sınıfına gönderiliyor

val adapter = NotesAdapter(notes)

//Not kutularına tıklanma eventi

adapter.noteClickListener = object : NotesAdapter.NoteClickListener {

override fun onNoteClick(id: Int, noteCard: MaterialCardView) {

val intent = Intent(this@MainActivity, NoteDetailActivity::class.java)

//Not kutusuna tıkladığı anda yapılan geçiş animasyonunu tetiklediğimiz bölüm

val options = ActivityOptionsCompat.makeSceneTransitionAnimation(

this@MainActivity, noteCard, id.toString()

)

//İlgili içeriğin id'si NoteDetailActivity sınıfına gönderiliyor

intent.putExtra("noteId", id)

startActivity(intent, options.toBundle())

}

//Notları grid şeklinde gösterilmesi sağlayan bölüm

recycler_view.layoutManager = GridLayoutManager(this, 2)

recycler_view.adapter = adapter

}

override fun onOptionsItemSelected(item: MenuItem): Boolean {

return when (item.itemId) {

android.R.id.home -> {

onBackPressed()

true

}

else -> {

true

}

override fun onBackPressed() {

finish()

}

Notların grid şeklinde gösterilmesi için activity_main xml dosyasında RecyclerView arayüz elementi kullanıldı.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        style="@style/Widget.MaterialComponents.AppBarLayout.Surface"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.textview.MaterialTextView
                style="?attr/textAppearanceHeadline6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="@color/material_on_surface_emphasis_medium"
                android:text="My notes" />
        </com.google.android.material.appbar.MaterialToolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"

tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout

style="@style/Widget.MaterialComponents.AppBarLayout.Surface"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<com.google.android.material.appbar.MaterialToolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<com.google.android.material.textview.MaterialTextView

style="?attr/textAppearanceHeadline6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:textColor="@color/material_on_surface_emphasis_medium"

android:text="My notes" />

</com.google.android.material.appbar.MaterialToolbar>

</com.google.android.material.appbar.AppBarLayout>

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

NotesAdapter sınıfının işlevi, MainActivity sınıfında kullanılan RecyclerView içinde tüm not item’larını oluşturmaktır. Bu item kutucuklarında da Note sınıfından gelen notlarla ilgili içerikleri item_note xml dosyasına aktarmasıyla tasarımda gösterilmesidir.

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.smality.materialcontainertransform.databinding.ItemNoteBinding
import com.google.android.material.card.MaterialCardView

class NotesAdapter(private val items: List<Note>) : RecyclerView.Adapter<NotesAdapter.ViewHolder>() {
    lateinit var noteClickListener: NoteClickListener

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
        ViewHolder(
            ItemNoteBinding.inflate(
                LayoutInflater.from(parent.context),
                parent,
                false
            )
        )

    override fun getItemCount() = items.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) = holder.bind(items[position])

    inner class ViewHolder(val binding: ItemNoteBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(note: Note) {
            binding.note = note
            binding.noteCard.transitionName = note.id.toString()
            binding.noteCard.setOnClickListener {
                noteClickListener.onNoteClick(note.id, binding.noteCard)
            }
        }
    }

    interface NoteClickListener {
        fun onNoteClick(id: Int, noteCard: MaterialCardView)
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

import android.view.LayoutInflater

import android.view.ViewGroup

import androidx.recyclerview.widget.RecyclerView

import com.smality.materialcontainertransform.databinding.ItemNoteBinding

import com.google.android.material.card.MaterialCardView

class NotesAdapter(private val items: List<Note>) : RecyclerView.Adapter<NotesAdapter.ViewHolder>() {

lateinit var noteClickListener: NoteClickListener

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =

ViewHolder(

ItemNoteBinding.inflate(

LayoutInflater.from(parent.context),

parent,

false

)

override fun getItemCount() = items.size

override fun onBindViewHolder(holder: ViewHolder, position: Int) = holder.bind(items[position])

inner class ViewHolder(val binding: ItemNoteBinding) : RecyclerView.ViewHolder(binding.root) {

fun bind(note: Note) {

binding.note = note

binding.noteCard.transitionName = note.id.toString()

binding.noteCard.setOnClickListener {

noteClickListener.onNoteClick(note.id, binding.noteCard)

}

interface NoteClickListener {

fun onNoteClick(id: Int, noteCard: MaterialCardView)

}

item_note xml dosyasında MaterialCardView arayüz elementini notları kutucuk şeklinde göstermek için kullandık. MaterialCardView içinde de MaterialTextView arayüz elementine not başlık ve içeriklerini atadık.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="note"
            type="com.smality.materialcontainertransform.Note" />
    </data>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/note_card"
            android:layout_gravity="center"
            android:clickable="true"
            android:focusable="true"
            android:layout_margin="8dp"
            app:cardBackgroundColor="@{context.resources.getColor(note.colorRes)}"
            android:layout_width="match_parent"
            android:layout_height="200dp">
            <LinearLayout
                android:padding="16dp"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <com.google.android.material.textview.MaterialTextView
                    style="?attr/textAppearanceBody1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{note.title}" />

                <com.google.android.material.textview.MaterialTextView
                    style="?attr/textAppearanceCaption"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:ellipsize="end"
                    android:maxLines="10"
                    android:layout_marginTop="8dp"
                    android:text="@{note.body}" />
            </LinearLayout>
        </com.google.android.material.card.MaterialCardView>
    </FrameLayout>
</layout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

<variable

name="note"

type="com.smality.materialcontainertransform.Note" />

</data>

<FrameLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<com.google.android.material.card.MaterialCardView

android:id="@+id/note_card"

android:layout_gravity="center"

android:clickable="true"

android:focusable="true"

android:layout_margin="8dp"

app:cardBackgroundColor="@{context.resources.getColor(note.colorRes)}"

android:layout_width="match_parent"

android:layout_height="200dp">

<LinearLayout

android:padding="16dp"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.google.android.material.textview.MaterialTextView

style="?attr/textAppearanceBody1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@{note.title}" />

<com.google.android.material.textview.MaterialTextView

style="?attr/textAppearanceCaption"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:ellipsize="end"

android:maxLines="10"

android:layout_marginTop="8dp"

android:text="@{note.body}" />

</LinearLayout>

</com.google.android.material.card.MaterialCardView>

</FrameLayout>

</layout>

Son olarak, NoteDetailActivity sınıfını kullandık. Bu sınıf, not kutularına tıklandığında notların detaylandırının gösterildiği sayfadır. Diğer bir yandan bu sınıfta, RecyclerView nesnesinden MaterialTextView nesnesine geciş anının süresinin belirlendiği kod sayfasıdır. Detaylı açıklamalar kodlar arasında bulunmaktadır.

import android.os.Bundle
import android.view.MenuItem
import android.view.Window
import androidx.appcompat.app.AppCompatActivity
import androidx.interpolator.view.animation.FastOutSlowInInterpolator
import com.google.android.material.transition.platform.MaterialContainerTransform
import com.google.android.material.transition.platform.MaterialContainerTransformSharedElementCallback
import com.smality.materialcontainertransform.databinding.NoteDetailActivityBinding

class NoteDetailActivity : AppCompatActivity() {
    private lateinit var binding: NoteDetailActivityBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
        binding = NoteDetailActivityBinding.inflate(layoutInflater)
        //MainActivity sınıfından gelen noteId değerini aldık
        val noteId = intent.getIntExtra("noteId", 0)
        //Id bilgisine göre Note data class daki not içeriğini alıp, note nesnesine atadık
        val note = notes.find { it.id == noteId }
        binding.note = note
        //
        binding.coordinator.transitionName = noteId.toString()
        setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())
        //buildContainerTransform metodunda oluturulan özelliklerin geciş esnasında uygulanması için
        //yapılan atama
        window.sharedElementEnterTransition = buildContainerTransform()
        window.sharedElementReturnTransition = buildContainerTransform()
        setContentView(binding.root)
        super.onCreate(savedInstanceState)
        setSupportActionBar(binding.toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setDisplayShowTitleEnabled(false)
    }
    //RecyclerView nesnesinden MaterialTextView nesnesine geciş anının süresini belirkeyen metod
    private fun buildContainerTransform() =
        MaterialContainerTransform().apply {
            addTarget(binding.coordinator)
            duration = 300
            //geçiş anındaki animasyon hızını ayarlayan metod
            interpolator = FastOutSlowInInterpolator()
            fadeMode = MaterialContainerTransform.FADE_MODE_IN
        }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                onBackPressed()
                true
            }
            else -> {
                true
            }
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

import android.os.Bundle

import android.view.MenuItem

import android.view.Window

import androidx.appcompat.app.AppCompatActivity

import androidx.interpolator.view.animation.FastOutSlowInInterpolator

import com.google.android.material.transition.platform.MaterialContainerTransform

import com.google.android.material.transition.platform.MaterialContainerTransformSharedElementCallback

import com.smality.materialcontainertransform.databinding.NoteDetailActivityBinding

class NoteDetailActivity : AppCompatActivity() {

private lateinit var binding: NoteDetailActivityBinding

override fun onCreate(savedInstanceState: Bundle?) {

window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

binding = NoteDetailActivityBinding.inflate(layoutInflater)

//MainActivity sınıfından gelen noteId değerini aldık

val noteId = intent.getIntExtra("noteId", 0)

//Id bilgisine göre Note data class daki not içeriğini alıp, note nesnesine atadık

val note = notes.find { it.id == noteId }

binding.note = note

//

binding.coordinator.transitionName = noteId.toString()

setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())

//buildContainerTransform metodunda oluturulan özelliklerin geciş esnasında uygulanması için

//yapılan atama

window.sharedElementEnterTransition = buildContainerTransform()

window.sharedElementReturnTransition = buildContainerTransform()

setContentView(binding.root)

super.onCreate(savedInstanceState)

setSupportActionBar(binding.toolbar)

supportActionBar?.setDisplayHomeAsUpEnabled(true)

supportActionBar?.setDisplayShowTitleEnabled(false)

}

//RecyclerView nesnesinden MaterialTextView nesnesine geciş anının süresini belirkeyen metod

private fun buildContainerTransform() =

MaterialContainerTransform().apply {

addTarget(binding.coordinator)

duration = 300

//geçiş anındaki animasyon hızını ayarlayan metod

interpolator = FastOutSlowInInterpolator()

fadeMode = MaterialContainerTransform.FADE_MODE_IN

}

override fun onOptionsItemSelected(item: MenuItem): Boolean {

return when (item.itemId) {

android.R.id.home -> {

onBackPressed()

true

}

else -> {

true

}

note_detail_activity xml dosyasında ise, MaterialTextView arayüz elementi kullanılarak seçilen notun detaylarının gösterildi.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="note"
            type="com.smality.materialcontainertransform.Note" />
    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@{context.resources.getColor(note.colorRes)}">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <com.google.android.material.textview.MaterialTextView
                style="?attr/textAppearanceHeadline6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@{note.title}"
                android:textColor="@color/material_on_surface_emphasis_medium" />
        </com.google.android.material.appbar.MaterialToolbar>

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:layout_marginTop="?actionBarSize">

            <com.google.android.material.textview.MaterialTextView
                style="?attr/textAppearanceBody2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:ellipsize="end"
                android:maxLines="10"
                android:layout_marginTop="8dp"
                android:text="@{note.body}" />
        </androidx.core.widget.NestedScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

<variable

name="note"

type="com.smality.materialcontainertransform.Note" />

</data>

<androidx.coordinatorlayout.widget.CoordinatorLayout

android:id="@+id/coordinator"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@{context.resources.getColor(note.colorRes)}">

<com.google.android.material.appbar.MaterialToolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:fitsSystemWindows="true">

<com.google.android.material.textview.MaterialTextView

style="?attr/textAppearanceHeadline6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="@{note.title}"

android:textColor="@color/material_on_surface_emphasis_medium" />

</com.google.android.material.appbar.MaterialToolbar>

<androidx.core.widget.NestedScrollView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp"

android:layout_marginTop="?actionBarSize">

<com.google.android.material.textview.MaterialTextView

style="?attr/textAppearanceBody2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:ellipsize="end"

android:maxLines="10"

android:layout_marginTop="8dp"

android:text="@{note.body}" />

</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

Dilerseniz projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

Material motion

Database Inspector

Yazılım projeleri oluştururken hazırladığımız veritabanı yapılarını, bir arayüz alanı üzerinden incelemek, değişiklik yapmak her zaman işimizi kolaylaştırır. Android uygulama geliştirme sürecinde yakın zamana kadar local veritabanı üzerinde değişiklikler yapmak, biz geliştiriciler için hayli zordu.

Bu makalemde Android Studio 4.1 ile gelen Database Inspector özelliği sayesinde projelerinizde SQLite veya Room ile oluşan veritabanlarında nasıl kolay bir şekilde sorgular çalıştıracağınızı ve incelemeler yapacağınızı göstereceğim.

İsterseniz makalede kullanacağım Lesson Notes uygulamasını github‘ dan indirip, benim örneklerimi pratik yapabilirsiniz.

Database Inspector Kullanımı

İlk öncelikle Android Studio sürümünüzü 4.1 şeklinde güncellemeniz gerekmektedir.

Android Studio menüsünde View > Tool Windows > Database Inspector yolunu izleyerek, Database Inspector özelliğini açabilirsiniz.

Database Inspector özelliğini kullanabilmek için test ortamınızın API level 26 veya 26’dan büyük olmalıdır.

Özelliği aktif ettiğim örnek görünüm;

Test cihazınızda daha önceki projelerinizde oluşturduğunuz veritabanları olabilir. Sizin projenize ait veritabanına ulaşmak için Şekil-1 belirttiğim ilgili yerden, projenizin paketini seçmelisiniz.

Şekil-1

Database Inspector Sorgu Çalıştırma

Room kütüphanesi ile veritabanı oluşturduysanız, @Query etiketi içinde olan sorguları hızlıca çalıştırma ve sonucunun gösterilmesi sağlanmaktadır. Klasik SQLite yapısında da benzeri yapı bulunmaktadır. Fakat bu kullanımda, koddaki sorguları çalıştırmak her zaman mümkün olmayabiliyor.

İki farklı şekilde sql sorgularınızı çalıştırabilirsiniz

1- @Query etiketin sol tarafındaki arama simgesine tıkladığınızda, kodda bulunan sorgu çalışır. Örneğin, id değeri “4463f016-350d-441f-b2a4-26c6b1dba973” olan notu listeleyelim.

2- Database Inspector arayüzünde sorgu yazma alanını açarak da sql çalıştırabilirsiniz. Örneğin, bir tane ders notunu veritabanına ekleyip, sonrasında bu kaydı select sql listeleyelim.

Veritabanında Kolay Veri Değişikliği Nasıl Sağlanır

Database Inspector kullanarak, çalışan uygulamanın veritabanındaki verileri anlık hızlı bir şekilde değiştirme imkanımız bulunmaktadır.

Diğer özellik ise uygulamada verilerle ilgili yapılan değişiklikleri, anında canlı bir şekilde veritabanında görme imkanımız bulunmaktadır. Bu özelliği kullanabilmek için ilgili tablomuzu açtıktan sonra Live updates checbox seçmeliyiz. Aşağıdaki örnek resimde, “service” notunu eklediğimde otomatik olarak tabloda kayıt olduğunu göreceksiniz.

Kaynak

1-https://medium.com/androiddevelopers/database-inspector-9e91aa265316

2- https://developer.android.com/studio/inspect/database

Google Play In-App Review API Kullanımı

Android uygulamanız Play Store’da yayınlandıktan sonra, uygulama puanlandırma ve yorumları daha fazla indirme sağlamak için çok önemli faktörlerdir. Bunu başarmak için, genellikle kullanıcıları Play Store’a yönlendirerek uygulamayı puanlandırmalarını isteriz. Bu yöntem ile kullanıcıların Play Store’a yönlendirildikten sonra uygulamanıza geri dönmeme olasılığı vardır. Ayrıca bazı kullanıcılar, uygulamayı Play Store’da puanlandırmak da zorlanabilir.

Bu makalemde, Google Play In-App Review API ile kullanıcının uygulama puanlandırma ve yorumlarını, Android uygulama içinde yapmasını sağlayarak, indirme sayılarını arttırma konusunda fayda sağlayacağız.

Aşağıdaki resimde olduğu gibi kullanıcı, uygulama içinde puanlandırma ve yorum yapabilir.

In-App Review için Önemli Noktalar

Bu API yalnızca Android 5.0 (API seviyesi 21) veya sonraki sürümlere sahip olan Android cihazlarda çalışır.
Google Play, kullanıcıya ne sıklıkla review dialog arayüzünü gösterilebileceğiniz konusunda zamana bağlı bir kota uygular. Bu kota nedeniyle, launchReviewFlow yöntemini kısa bir süre içinde birden çok kez çağırmak her zaman bir iletişim kutusu görüntülemeyebilir. (örneğin, bir aydan az). Kota hakkında bilgileri quotas linkinden ulaşabilirsiniz.
Rating widget üzerinde tasarımsal bir değişiklik yapamazsınız. Bu konuda daha detaylı bilgiyi Design Guidelines linkinden ulaşabilirsiniz.

Projemizde Google Play In-App Review API’yi uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Play Core API ve material kütüphanelerini yüklüyoruz.

implementation "com.google.android.play:core:1.8.0"

//material'i hata geri dönüşü olduğunda kullanıcı deneyimi için kullanıldı
//isterseniz, alternatif kütüphanelerde kullanabilirsiniz
implementation "com.google.android.material:material:1.3.0-alpha02"

1

2

3

4

5

implementation "com.google.android.play:core:1.8.0"

//material'i hata geri dönüşü olduğunda kullanıcı deneyimi için kullanıldı

//isterseniz, alternatif kütüphanelerde kullanabilirsiniz

implementation "com.google.android.material:material:1.3.0-alpha02"

2- Backend Kodlama

İlk önce ReviewManager interface oluşturmamız gerekir. Sonrasında review akışını başlatmak için ReviewInfo nesnesi üzerinden launchReviewFlow () yöntemini çağırdık. Bazı nedenlerden dolayı işleyiş başarısız olursa, kullanıcıyı playstore uygulamasına yönlendirip, klasik playstore üzerinden değerlendirme yapılmasını sağladım. Detaylı açıklamalar kodlar arasında comment olarak bulabilirsiniz.

import android.content.*;
import android.net.Uri;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.dialog.MaterialAlertDialogBuilder;
import com.google.android.play.core.review.*;
import com.google.android.play.core.tasks.Task;

public class MainActivity extends AppCompatActivity {
    private ReviewManager reviewManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        reviewManager = ReviewManagerFactory.create(this);
        findViewById(R.id.btn_rate_app).setOnClickListener(view -> showRateApp());
    }

    /**
     * In-App review API'nin sağladığı rating widget ve alt sayfalarını gosteren metod
     *Rating widget kotalara ve sınırlamalara bağlı olarak gösterilebilir veya gösterilmeyebilir
     */
    public void showRateApp() {
        Task<ReviewInfo> request = reviewManager.requestReviewFlow();
        request.addOnCompleteListener(task -> {
            if (task.isSuccessful()) {

                ReviewInfo reviewInfo = task.getResult();
                Task<Void> flow = reviewManager.launchReviewFlow(this, reviewInfo);
                flow.addOnCompleteListener(task1 -> {
                    //Rating widget gösterilme işlemi bitti. Yalnız bu noktada API'de, kullanıcının puanlandırma yapıp yapmadığıyla
                    //ilgili bir kontrol bulunmamaktadır

                });
            } else {
                //Herhangi bir hata varsa showRateAppFallbackDialog metodu çağırılıyor
                showRateAppFallbackDialog();
            }
        });
    }

    /**
     * bir hata ile karşılaşıp, uygulama içinde Rating widget gösterilemediği durumda,
     * uygulamanızı PlayStore yönlendirip, PlayStore web sitesinde puanlandırma yapılmasına yönlendirdim.
     */
    private void showRateAppFallbackDialog() {
        //Ben tercih olarak MaterialAlertDialogBuilder kullandım. Fakat dilerseniz, klasil AlertDialog da kullanabilirsiniz
        new MaterialAlertDialogBuilder(this)
                .setTitle(R.string.rate_app_title)
                .setMessage(R.string.rate_app_message)
                .setPositiveButton(R.string.rate_btn_pos, (dialog, which) -> redirectToPlayStore())
                .setNegativeButton(R.string.rate_btn_neg,
                        (dialog, which) -> {
                    
                        })
                .setNeutralButton(R.string.rate_btn_nut,
                        (dialog, which) -> {
                    
                        })
                .setOnDismissListener(dialog -> {
                })
                .show();
    }

    //Kullanıcıyı PlayStore yönlendirme(Hata ile karşılaşıldığında kullandım)
    public void redirectToPlayStore() {
        final String appPackageName = getPackageName();
        try {
            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + appPackageName)));
        } catch (ActivityNotFoundException exception) {
            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://play.google.com/store/apps/details?id=" + appPackageName)));
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

import android.content.*;

import android.net.Uri;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.dialog.MaterialAlertDialogBuilder;

import com.google.android.play.core.review.*;

import com.google.android.play.core.tasks.Task;

public class MainActivity extends AppCompatActivity {

private ReviewManager reviewManager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

init();

}

private void init() {

reviewManager = ReviewManagerFactory.create(this);

findViewById(R.id.btn_rate_app).setOnClickListener(view -> showRateApp());

}

/**

* In-App review API'nin sağladığı rating widget ve alt sayfalarını gosteren metod

*Rating widget kotalara ve sınırlamalara bağlı olarak gösterilebilir veya gösterilmeyebilir

*/

public void showRateApp() {

Task<ReviewInfo> request = reviewManager.requestReviewFlow();

request.addOnCompleteListener(task -> {

if (task.isSuccessful()) {

ReviewInfo reviewInfo = task.getResult();

Task<Void> flow = reviewManager.launchReviewFlow(this, reviewInfo);

flow.addOnCompleteListener(task1 -> {

//Rating widget gösterilme işlemi bitti. Yalnız bu noktada API'de, kullanıcının puanlandırma yapıp yapmadığıyla

//ilgili bir kontrol bulunmamaktadır

});

} else {

//Herhangi bir hata varsa showRateAppFallbackDialog metodu çağırılıyor

showRateAppFallbackDialog();

}

});

}

/**

* bir hata ile karşılaşıp, uygulama içinde Rating widget gösterilemediği durumda,

* uygulamanızı PlayStore yönlendirip, PlayStore web sitesinde puanlandırma yapılmasına yönlendirdim.

*/

private void showRateAppFallbackDialog() {

//Ben tercih olarak MaterialAlertDialogBuilder kullandım. Fakat dilerseniz, klasil AlertDialog da kullanabilirsiniz

new MaterialAlertDialogBuilder(this)

.setTitle(R.string.rate_app_title)

.setMessage(R.string.rate_app_message)

.setPositiveButton(R.string.rate_btn_pos, (dialog, which) -> redirectToPlayStore())

.setNegativeButton(R.string.rate_btn_neg,

(dialog, which) -> {

})

.setNeutralButton(R.string.rate_btn_nut,

(dialog, which) -> {

})

.setOnDismissListener(dialog -> {

})

.show();

}

//Kullanıcıyı PlayStore yönlendirme(Hata ile karşılaşıldığında kullandım)

public void redirectToPlayStore() {

final String appPackageName = getPackageName();

try {

startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + appPackageName)));

} catch (ActivityNotFoundException exception) {

startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://play.google.com/store/apps/details?id=" + appPackageName)));

}

3- Arayüz Kodlama

Ben MaterialButton kullanarak, kullanıcıdan değerlendirme yapmasını yönlendirdim. Siz dilerseniz, klasik button da kullanabilirsiniz. In-App Review API’den bağımsız, sizin tasarım tercihinizle alakalı bir durum.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_rate_app"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="Rate App!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<?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:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<com.google.android.material.button.MaterialButton

android:id="@+id/btn_rate_app"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="80dp"

android:text="Rate App!"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Eğer benim gibi MaterialButton kullanacaksanız, res->values ->styles.xml dosyasınızda temanız MaterialComponents şeklinde tanımlanmış olmalıdır. Örnek;

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
//...
</style>

1

2

3

//...

</style>

In-App Review Test Etme

In-App Review API’sini barındıran proje kodlarını test edebilmek için uygulamanızı PlayStore’da onaylatmış olmanız gerekir. En azından uygulamanızı PlayStore’da Internal Testing ve Internal App Sharing test ortamlarına yüklemelisiniz.

Örnek proje kodlarına github linkinden ulaşabilirsiniz.

Kaynak

1-https://developer.android.com/guide/playcore/in-app-review/kotlin-java

Android Studio’da Configuration Caching

Yazılım projelerini oluşturma aşamasında harcanan zaman herkes için çok değerlidir. Proje için harcanan zamanı en aza indirmek, maddi ve manevi birçok getirileri bulunmaktadır. Android uygulama geliştirme süreçlerinde birden fazla yöntem ile zaman kazancı sağlayabilirsiniz. Android Studio’da Build Analyzer Kullanımı ve Debug Püf Noktaları adlı makalelerimde farklı 2 yöntemden bahsetmiş bulunmaktayım.

Bu makalemde ise Android Studio Gradle 6.6 sürümünün, yapılandırma sürecinin sonucunu önbelleğe alarak, bu bilgiyi bir sonraki derlemelerde kullanmasıyla performansı önemli ölçüde artıran “Configuration Caching” özelliği anlatacağım.

“Configuration Caching” özelliğinde ek olarak, yapılandırma önbelleğini yeniden kullanırken, varsayılan olarak daha fazla iş paralel olarak çalıştırılır. Yapılandırma ve yürütme aşamalarının izolasyonu ve görevlerin izolasyonu, bu optimizasyonları mümkün kılar.

Not: Yapılandırma önbelleğini kullanan Gradle, yapılandırma komut dosyaları gibi derleme yapılandırmasını etkileyen hiçbir şey değişmediğinde yapılandırma aşamasını tamamen atlayabilir.

Configuration Caching Özelliğini Aktif Etme

Configuration caching özelliği, Gradle 6.6 sürümünde bulunmaktadır. Bu özelliği aktif edebilme için gradle dosyasında bir komut çalıştıracağız. Android Studio’da komut çalıştırmak için View->Tool Windows->Terminal sekmesini açmalısınız. Terminal adlı pencere, Android Studio aşağı kısmında açılacaktır. Burada proje yolununda yazmış olduğu komut yazma alanını göreceksiniz. Windows ve Linux(veya Mac) işletim sistemlerinde yazılan gradle komutları biraz farklıdır. Örneğin, gradle versiyonunuzu öğrenmek isterseniz,

Windows ‘da “gradlew –v”, Linux(veya Mac) işletim sistemlerinde ise “./gradlew –v” yazmalısınız.

Configuration caching özelliğini aktif etmek ve yardımı çalıştırmak için;

Windows işletim sisteminde

gradlew --configuration-cache help

1	gradlew --configuration-cache help

Linux veya Mac işletim sisteminde

./gradlew --configuration-cache help

1	./gradlew --configuration-cache help

şeklinde komutları kullanmalıyız.

Örnek;

Configuration caching özelliğini aktif etmenin diğer bir yolu, proje ana dizinindeki gradle.properties dosyasını açıp,

org.gradle.unsafe.configuration-cache=true

1	org.gradle.unsafe.configuration-cache=true

kodunu ekleyerek yapabilirsiniz. Bu yöntemle özelliği aktif ederseniz, her derlemede komut satırı tarafına geçmeden Configuration caching kullanmış olursunuz.

Java Build

Yaklaşık 500 tane alt projeye ve karmaşık yapı mantığına sahip büyük bir Java enterprise projesi, normalde 8 saniyede çalışırken, Configuration caching özelliği kullandığımızda ise 0,5 saniyede derlendiğini gördük.Böylelikle Configuration caching özelliği ile 16 kat daha hızlı derlemiş oldu. Aynı yapıda, uygulama kodunu değiştirdikten sonra assemble çalıştırmak, 40 saniyede derlenirken, 13 saniye gibi bir sürede, yani yaklaşık 3 kat daha hızlı derlenmesine sebep oldu. Bu örneğin grafiği aşağıdadır.

gradle/gradle projesinin derleme anını inceleyelim . Bu proje yüz tane alt proje ve karmaşık bir yapıya sahiptir.
Uygulamada değişikliği yaptıktan sonra test yaptığımızda aşağıdaki grafikte, mavi alanda configuration phase(yapılandırma aşaması), yeşil alanda ise execution phase bilgisini görebilirsiniz. Grafiğin sol tarafında , configuration caching(yapılandırma önbelleği) etkinleştirilmeden, yapılandırma aşaması 2 saniyeden fazla sürerken, grafiğin sağ tarafında configuration caching ile 214 milisaniyeye inmektedir.Yani 2 saniyeden 214 milisaniyeye düşerek, zamandan kazanmış olduk.

Android builds

2500 alt projeye sahip çok büyük bir Android uygulamasının derleme zamanlarını inceleyeceğiz. Bu projeyi normal derlediğimizde 25 saniyede, configuration caching ile derlediğimizde ise 0,5 saniyede çalışmaktadır. Yani configuration caching sayesinde 50 kat daha hızlı derlendi. Bazı alt uygulamaları değiştirdikten sonra APK’yi bir araya getirmek gibi daha kullanışlı bir derleme çalıştırmak, ~ 50 saniyeden ~ 20 saniyeye, neredeyse 3 kat daha hızlı yapılabiliyor.

Kendi Android uygulamalarınızda, yukarıda gibi zaman ölçümleri yapmak istiyorsanız, bu github reposunda talimatları izleyerek, Gradle Profiler den yardım alarak yapabilirsiniz.

Kaynak

1- https://blog.gradle.org/introducing-configuration-caching

2- https://developer.android.com/studio/build/build-cache.html

Yazar: Tuğba Üstündağ

Accessibility(Erişilebilirlik) Nedir?

Elementlerin Erişilebilirliklerini Nasıl Arttıracağız?

Color contrast

Touch Targets (Dokunma Hedefi)

Item Label (Öğe Etiketi)

In-App Review için Önemli Noktalar

1-Gerekli Kütüphanelerin Eklenmesi

2- Backend Kodlama

3- Arayüz Kodlama

1-Facebook’da App Oluşturma

Debug Key Hash Oluşturma

Release Key Hash Oluşturma

2-Facebook Login Button Oluşturma

3. Facebook Login Kontrolü ve Verileri Alma

4- Facebook Kullanıcı Bilgilerini Tasarımda Gösterme

1-CardView ile köşeleri yuvarlatma

CardView Örneği

2-Shape xml yapısı ile köşeleri yuvarlatma

Shape xml Örneği

Kod açıklaması

Kotlin Playground tool nedir? Ne işe yarar?

Kotlin Playground tool kullanımı

Ayarları Düzenleme

Playground ‘da JVM yapısının kullanımı

Playground ‘da JS yapısının kullanımı

Playground ‘da CANVAS yapısının kullanımı

Playground ‘da JUNIT yapısının kullanımı

Playground ‘daki Kodların Paylaşımı

JS Script ile Playground ‘daki Kodları Siteye Ekleme

1-Gerekli Kütüphanelerin Eklenmesi

2-Java kodlama ile işlevsellik oluşturma

3-Arayüz Kodlaması

Container Transform

1-Gerekli Kütüphanelerin Yüklenmesi

2- Kotlin ve tasarım kodları

Database Inspector Kullanımı

Database Inspector Sorgu Çalıştırma

Veritabanında Kolay Veri Değişikliği Nasıl Sağlanır

In-App Review için Önemli Noktalar

1-Gerekli Kütüphanelerin Eklenmesi

2- Backend Kodlama

3- Arayüz Kodlama

In-App Review Test Etme

Configuration Caching Özelliğini Aktif Etme

Windows işletim sisteminde

Linux veya Mac işletim sisteminde

Java Build

Android builds

KURUMSAL

HİZMETLERİMİZ

İLETİŞİM & DESTEK