ConstraintLayout ile duyarlı kullanıcı arayüzü oluşturma   Android Jetpack'in bir parçasıdır.

Şekil 1. Düzenleyici, A'nın altında C görünümünü gösterir ancak dikey kısıtlaması yoktur.

Şekil 2. C görünümü artık A görünümünün altında dikey olarak sınırlandırılmış durumda.

Eksik kısıtlama derleme hatasına neden olmasa da Layout Editor, eksik kısıtlamaları araç çubuğunda hata olarak gösterir. Hataları ve diğer uyarıları görüntülemek için Uyarıları ve Hataları Göster'i tıklayın . Eksik kısıtlamaları önlemek için Layout Editor, Otomatik bağlama ve kısıtlamaları tahmin etme özellikleriyle sizin için otomatik olarak kısıtlamalar ekler.

Projenize ConstraintLayout ekleme

Projenizde ConstraintLayout kullanmak için aşağıdaki adımları uygulayın:

1. maven.google.com deposunun settings.gradle dosyanızda tanımlandığından emin olun:

   Modern

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Kitaplığı, aşağıdaki örnekte gösterildiği gibi modül düzeyindeki build.gradle dosyasına bağımlılık olarak ekleyin. En son sürüm, örnekte gösterilenden farklı olabilir.

   Eski

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. Araç çubuğunda veya senkronizasyon bildiriminde Sync Project with Gradle Files'ı (Projeyi Gradle Dosyalarıyla Senkronize Et) tıklayın.

Artık ConstraintLayout ile düzeninizi oluşturmaya hazırsınız.

Düzen dönüştürme

Şekil 3. Düzeni ConstraintLayout biçimine dönüştürme menüsü.

Mevcut bir düzeni sınırlama düzenine dönüştürmek için aşağıdaki adımları uygulayın:

1. Android Studio'da düzeninizi açın ve düzenleyici penceresinin alt kısmındaki Tasarım sekmesini tıklayın.
2. Component Tree (Bileşen Ağacı) penceresinde, düzeni sağ tıklayın ve Convert LinearLayout to ConstraintLayout'u (LinearLayout'ı ConstraintLayout'a Dönüştür) tıklayın.

Yeni düzen oluşturma

Yeni bir ConstraintLayout dosyası başlatmak için aşağıdaki adımları uygulayın:

1. Proje penceresinde, modül klasörünü tıklayın ve Dosya > Yeni > XML > Düzen XML'si'ni seçin.
2. Düzen dosyası için bir ad girin ve Root Tag (Kök Etiket) için "androidx.constraintlayout.widget.ConstraintLayout" değerini girin.
3. Son'u tıklayın.

Kısıtlama ekleme veya kaldırma

Kısıtlama eklemek için aşağıdakileri yapın:

1. Palet penceresinden bir görünümü düzenleyiciye sürükleyin.

   ConstraintLayout içine görünüm eklediğinizde, her köşesinde kare yeniden boyutlandırma tutamaçları ve her kenarında dairesel sınırlama tutamaçları olan bir sınırlayıcı kutu içinde gösterilir.

2. Görünümü tıklayarak seçin.
3. Aşağıdakilerden birini yapın:
   • Bir kısıtlama tutamacını tıklayın ve kullanılabilir bir sabitleme noktasına sürükleyin. Bu nokta, başka bir görünümün kenarı, düzenin kenarı veya bir kılavuz çizgisi olabilir. Kısıtlama tutma yerini sürüklerken Düzen Düzenleyicisi'nin olası bağlantı tutturucularını ve mavi kaplamaları gösterdiğini unutmayın.

   • Şekil 4'te gösterildiği gibi, Özellikler penceresinin Düzen bölümündeki Bağlantı oluştur düğmelerinden birini tıklayın.

     

     Şekil 4. Özellikler penceresinin Düzen bölümünde bağlantılar oluşturabilirsiniz.

Kısıtlama oluşturulduğunda düzenleyici, iki görünümü ayırmak için kısıtlamaya varsayılan bir kenar boşluğu verir.

