I have a layout with textviews.
Whenever I use Left to Right locale OR remove the android:hint elements, it works properly. However, in RTL (Hebrew locale) with LTR value (English text) and gravity="start" or "end" it just pushes the text into a hint sized text view in the wrong direction. Maybe it will be clearer with examples:
LTR locale and text:
RTL locale and LTR text with hints - here the "Data A" field with gravity "end" pushes it to the right instead of left because it is English. "Data B" has gravity "start" so it is the same case, only reversed:
the hints are an important issue because when I remove them, then wrap_content will shrink the view and the layout constraints do their job and it shows up correctly even in RTL
Here is the same example with android:hints removed:
LTR layout editor:
basically, my question is how to make the gravity of a textview always work towards the end or the start of the locale, and not the language of the text
<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"
style="#style/LogEntryListViewItemStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"><!--TODO-->
<ImageView
android:id="#+id/LogEntryListSelectedFieldField"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Number"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/LogEntryListSelectedFieldField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/DataB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="start"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/LogEntryListItemDateTimeField"
style="#style/LogEntryListItemDateStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="end"
app:layout_constraintEnd_toStartOf="#+id/LogEntryListSignedField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/LogEntryListItemAircraftField"
style="#style/DataA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
app:layout_constraintStart_toStartOf="#+id/DataB"
app:layout_constraintTop_toBottomOf="#+id/DataB" />
<TextView
android:id="#+id/DataA"
style="#style/LogEntryListItemAircraftNameStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/LogEntryListItemDateTimeField" />
<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="LogEntryListItemAircraftField, DataA" />
<TextView
android:id="#+id/LogEntryListItemNotesField"
style="#style/LogEntryListItemNotesStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="(Notes)"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/DataB"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<ImageView
android:id="#+id/LogEntryListSignedField"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="center"
android:src="#drawable/ic_menu_edit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I have checked it on my device and it's working alright. Please check and see how it works out.
<?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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false">
<ImageView
android:id="#+id/LogEntryListSelectedFieldField"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Number"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="center"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="20"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/LogEntryListSelectedFieldField"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/DataB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Data B"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toEndOf="#+id/Number" />
<TextView
android:id="#+id/LogEntryListItemDateTimeField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end|center_vertical"
android:text="Hercules (C-130)"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/LogEntryListSignedField"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/LogEntryListItemNotesField"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/LogEntryListItemAircraftField"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Hercules (C-130)"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toBottomOf="#+id/DataB" />
<TextView
android:id="#+id/DataA"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end|center"
android:text="Data A"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintStart_toStartOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintTop_toBottomOf="#+id/LogEntryListItemDateTimeField" />
<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="LogEntryListItemAircraftField, DataA" />
<TextView
android:id="#+id/LogEntryListItemNotesField"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:hint="the hints are an important issue because when I remove them, then wrap_content will shrink the view and the layout constraints do their job and it shows up correctly even in RTL"
android:maxLines="2"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/LogEntryListItemDateTimeField"
app:layout_constraintStart_toEndOf="#+id/Number"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<ImageView
android:id="#+id/LogEntryListSignedField"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="center"
android:src="#drawable/ic_menu_edit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Related
I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.
Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.
I am stuck with ConstraintLayout and confused to use which property to do as I want.
As per the following image, I wanted to give top-constraint of Details to either TextView of OrderTakenBy or OrderCollectedBy as per the height of that view.
Scenario:
If I give top constraint of Detail view as the bottom of OrderTakenBy TextView, It will overlap (as below image) the view of OrderCollectedBy Textview if it gets more lines. Vice versa.
Note: Order Taken By or Order Collected By may contain two or three lines.
So what can I do for top constraints which can work for both dynamic heights?
Edited:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.AccountMasterAddActivity"
tools:showIn="#layout/activity_account_master_add">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_no"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/supplierNameTextView"
app:layout_constraintTop_toBottomOf="#+id/supplierNameTextView" />
<TextView
android:id="#+id/orderNoTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="#string/hint_supplier_name"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/supplierNameTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:gravity="end"
android:text="#string/hint_order_date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/supplierNameTextView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/orderDateTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6"
tools:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_taken_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/orderNoTextView"
app:layout_constraintTop_toBottomOf="#+id/orderNoTextView" />
<TextView
android:id="#+id/orderTakenByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="TextView TextView"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="#string/hint_order_collected_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderDateTextView"
app:layout_constraintStart_toStartOf="#+id/orderDateTextView"
app:layout_constraintTop_toTopOf="#+id/textView8" />
<TextView
android:id="#+id/orderCollectedByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10"
tools:text="TextView TextView TextView TextView TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/hint_details"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderCollectedByTextView"
app:layout_constraintStart_toStartOf="#+id/orderTakenByTextView"
app:layout_constraintTop_toBottomOf="#+id/orderCollectedByTextView" />
<TextView
android:id="#+id/detailsTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:autoLink="phone"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView12"
app:layout_constraintTop_toBottomOf="#+id/textView12"
tools:text="TextView" />
<TextView
android:id="#+id/productLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Products"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/detailsTextView"
app:layout_constraintStart_toStartOf="#+id/detailsTextView"
app:layout_constraintTop_toBottomOf="#+id/detailsTextView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/productLabel"
app:layout_constraintStart_toStartOf="#+id/productLabel"
app:layout_constraintTop_toBottomOf="#+id/productLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>
Anyone can help?
You can use the Barrier To overcome this issue.
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.
Here is the Documentation for Barrier
Add Order Taken By or Order Collected By as app:constraint_referenced_ids="view1,view2" and set the Detail view top to the bottom of the Barrie.
XML Reference:
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="411dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="order_taken_by,order_collected_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="21dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New"
android:textSize="#dimen/_16sp"
app:layout_constraintTop_toBottomOf="#+id/barrier"/>
Here is the output:
Use bottom barrier
Use Deatils textview top constraint to barrier and barrier reference to OrderTakenBy, OrderCollectedBy textview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/OrderTakenBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse sdgjklsdj jgkjskg"
app:layout_constraintEnd_toStartOf="#+id/OrderCollectedBy"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/OrderCollectedBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospital fhkhsf "
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OrderTakenBy"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="OrderCollectedBy, OrderTakenBy" />
<TextView
android:id="#+id/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="lorem_ipsum"
android:gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think you can wrap order taken by and order collected by in another constraint layout or to check programmatically the height(after setting the text) of the TextView's and change programmatically the top constraint.
I have a problem with the following xml file:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/search_list_leaf"
tools:context=".Flowers_List">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:text="A"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="56dp" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="112dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
tools:layout_editor_absoluteX="32dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="179dp" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="D"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="241dp" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="E"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="310dp" />
The problem is that, even if I change color with the command android:textColor="#color/colorIwant" I get a default color which is green (don't know why) when I run the application, while I have the right color in the design. Another problem is that even if I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
What do you think the problem is about?
I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
That's because you have not put necessary constraint to child TextViews, but the absolute positions.
I tried to solve this issue, see below xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="A"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="B"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/A" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="C"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/B" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="D"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/C" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="E"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/D"
app:layout_constraintVertical_bias="0.0" />
As you can see, each child TextView is now constrained both sides--vertically and horizontally to the parent, that is the rootview-constraintlayout or other child view.
For example, the constraint constraintEnd_toEndOf will align the end of this view to end of another view. Same way, other constraints work and are applied.
You can also give horizontal and vertical bias to position them properly. Hope this helped a little to understand how constraint works.
for order https://stackoverflow.com/a/50855782/7616371 this is correct
and for change textColor you can use :-
android:textColor="#fff"
and for textview background color
android:background="#fff"
I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?
Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<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:id="#+id/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above:
I have very simple layout, which can be replaced with one RelativeLayout which always work. However wherever I put margins they are ignored and no, I don't want to use padding and no, chain also doesn't fix the problem. Any idea?
For example margins on date or manufacturer are ignored as well as others.
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="?attr/szykColorSecondary"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="left"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
style="?attr/szyk_textBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/model"
app:layout_constraintTop_toBottomOf="#+id/date" />
<TextView
android:id="#+id/model"
style="?attr/szyk_textBody"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/manufacturer"
app:layout_constraintLeft_toRightOf="#+id/manufacturer"
app:layout_constraintRight_toLeftOf="#+id/delete"
app:layout_constraintTop_toTopOf="#+id/manufacturer" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vector_delete"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/serial"
style="?attr/szyk_textMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/manufacturer" />
<TextView
android:id="#+id/restore"
style="?attr/szyk_textButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/restore"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Version
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Tools
compileSdkVersion 27
buildToolsVersion '27.0.2'
Sorry, my bad. The root cause of the issue was style I've been using. It had defined android:layout_margin, which overrides all the more specific margins such as android:layout_marginTop
<item name="android:layout_margin">2dp</item>
Some times preview shown result layout incorrect. However your date TextView does not contain any mention about bottom position so system don't know from what exactly position you wanna margin.
Try this edited xml.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:cardBackgroundColor="#color/white_transparent_50"
app:cardCornerRadius="8dp"
app:cardElevation="4dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="16.12.2014"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/manufacturer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:paddingRight="8dp"
android:text="Samsung"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/date" />
<TextView
android:id="#+id/model"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:text="S6 edge"
android:textAllCaps="true"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#id/manufacturer"
app:layout_constraintLeft_toRightOf="#id/manufacturer"
app:layout_constraintRight_toLeftOf="#id/delete"
app:layout_constraintTop_toTopOf="#id/manufacturer" />
<TextView
android:id="#+id/serial"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="FDSF6D7A8FDAS6F7D89AS"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/manufacturer" />
<TextView
android:id="#+id/restore"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="123123123"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/serial" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>