Menu
I have been using ConstraintLayout for a while and so far have been liking it but have run into a problem of layout alignment. Here is what I have:
You see the TextView having text Requested time, I want that this view always aligns below the LinearLayout(that is above it) as well as below the Rating bar on the right. For that I have anchored its upper anchor point to the LinearLayout but there seems to be no way that I can constrain it to be aligned below the rating bar on the right. I mean, I can only put one constraint per edge right?
Note that, I also cannot make any assumption about the height of LinearLayout being always greater than or less than that of (image view + rating bar)'s. Therefore, the view that is more in depth of the two shall be the determinant of the ultimate position of the Requested time TextView
For your reference, here the layout file of the above:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:background="@color/lightGrey"
android:id="@+id/constraintLayout">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="@+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="@string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tutor_name"/>
<TextView
android:text="@string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="@+id/skill_set"/>
<TextView
android:text="@string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="@+id/tutor_types" />
<TextView
android:text="@string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:id="@+id/display_pic"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@android:color/holo_red_light" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tutor_rating"
android:layout_below="@+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="@color/colorAccent"
app:srb_fillColor="@color/colorPrimary"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
app:layout_constraintRight_toRightOf="@+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/display_pic"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
<TextView
android:id="@+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
tools:layout_editor_absoluteX="30dp"
android:layout_marginTop="47dp"
app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</android.support.constraint.ConstraintLayout>
A semi-solution that I tried and worked(not really though):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
android:background="@color/lightGrey">
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:paddingBottom="10dp"
android:elevation="2dp"
android:id="@+id/constraintLayout">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="@+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="@string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tutor_name"/>
<TextView
android:text="@string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="@+id/skill_set"/>
<TextView
android:text="@string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="@+id/tutor_types" />
<TextView
android:text="@string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:id="@+id/display_pic"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@android:color/holo_red_light" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tutor_rating"
android:layout_below="@+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="@color/colorAccent"
app:srb_fillColor="@color/colorPrimary"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
app:layout_constraintRight_toRightOf="@+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@+id/display_pic"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="@+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="@+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginStart="32dp"
android:layout_marginBottom="8dp"
android:layout_below="@+id/constraintLayout" />
</RelativeLayout>
This solution has its own problems for which I posted yet another question with no answers: Color of TextView shows as white on a real device with ConstraintLayout
And, it also kind of defeats the purpose of using ConstraintLayout itself...
So, does anyone know/have solution/idea for the above problem ?
924
Can we nest a Textview inside another Textview? In Android all layout can be nested one another.
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1" .
To convert an existing layout to a constraint layout, follow these steps: Open your layout in Android Studio and click the Design tab at the bottom of the editor window. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout.
android:gravity="center" for text center in TextView. android:gravity="center_horizontal" inner text if you want horizontally centered. android:gravity="center_vertical" inner text if you want vertically centered. android:layout_centerInParent="true" if you want TextView in center position of parent view.
Here is and example a Button below 2 TextView using android.support.constraint.Barrier
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:text="TextView1 Line1\nLine2"
android:background="#f00"
/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView2 Line1\nLine2\nLine3\nLine4"
app:layout_constraintStart_toEndOf="@+id/text1"
android:background="#0ff"
/>
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="text1,text2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button below text 1 and text 2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/barrier"
android:background="#eee"
/>
</android.support.constraint.ConstraintLayout>
Note: In this example, the barrierDirection is "bottom", you can use another value for another purpose like "top", "start", "end", "left", "right"
145
A new feature in ConstraintLayout called Barrier is your answer. See this accepted answer to "ConstraintLayout with Barriers; How to constraint to bottom / top of barrier depending on size" regarding how to do this.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