Kısıtlamalar oluştururken aşağıdaki kuralları unutmayın:

• Her görünümde en az iki kısıtlama olmalıdır: biri yatay, diğeri dikey.
• Yalnızca aynı düzlemi paylaşan bir kısıtlama tutma noktası ile bir sabitleme noktası arasında kısıtlama oluşturabilirsiniz. Bir görünümün dikey düzlemi (sol ve sağ tarafları) yalnızca başka bir dikey düzlemle sınırlandırılabilir ve referans değerler yalnızca diğer referans değerlerle sınırlandırılabilir.
• Her kısıtlama tutma yeri yalnızca bir kısıtlama için kullanılabilir ancak farklı görünümlerden aynı sabitleme noktasına birden fazla kısıtlama oluşturabilirsiniz.

Aşağıdaki yöntemlerden herhangi birini kullanarak kısıtlamayı silebilirsiniz:

• Bir kısıtlamayı tıklayarak seçin ve Sil'i tıklayın.

• Bir sınırlama tutturma noktasına Control tuşunu basılı tutarak tıklayın (macOS'te Command tuşunu basılı tutarak tıklayın). Şekil 5'te gösterildiği gibi, kısıtlama kırmızı renge döner. Bu, kısıtlamayı silmek için tıklayabileceğinizi gösterir.

  

  Şekil 5. Kırmızı kısıtlama, silmek için tıklayabileceğinizi gösterir.

• Özellikler penceresinin Düzen bölümünde, Şekil 6'da gösterildiği gibi bir kısıtlama tutturucuyu tıklayın.

  

  Şekil 6. Silmek istediğiniz bir kısıtlama tutamacını tıklayın.

Bir görünüme karşıt kısıtlamalar eklerseniz kısıtlama çizgileri, 2. videoda gösterildiği gibi karşıt güçleri belirtmek için yay gibi sarılır. Bu efekt, görünüm boyutu "sabit" veya "içeriği sarmala" olarak ayarlandığında en belirgin şekilde görülür. Bu durumda görünüm, kısıtlamalar arasında ortalanır. Bunun yerine görünümün, kısıtlamaları karşılamak için boyutunu genişletmesini istiyorsanız boyutu "kısıtlamalara uyacak şekilde" olarak değiştirin. Mevcut boyutu korumak ancak görünümü ortalanmayacak şekilde taşımak istiyorsanız kısıtlama eğilimini ayarlayın.

Aşağıdaki bölümlerde açıklandığı gibi, farklı türlerde düzen davranışları elde etmek için kısıtlamaları kullanabilirsiniz.

Üst öğe konumu

Bir görünümün kenarını düzenin ilgili kenarıyla sınırlandırın.

Şekil 7'de, görünümün sol tarafı üst yerleşimin sol kenarına bağlıdır. Kenardan olan mesafeyi kenar boşluğuyla tanımlayabilirsiniz.

Şekil 7. Üst öğeye yönelik yatay kısıtlama.

Sipariş konumu

İki görünümün görünme sırasını dikey veya yatay olarak tanımlayın.

Şekil 8'de B her zaman A'nın sağında, C ise A'nın altında olacak şekilde kısıtlanmıştır. Ancak bu kısıtlamalar hizalama anlamına gelmez. Bu nedenle B, yukarı ve aşağı hareket etmeye devam edebilir.

Şekil 8. Yatay ve dikey kısıtlama.

Hizalama

Bir görünümün kenarını başka bir görünümün kenarıyla aynı hizaya getirin.

Şekil 9'da B'nin sol tarafı A'nın sol tarafına hizalanmıştır. Görünüm merkezlerini hizalamak istiyorsanız her iki tarafta da bir kısıtlama oluşturun.

Görünümü kısıtlamadan içeriye doğru sürükleyerek hizalamayı kaydırabilirsiniz. Örneğin, Şekil 10'da B, 24 dp'lik bir ofset hizalamasıyla gösterilmektedir. Ofset, kısıtlanmış görünümün kenar boşluğuyla tanımlanır.

Ayrıca, hizalamak istediğiniz tüm görünümleri seçip araç çubuğunda Hizala'yı tıklayarak hizalama türünü belirleyebilirsiniz.

Şekil 9. Yatay hizalama kısıtlaması.

Şekil 10. Yatay hizalama kısıtlaması.

Temel çizgi hizalaması

Bir görünümün metin referans çizgisini başka bir görünümün metin referans çizgisiyle hizalar.

Şekil 11'de B'nin ilk satırı, A'daki metinle hizalanmıştır.

Temel sınırlama oluşturmak için sınırlamak istediğiniz metin görünümünü sağ tıklayın ve Temel Değeri Göster'i tıklayın. Ardından metin taban çizgisini tıklayın ve çizgiyi başka bir taban çizgisine sürükleyin.

Şekil 11. Temel çizgi hizalama kısıtlaması.

Bir kılavuza sınırlama

Görünümlerinizi kısıtlamanıza olanak tanıyan ve uygulamanızın kullanıcıları tarafından görünmeyen dikey veya yatay bir kılavuz çizgisi ekleyebilirsiniz. Kılavuzu, düzenin kenarına göre dp birimlerine veya yüzdeye göre düzenin içinde konumlandırabilirsiniz.

Kılavuz oluşturmak için araç çubuğunda Kılavuzlar'ı tıklayın, ardından Dikey Kılavuz Ekle veya Yatay Kılavuz Ekle'yi tıklayın.

Noktalı çizgiyi sürükleyerek yeniden konumlandırın ve ölçüm modunu değiştirmek için kılavuz çizginin kenarındaki daireyi tıklayın.

Şekil 12. Bir kılavuza göre kısıtlanmış görünüm.

Bir bariyerle sınırlama

Bir kılavuza benzer şekilde, bariyer de görünümleri sınırlayabileceğiniz görünmez bir çizgidir. Ancak bariyer kendi konumunu tanımlamaz. Bunun yerine, bariyerin konumu, içerdiği görünümlerin konumuna göre değişir. Bu, bir görünümü belirli bir görünümle değil, bir görünüm grubuyla sınırlandırmak istediğinizde yararlı olur.

Örneğin, Şekil 13'te C görünümü bir bariyerin sağ tarafıyla sınırlıdır. Engel, hem A görünümünün hem de B görünümünün "sonuna" (soldan sağa düzende sağ tarafa) ayarlanır. Görünüm A'nın veya görünüm B'nin sağ tarafının en sağda olmasına bağlı olarak bariyer hareket eder.

Engel oluşturmak için aşağıdaki adımları uygulayın:

1. Araç çubuğunda Kılavuzlar'ı ve ardından Dikey Bariyer Ekle veya Yatay Bariyer Ekle'yi tıklayın.
2. Bileşen Ağacı penceresinde, bariyerin içinde olmasını istediğiniz görünümleri seçin ve bariyer bileşenine sürükleyin.
3. Bileşen Ağacı'ndan bariyeri seçin, Özellikler penceresini açın ve barrierDirection'ı ayarlayın.

Artık başka bir görünümden bariyer için kısıtlama oluşturabilirsiniz.

Ayrıca, bariyerin içindeki görünümleri bariyerle sınırlayabilirsiniz. Bu sayede, hangi görünümün en uzun veya en yüksek olduğunu bilmeseniz bile bariyerdeki tüm görünümleri birbirine göre hizalayabilirsiniz.

Ayrıca, bariyerin "minimum" konumunu sağlamak için bariyerin içine bir kılavuz da ekleyebilirsiniz.

Şekil 13. C görünümü, A ve B görünümlerinin konumuna ve boyutuna göre hareket eden bir engelle sınırlanır.

Kısıtlama önyargısını ayarlama

Bir görünümün her iki tarafına da kısıtlama eklediğinizde ve aynı boyut için görünüm boyutu "sabit" veya "içeriği sarmala" olarak ayarlandığında görünüm, varsayılan olarak% 50'lik bir önyargıyla iki kısıtlama arasında ortalanır. Önyargı kaydırma çubuğunu Özellikler penceresinde sürükleyerek veya 3. videoda gösterildiği gibi görünümü sürükleyerek önyargıyı ayarlayabilirsiniz.

Bunun yerine görünümün, kısıtlamaları karşılamak için boyutunu genişletmesini istiyorsanız boyutu "kısıtlamalara uyacak şekilde" olarak değiştirin.

Görünüm boyutunu ayarlama

Şekil 14. Bir görünüm seçtiğinizde Özellikler penceresinde 1 boyut oranı, 2 kısıtlamaları silme, 3 yükseklik veya genişlik modu, 4 kenar boşlukları ve 5 kısıtlama eğilimi ile ilgili kontroller yer alır. Ayrıca, 6 kısıtlama listesinde tıklayarak Layout Editor'daki kısıtlamaları tek tek de vurgulayabilirsiniz.

Köşe tutamaçlarını kullanarak bir görünümü yeniden boyutlandırabilirsiniz ancak bu durumda boyut sabit kodlanır. Görünüm, farklı içerik veya ekran boyutları için yeniden boyutlandırılmaz. Farklı bir boyutlandırma modu seçmek için bir görünümü tıklayın ve düzenleyicinin sağ tarafındaki Özellikler penceresini açın.

Özellikler penceresinin üst kısmına yakın bir yerde, Şekil 14'te gösterildiği gibi çeşitli düzen özelliklerinin kontrollerini içeren görünüm inceleyici bulunur. Bu özellik yalnızca sınırlama düzenindeki görünümler için kullanılabilir.

Yükseklik ve genişliğin hesaplanma şeklini, Şekil 14'te açıklama metni 3 ile belirtilen simgeleri tıklayarak değiştirebilirsiniz. Bu semboller, boyut modunu aşağıdaki şekilde gösterir. Bu ayarlar arasında geçiş yapmak için simgeyi tıklayın:

• Sabit: Aşağıdaki metin kutusunda belirli bir boyutu belirtin veya görünümü düzenleyicide yeniden boyutlandırın.
• İçeriği Sar: Görünüm, içeriğine sığacak kadar genişler.
• layout_constrainedWidth

Yatay boyutun kısıtlamalara uyması için bu değeri true olarak ayarlayın. Varsayılan olarak, WRAP_CONTENT olarak ayarlanan bir widget kısıtlamalarla sınırlanmaz.

• Eşleşme Kısıtlamaları: Görünümün kenar boşlukları dikkate alındıktan sonra, her iki taraftaki kısıtlamaları karşılamak için görünüm mümkün olduğunca genişletilir. Ancak bu davranışı aşağıdaki özellikler ve değerlerle değiştirebilirsiniz. Bu özellikler yalnızca görünüm genişliğini "kısıtlamalara uyacak şekilde" ayarladığınızda geçerli olur:
  • layout_constraintWidth_min

    Bu, görünümün minimum genişliği için dp boyutunu alır.

  • layout_constraintWidth_max

    Bu, görünümün maksimum genişliği için dp boyutunu alır.

  Ancak, verilen boyutun yalnızca bir kısıtlaması varsa görünüm, içeriğine uyacak şekilde genişler. Bu modu yükseklik veya genişlik için kullanmak boyut oranı ayarlamanıza da olanak tanır.

Boyutu oran olarak ayarlama

Şekil 15. Görünüm, yüksekliğin oranına göre genişliği olan 16:9 en boy oranına ayarlanır.

Görünüm boyutlarından en az biri "kısıtlamalara uydur" (0dp) olarak ayarlanmışsa görünüm boyutunu 16:9 gibi bir orana ayarlayabilirsiniz. Oranı etkinleştirmek için En Boy Oranı Kısıtlamasını Aç/Kapat'ı (Şekil 14'te açıklama metni 1) tıklayın ve görüntülenen girişe width:height oranını girin.

