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:

enter image description here

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 modify constraintTop and constraintBotttom

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:

enter image description here


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"