Material Motion Part 3: Fade

16 Aralık 2020

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 uygulamada iki farklı arayüz elementinin birbirleri arasında animasyonlu bir şekilde geçişini sağlayan Container Transform özelliğini “Material Motion Part 2: Container Transform” makalemden inceleyebilirsiniz.

Bu makale serisinde, bir arayüz nesnesinin soluklaştırarak ekranda gösterilmesini sağlayan Material motion Fade özelliğini örnekleyeceğim.

Fade

Fade, bir arayüz elementinin soluklaşarak ekranda gösterilmesi ya da ekrandan kaybolmasını sağlayan özelliktir. Arayüz elementi ekrana girerken, element boyutunun % 80 lik kısmından solmaya başlayarak gösterilir.

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

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 material kütüphanesini yüklüyoruz.

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

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

2- Kotlin ve tasarım kodları

Fade özelliği kullanarak CalendarView arayüz elementini ekranda belli bir hızla görünür hale getiren kodumuz MainActivity sınıfında bulunmaktadır.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.transition.TransitionManager
import com.google.android.material.transition.MaterialFade
import kotlinx.android.synthetic.main.main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main)
//Takvimi  ekrandan gizlemek için INVISIBLE metodu kullanıyoruz
calendarView.visibility = View.INVISIBLE
//takvim ikonuna tıklandığında...
dateImg.setOnClickListener(View.OnClickListener {
//Arayüz elementinin soluklaştırma süresini belirliyoruz
val transition = MaterialFade().apply {
duration = 2000
}
TransitionManager.beginDelayedTransition(findViewById(android.R.id.content), transition)
//Ekranda görünmeyen CalendarView elementini Fade özelliğini kullanabilmesi için görünür hale getirdim.
calendarView.visibility = View.VISIBLE
})
}
}

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.view.View

import androidx.transition.TransitionManager

import com.google.android.material.transition.MaterialFade

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

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.main)

//Takvimi ekrandan gizlemek için INVISIBLE metodu kullanıyoruz

calendarView.visibility = View.INVISIBLE

//takvim ikonuna tıklandığında...

dateImg.setOnClickListener(View.OnClickListener {

//Arayüz elementinin soluklaştırma süresini belirliyoruz

val transition = MaterialFade().apply {

duration = 2000

}

TransitionManager.beginDelayedTransition(findViewById(android.R.id.content), transition)

//Ekranda görünmeyen CalendarView elementini Fade özelliğini kullanabilmesi için görünür hale getirdim.

calendarView.visibility = View.VISIBLE

})

}

MainActivity sınıfında kullandığımız CalendarView arayüz elementinin bulunduğu main xml kodlarımız:

<?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">
<CalendarView
android:id="@+id/calendarView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="44dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="44dp"
android:layout_marginBottom="92dp"
android:background="#EFEFEF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dateImg" />
<EditText
android:id="@+id/edtDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="32dp"
android:ems="10"
android:hint="Date"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/name" />
<EditText
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="102dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="100dp"
android:ems="10"
android:hint="Activity Type"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialTextView" />
<ImageButton
android:id="@+id/dateImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="440dp"
android:background="@null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/edtDate"
app:srcCompat="@drawable/ic_baseline_date_range_24" />
<com.google.android.material.textview.MaterialTextView
android:id="@+id/materialTextView"
style="?attr/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Activity Registration"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

<CalendarView

android:id="@+id/calendarView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="44dp"

android:layout_marginTop="20dp"

android:layout_marginEnd="44dp"

android:layout_marginBottom="92dp"

android:background="#EFEFEF"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

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

<EditText

android:id="@+id/edtDate"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="95dp"

android:layout_marginTop="32dp"

android:ems="10"

android:hint="Date"

android:inputType="textPersonName"

app:layout_constraintStart_toStartOf="parent"

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

<EditText

android:id="@+id/name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="102dp"

android:layout_marginTop="40dp"

android:layout_marginEnd="100dp"

android:ems="10"

android:hint="Activity Type"

android:inputType="textPersonName"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

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

<ImageButton

android:id="@+id/dateImg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="10dp"

android:layout_marginEnd="20dp"

android:layout_marginBottom="440dp"

android:background="@null"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toEndOf="@+id/edtDate"

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

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

android:id="@+id/materialTextView"

style="?attr/textAppearanceHeadline6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="100dp"

android:text="Activity Registration"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Kategori Genel

Etiketler