Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make Constraint Layout Guideline in center

I have 3 Guideline in Constraint Layout. One is in left with 16dpleft margin. Second is in right with 16dp right margin. But I want another Guideline which will be in center. Suppose If I make this guideline center in nexus 5 from Android Stdio XML design panel then in nexus S it's not showing in center. How to solve this?

 <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blabla.ScrollingActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_end="16dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="16dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="180dp"/>
 </android.support.constraint.ConstraintLayout>
like image 419
Yeahia2508 Avatar asked Nov 04 '17 16:11

Yeahia2508


People also ask

How is guideline used in constraint layout?

There are two types of guidelines: Now we can position guidelines in three different ways: By using (layout_constraintGuide_begin) to specify a fixed distance from the left or the top of a layout. By using (layout_constraintGuide_end) to specify a fixed distance from the right or the bottom of a layout.

What is the barrier and guideline in the constraint layout?

A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.


3 Answers

We can set a guideline using percentage by using the tag

app:layout_constraintGuide_percent="0.5"

where 0.5 (50%) being a float value between 0 to 1

like image 76
Manav Jain Avatar answered Oct 16 '22 13:10

Manav Jain


Point to note is the guideline gets rendered erratically on the design screen . Using the app:layout_constraintGuide_percent="0.5" is enough to align it in the middle

<androidx.constraintlayout.widget.Guideline
app:layout_constraintGuide_percent="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
like image 3
Narendra_Nath Avatar answered Oct 16 '22 12:10

Narendra_Nath


In Kotlin:

    // Create constraint layout (maybe you have this already)
    val buttonLayout = ConstraintLayout(context)
    buttonLayout.id = View.generateViewId()

    // Create guideline
    val centerGuideline = Guideline(context)
    centerGuideline.id = View.generateViewId()

    // We want a vertical guideline, 50% across the width
    val centerParams = ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.MATCH_PARENT)
    centerParams.guidePercent = 0.5f
    centerParams.orientation = ConstraintLayout.LayoutParams.VERTICAL

    // Add guideline to layout.
    buttonLayout.addView(centerGuideline, centerParams)

Now you can update a ConstraintSet and connect to the guideline's id. For example, to have someView start 7dp to the right of center:

    connect(someView.id, ConstraintSet.START, centerGuideline.id, ConstraintSet.START, dpToPx(context, 7))

Where dpToPx is whatever your project uses to convert device units to pixels.

like image 1
Graham Perks Avatar answered Oct 16 '22 12:10

Graham Perks