Hem genişlik hem de yükseklik "kısıtlamalarla eşleş" olarak ayarlanmışsa hangi boyutun diğerinin oranına göre belirleneceğini seçmek için En Boy Oranı Kısıtlamasını Değiştir'i tıklayabilirsiniz. Görünüm denetçisi, ilgili kenarları düz bir çizgiyle bağlayarak hangi boyutun oran olarak ayarlandığını gösterir.

Örneğin, her iki tarafı da "kısıtlamalara uydur" olarak ayarlarsanız genişliği yüksekliğin oranı olarak ayarlamak için En Boy Oranı Kısıtlamasını Değiştir'i iki kez tıklayın. Boyutun tamamı, 15. şekilde gösterildiği gibi herhangi bir şekilde tanımlanabilen görünümün yüksekliği tarafından belirlenir.

Görünüm kenar boşluklarını ayarlama

Görünümlerinizi eşit aralıklı hale getirmek için araç çubuğunda Kenar boşluğu'nu tıklayarak düzeninize eklediğiniz her görünüm için varsayılan kenar boşluğunu seçin. Varsayılan kenar boşluğunda yaptığınız değişiklikler yalnızca o andan itibaren eklediğiniz görünümler için geçerli olur.

Her bir kısıtlamayı temsil eden satırdaki sayıyı tıklayarak Özellikler penceresinde her görünümün kenar boşluğunu kontrol edebilirsiniz. Şekil 14'te, 4 numaralı açıklama metninde alt kenar boşluğunun 16 dp olarak ayarlandığı gösterilmektedir.

