How to match two element horizontally in Constraint Layout?

Question

I want to match two Views (A Button and A TextView) who's backgrounds are not complete rectangle. these to shapes are :

Left Background
LeftBackground

RightBackground

Can any one help me so I can put them together like this one: Grouped

xml code for these two shape are here: Right Shape:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="134dp"
    android:height="84dp"
    android:viewportWidth="134"
    android:viewportHeight="84">
  <path
      android:pathData="M24,2.06981099e-11 L110,0 C123.254834,-2.48646561e-12 134,10.745166 134,24 L134,60 C134,73.254834 123.254834,84 110,84 L0,84 L24,2.06981099e-11 Z"
      android:strokeWidth="1"
      android:fillColor="#FFD949"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

Left Shape:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="234dp"
    android:height="84dp"
    android:viewportWidth="234"
    android:viewportHeight="84">
  <path
      android:pathData="M24,0L234,0L210,84L24,84C10.745,84 0,73.255     0,60L0,24C-0,10.745 10.745,0 24,0Z"
      android:strokeWidth="1"
      android:fillColor="#FFCD0D"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

can you update your question with the layou.xml that you are using? — Sagar, May 11 '18 at 08:13
You should put your solution as an answer and vote it as correct answer. — Anthony Cannon, May 14 '18 at 08:15

score 1 · Answer 1 · answered May 11 '18 at 08:24

1

If you are trying to achieve a negative margin to overlap both views and make their backgrounds together, try this solution: How to achieve overlap/negative margin on Constraint Layout?

answered May 11 '18 at 08:24

DAA

1,346
2
11
19

Thanks to your answer and some effort now I'm done. I will put my solution to my Answer. – MohammadReza Hosseini May 11 '18 at 09:31

score 0 · Accepted Answer · answered May 14 '18 at 08:18

This Code should work Correctly! It Worked for me.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="358dp"
    android:layout_height="84dp"
    android:layout_gravity="center_horizontal">

    <Button
        android:id="@+id/lb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@drawable/left_shape"
        android:text="LB"
        android:textSize="70sp"
        android:gravity="center"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/lb"
        app:layout_constraintLeft_toRightOf="@+id/lb" />

    <TextView
        android:id="@+id/rt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/right_shape"
        android:gravity="center"
        android:textSize="38sp"
        android:layout_marginStart="85dp"
        app:layout_constraintLeft_toLeftOf="@id/marginSpacer"
        app:layout_constraintRight_toRightOf="@id/marginSpacer"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer"
        android:text="RT"/>

</android.support.constraint.ConstraintLayout>

score 0 · Answer 3 · answered May 14 '18 at 08:30

this layout make all device same there for you need to add below dependecy in app level gradle file..

    implementation 'com.intuit.sdp:sdp-android:1.0.4'

then after make below code for layout it same all the device..

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="@dimen/_300sdp"
android:layout_height="@dimen/_70sdp"
android:layout_margin="@dimen/_10sdp"
android:layout_gravity="center_horizontal">

<Button
    android:id="@+id/lb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_32sdp"
    android:background="@drawable/left_side"
    android:textSize="@dimen/_20sdp"
    android:gravity="center"
    android:text="left"
    android:textAllCaps="false"
    app:layout_constraintHorizontal_chainStyle="packed" />

<android.support.v4.widget.Space
    android:id="@+id/marginSpacer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@id/lb"
    app:layout_constraintLeft_toRightOf="@+id/lb" />

<TextView
    android:id="@+id/rtTvData"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/right_side"
    android:gravity="center"
    android:textSize="@dimen/_20sdp"
    android:layout_marginStart="@dimen/_70sdp"
    app:layout_constraintLeft_toLeftOf="@id/marginSpacer"
    app:layout_constraintRight_toRightOf="@id/marginSpacer"
    app:layout_constraintTop_toBottomOf="@+id/marginSpacer"
    android:text="Right"
    />
</android.support.constraint.ConstraintLayout>

How to match two element horizontally in Constraint Layout?

3 Answers3