How can i center a view in a guideline?
You need to constraint both the top and the bottom of the View to the guideline, like so:
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="@id/guideline"
app:layout_constraintBottom_toBottomOf="@id/guideline" />
Using fix width or height
Need to use same Guideline
for both top and bottom constraint like:
app:layout_constraintTop_toTopOf="@id/guideline_30"
app:layout_constraintBottom_toBottomOf="@id/guideline_30"
xml:
<android.support.constraint.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">
<ImageView
android:id="@+id/imgLogo"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintTop_toTopOf="@id/guideline_30"
app:layout_constraintBottom_toBottomOf="@id/guideline_30"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/splash_logo" />
<android.support.constraint.Guideline
android:id="@+id/guideline_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.30" />
</android.support.constraint.ConstraintLayout>
output:
Using width and height based on the ratio
- As you are using both width and height based on ratio so that it's not centered.
- But to get your desired result you can also set
Guideline = 0.15
(0.3 / 2) and modifyconstraintTop
andconstraintBotttom
xml:
<android.support.constraint.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">
<ImageView
android:id="@+id/imgLogo"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toStartOf="@+id/guidelineV_75"
app:layout_constraintStart_toEndOf="@+id/guidelineV_25"
app:layout_constraintTop_toTopOf="@+id/guideline_15"
app:srcCompat="@drawable/ic_launcher_background" />
<android.support.constraint.Guideline
android:id="@+id/guideline_15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV_25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="@+id/guidelineV_75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>
output:
In ConstraintLayout, for centering the View over Vertical axis of any other View Component (e.g. Guidelines, TextViews, ImageViews, layouts, etc.), you can simply follow these two steps, in XML:-
1) app:layout_constraintTop_toTopOf="@id/componentId"
2) app:layout_constraintBottom_toBottomOf="@id/componentId"
This will Equally distribute the component's View in the Vertical center.
BONUS:-
For centering the View in the Horizontal axis, use
1) app:layout_constraintLeft_toLeftOf="@id/componentId"
or
app:layout_constraintStart_toStartOf="@id/componentId"
2) app:layout_constraintRight_toRightOf="@id/componentId"
or
app:layout_constraintEnd_toEndeOf="@id/componentId"