Şekil 16. Araç çubuğundaki Kenar Boşluğu düğmesi.

Aracın sunduğu tüm kenar boşlukları, görünümlerinizin Material Design'ın 8 dp kare ızgara önerileriyle uyumlu olmasına yardımcı olmak için 8 dp'nin katlarıdır.

Zincirle doğrusal grupları kontrol etme

Şekil 17. İki görünüm içeren yatay zincir.

Zincir, birbirine çift yönlü konum kısıtlamalarıyla bağlı görünümler grubudur. Bir zincirdeki görünümler dikey veya yatay olarak dağıtılabilir.

Şekil 18. Her zincir stiline ilişkin örnekler.

Zincirler aşağıdaki şekillerden biriyle stilize edilebilir:

1. Yayma: Görüntülemeler, kenar boşlukları dikkate alındıktan sonra eşit şekilde dağıtılır. Bu, varsayılan seçenektir.
2. İçeride yay: İlk ve son görünümler zincirin her iki ucundaki kısıtlamalara sabitlenir, geri kalanlar ise eşit şekilde dağıtılır.
3. Ağırlıklı: Zincir yayma veya içeride yayma olarak ayarlandığında, bir veya daha fazla görünümü "kısıtlamalara uyacak şekilde" (0dp) ayarlayarak kalan alanı doldurabilirsiniz. Varsayılan olarak, alan "kısıtlamalara uyacak şekilde" ayarlanmış her görünüm arasında eşit şekilde dağıtılır. Ancak layout_constraintHorizontal_weight ve layout_constraintVertical_weight özelliklerini kullanarak her görünüme önem ağırlığı atayabilirsiniz. Bu, doğrusal düzende layout_weight ile aynı şekilde çalışır: En yüksek ağırlık değerine sahip görünüm en fazla alanı alır ve aynı ağırlığa sahip görünümler aynı miktarda alan alır.
4. Paketlenmiş: Görüntülemeler, kenar boşlukları dikkate alındıktan sonra birlikte paketlenir. Zincirin "baş" görünüm önyargısını değiştirerek zincirin tamamının önyargısını (sola veya sağa ya da yukarı veya aşağı) ayarlayabilirsiniz.

