Textview AutoSizing of RecyclerView in Android - android

I've had weird experience when i scroll the RecyclerView.
There is a item_layout for the RecyclerView's item.
The item layout xml consists of 3 Textview and 1 ConstraintLayout.
the rootview is ConstriantLayout.
please check this image.
All the TextView's layout_height is wrap_content and layout_width is 0dp(match_constraint) but basically TextView autosize doesn't work correctly when the view's layout_height is wrap_content.
so everytime i scroll the RecyclerView, the TextView3's characters become smaller and then get back to the maxSize.
so i changed the layout_height of TextView3 into 0dp(match_constrarint). it worked fine.
but the reason why i ask is TextView1 and TextView2 works fine even though they still have wrap_content.
how does it work???
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/TextView2"
app:layout_constraintRight_toLeftOf="#id/TextView3"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
android:textSize="#dimen/detail_txt_title_small"
app:autoSizeMaxTextSize="#dimen/detail_txt_title_small"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/daily_history_text_black"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textview1"
app:layout_constraintTop_toTopOf="parent" />

See this: Autosize textview is not working It seems to be normal for autoSize text to produce inconsistent results when used with wrap_content the fact that it is working is just one of those inconsistences.

Your mistake was only in the names of the textviews and here is the fix for your question:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textView1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
or you can use this way:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
/>
</LinearLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
/>
</LinearLayout>

Related

Take all free space between elements in ConstraintLayout

I need layout with three elements:
TextView1 with fixed width
TextView2 with dynamic width
One more TextView3 with fixed width
All elements must be visible on the screen at the same time.
If TextView2 contains a lot of text, the layout should be like this:
If TextView2 contains contains little text, the layout should be like this:
How can I create it using ConstraintLayout ?
Put your TextViews in a horitzontal packed chain with a bias of 1 to align them to parent's end. To make sure that the middle TextView doesn't overlap other Views and satisfies its constraints you need to set app:layout_constrainedWidth="true" attribute for it.
<?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/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="view1"/>
<TextView
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view3"
app:layout_constraintStart_toEndOf="#id/view1"
app:layout_constraintTop_toTopOf="parent"
android:text="view2"/>
<TextView
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view2"
app:layout_constraintTop_toTopOf="parent"
android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the sample code:
Take a look:
Design.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#63f542"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
Output:
You can create the view with the code below, but the only constraint is you have to give max width to centered text view
<?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:id="#+id/linearLayout17"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/hint_color">
<TextView
android:id="#+id/txt1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text1"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintEnd_toStartOf="#+id/txt2"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/txt2" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:maxWidth="200dp"
android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt3"
app:layout_constraintEnd_toStartOf="#+id/txt3"
app:layout_constraintTop_toTopOf="#+id/txt3" />
<TextView
android:id="#+id/txt3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text3"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to layout 2 textviews in a custom compound constraint layout

I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?
Current 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="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.362" />
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Actual result:
Both textviews scales, but overlaps, and are placed in the center of the constraintlayout.
The current state:
The expected result:
One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout.
Expected result: (3 different custom compounds in an activity)
you have to give top and bottom proper constraint
<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"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
It might be helpful
<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:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:gravity="center"
android:text="1"
android:textSize="50sp"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textSize="28sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</android.support.constraint.ConstraintLayout>
Textview size we have to add
Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

how to align a text view in a listView?

I am not getting proper alignment even though I constrained the textviews.My text is running over the other text which looks messy.
Here is the screenshot of that.
I want it to align properly even if the text goes some large.Please suggest some ways to do that.
Here is the code for my layout-
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/magnitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:maxWidth="135dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/date"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="May 20,2016" />
</android.support.constraint.ConstraintLayout>
The New layout that I want is in this image
You can use this library to fit text
build gradle file(app):
implementation 'me.grantland:autofittextview:0.2.+'
Usage in layout
<me.grantland.widget.AutofitTextView
android:id="#+id/question_title"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="8dp"
android:text="Post samething"
android:textAlignment="center"
android:textColor="#color/icons"
android:textStyle="bold"
android:maxLines="2"
android:textSize="30sp"
autofit:minTextSize="16sp"
/>
You can read more from this link
Hope this helps
I have re created your layout please use below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".6"
android:padding="15dp"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitude"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_weight=".2"
android:padding="5dp"
android:layout_height="wrap_content"
android:textSize="20sp"
tools:text="May 20,2016" />
</LinearLayout>
if you are working with constraint layout you can use the baseline of the text view for this purpose
Baseline alignment
Align the text baseline of a view to the text baseline of another view.
See the related section in the documentation in order to learn how to use the baseline allinment
https://developer.android.com/training/constraint-layout/#baseline

TextView Hint messes up RTL gravity

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>

Constraint Layout - Grouping together layouts in chains

I want to create a chain in constraint layout that is spread but keeping the title and the text together, without a gap between them.
I am trying to achieve the same view, but without the linear layout and instead a flat constraint layout:
<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/scrollView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.exampleapp.fragments.carousel.MainCarouselOneFragment">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/main_carousel_image_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textview1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:text="#string/text1"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_view" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="4sp"
android:text="#string/text2"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview1" />
<LinearLayout
android:id="#+id/ll_title_and_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/find_out_more_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<TextView
android:id="#+id/textView3"
style="#style/TextAppearance.Actionbar.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/text3" />
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:lineSpacingExtra="0sp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/text4"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<Button
android:id="#+id/find_out_more_btn"
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:text="#string/find_out_more"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_title_and_text" />
</android.support.constraint.ConstraintLayout>
Could you please advise me if this is possible and if so, how to do it?
If I understand correctly, you want to create the layout as per the screenshot but without using a LinearLayout. If that is the case, then this should be possible if you ignore the fact that there are view pairs when you create the vertical chains. In other words, think about the positioning of textView1, textView3 and Button first, and then worry about the positioning of textView2 and textView4.
It's a bit tricky to explain, so I have created a simple layout that should do what you need. In order to create this layout, I constrained textView1 to the imageView, and textView3 to textView1. Then I created vertical chains between textView3 and button. Finally, I constrained textView2 to textView1 and textView4 to textView3. (I assumed that you wanted textView1 directly below the image)
<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">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorPrimary" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image"
tools:text="text1" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text2" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text3" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text3"
tools:text="text4" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text3"
tools:text="More" />
This should give you something like:

Categories

Resources