Klarifikasi: Jawaban di bawah ini tetap valid, tetapi saya ingin mengklarifikasi beberapa hal. Solusi asli akan menempatkan tampilan dengan ofset negatif de facto sehubungan dengan tampilan lain seperti yang dinyatakan dan akan muncul dalam tata letak seperti yang ditunjukkan.
Solusi lain adalah dengan menggunakan properti translationY seperti yang disarankan oleh Amir Khorsandi di sini . Saya lebih suka solusi yang lebih sederhana dengan satu peringatan: Terjemahan terjadi pasca-tata letak , sehingga tampilan yang dibatasi ke tampilan yang dipindahkan tidak akan mengikuti terjemahan.
Misalnya, XML berikut menampilkan dua TextView tepat di bawah gambar. Setiap tampilan dibatasi dari atas ke bawah dengan tampilan yang muncul tepat di atasnya.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:tint="#388E3C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_action_droid" />
<TextView
android:id="@+id/sayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say my name."
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/imageView" />
<TextView
android:id="@+id/sayIt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say it."
android:textAppearance="@style/TextAppearance.AppCompat.Large"
app:layout_constraintEnd_toEndOf="@+id/sayName"
app:layout_constraintStart_toStartOf="@+id/sayName"
app:layout_constraintTop_toBottomOf="@id/sayName" />
</androidx.constraintlayout.widget.ConstraintLayout>
Sekarang, mari kita menerjemahkan "Katakanlah nama saya" TextView oleh 50dpdengan menentukan
android:translationY="-50dp"
Ini menghasilkan yang berikut:
TextView "Say my name" telah bergeser ke atas seperti yang diharapkan, tetapi TextView "Say it" tidak mengikuti seperti yang kita harapkan. Ini karena terjemahan terjadi setelah tata letak . Meskipun tampilan berpindah tata letak pasca, itu masih bisa dibuat dapat diklik di posisi baru.
Jadi, IMO, gunakan translationX dan translationY untuk margin negatif di ConstraintLayout jika peringatan di atas tidak memengaruhi tata letak Anda; jika tidak, gunakan widget luar angkasa seperti yang dijelaskan di bawah ini.
Jawaban asli
Meskipun tampaknya margin negatif tidak akan didukung ConstraintLayout, ada cara untuk mencapai efek menggunakan alat yang tersedia dan didukung. Berikut adalah gambar di mana judul gambar tumpang tindih 22dpdari bagian bawah gambar - secara efektif menjadi -22dpmargin:
Ini dilakukan dengan menggunakan Spacewidget dengan margin bawah sama dengan offset yang Anda inginkan. The Spacewidget kemudian memiliki bagian bawahnya dibatasi untuk bagian bawah ImageView. Sekarang yang perlu Anda lakukan adalah membatasi bagian atas TextViewdengan judul gambar ke bagian bawah Spacewidget. Ini TextViewakan diposisikan di bagian bawahSpace tampilan dengan mengabaikan margin yang telah ditetapkan.
Berikut ini adalah XML yang menyelesaikan efek ini. Saya akan mencatat bahwa saya menggunakan Spacekarena ringan dan ditujukan untuk jenis penggunaan ini, tetapi saya dapat menggunakan jenis lain Viewdan membuatnya tidak terlihat. (Anda mungkin perlu melakukan penyesuaian.) Anda juga dapat menentukan a Viewdengan margin nol dan tinggi margin sisipan yang Anda inginkan, dan membatasi bagian atas TextViewke atas inset View.
Namun pendekatan lain akan melapisi bagian TextViewatas ImageViewdengan menyelaraskan bagian atas / bawah / kiri / kanan dan membuat penyesuaian yang sesuai pada margin / padding. Manfaat dari pendekatan yang ditunjukkan di bawah ini adalah bahwa margin negatif dapat dibuat tanpa banyak perhitungan. Itu semua untuk mengatakan bahwa ada beberapa cara untuk mendekati ini.
Pembaruan: Untuk diskusi singkat dan demo teknik ini, lihat posting blog Google Developers Medium .
Margin Negatif untuk ConstraintLayoutXML
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher" />
<android.support.v4.widget.Space
android:id="@+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="22dp"
app:layout_constraintBottom_toBottomOf="@+id/imageView"
app:layout_constraintLeft_toLeftOf="@id/imageView"
app:layout_constraintRight_toRightOf="@id/imageView" />
<TextView
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say my name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