Yatay bir zincirdeki en soldaki görünüm (soldan sağa düzende) ve dikey bir zincirdeki en üstteki görünüm olan zincirin "baş" görünümü, zincirin XML'deki stilini tanımlar. Ancak zincirdeki herhangi bir görünümü seçip görünümün altında görünen zincir düğmesini tıklayarak yayılmış, içeride yayılmış ve paketlenmiş görünümleri arasında geçiş yapabilirsiniz.

Bir zincir oluşturmak için 4. videoda gösterildiği gibi aşağıdakileri yapın:

1. Zincire dahil edilecek tüm görünümleri seçin.
2. Görünümlerden birini sağ tıklayın.
3. Zincirler'i seçin.
4. Yatay Olarak Ortala veya Dikey Olarak Ortala'yı seçin.

Zincirleri kullanırken dikkat etmeniz gereken birkaç nokta:

• Bir görünüm hem yatay hem de dikey zincirin parçası olabilir. Bu sayede esnek ızgara düzenleri oluşturabilirsiniz.
• Bir zincir yalnızca zincirin her iki ucu da Şekil 14'te gösterildiği gibi aynı eksendeki başka bir nesneyle sınırlandırılmışsa düzgün şekilde çalışır.
• Zincirin yönü dikey veya yatay olsa da birini kullanmak görünümleri bu yönde hizalamaz. Zincirdeki her görünümün doğru konuma ulaşması için hizalama kısıtlamaları gibi başka kısıtlamalar ekleyin.

