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.
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.
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 |
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:
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 |
<?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> |