Kısıtlamaları otomatik olarak oluşturma

Görünümleri düzene yerleştirirken her görünüme kısıtlama eklemek yerine, her görünümü Layout Editor'da istediğiniz konumlara taşıyabilir ve ardından Kısıtlamaları Çıkar'ı tıklayarak kısıtlamaları otomatik olarak oluşturabilirsiniz.

Infer Constraints, tüm görünümler için en etkili kısıtlama grubunu belirlemek üzere düzeni tarar. Esneklik sağlarken görünümleri mevcut konumlarıyla sınırlar. Düzenin farklı ekran boyutları ve yönlerinde istediğiniz gibi yanıt vermesi için ayarlamalar yapmanız gerekebilir.

Ebeveyne otomatik bağlanma, etkinleştirebileceğiniz ayrı bir özelliktir. Etkinleştirildiğinde ve bir ebeveyne alt görünümler eklediğinizde bu özellik, görünümleri düzene eklerken her görünüm için otomatik olarak iki veya daha fazla kısıtlama oluşturur. Ancak bu yalnızca görünümü ebeveyn düzeniyle kısıtlamak uygun olduğunda geçerlidir. Otomatik bağlantı, düzendeki diğer görünümler için kısıtlamalar oluşturmaz.

Otomatik bağlanma özelliği varsayılan olarak devre dışıdır. Düzen Düzenleyici araç çubuğunda Enable Autoconnection to Parent'ı (Üst öğeye otomatik bağlantıyı etkinleştir) tıklayarak etkinleştirin.

Animasyon kareli animasyonlar

ConstraintLayout içinde, ConstraintSet ve TransitionManager kullanarak öğelerin boyut ve konum değişikliklerine animasyon uygulayabilirsiniz.

ConstraintSet, bir ConstraintLayout içindeki tüm alt öğelerin kısıtlamalarını, kenar boşluklarını ve dolgularını temsil eden basit bir nesnedir. Bir ConstraintSet, ConstraintLayout öğesine uygulandığında düzen, tüm alt öğelerinin kısıtlamalarını günceller.

ConstraintSet kullanarak animasyon oluşturmak için animasyonun başlangıç ve bitiş animasyon kareleri olarak işlev gören iki düzen dosyası belirtin. Ardından ikinci animasyon karesi dosyasından bir ConstraintSet yükleyip görüntülenen ConstraintLayout'ye uygulayabilirsiniz.

Aşağıdaki kod örneğinde, tek bir düğmeyi ekranın altına taşıma işleminin nasıl animasyonla gösterileceği açıklanmaktadır.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

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

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

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

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ek kaynaklar

ConstraintLayout, Sunflower demo uygulamasında kullanılır.