Develop Reference

constraintlayout - set a view padding depending on another view

I would like to know if I can set the title of TextView_1 to be centered of the parent view but ellipsize end against TextView_2 like picture below by using constraint layout. if the text in TextView_1 gets longer then, make it ellipsized. and below would be the case where I wanted to put "Text to be centered but ellipsize against TextView_2 when it gets longer".
what I have tried are
I programmatically tried to get the width of TextView_2 and set it to padding right of TextView_1. but failed since I wasn't able to get the width of TextView_2(I get 0) since it is set to be 0dp in constraint layout to be stretched.
I tried to find a way to set TextView_1 padding as TextView_2 size in xml file but that doesn't seem to be possible.
I have no more good idea to make it work. is there any work around for it? I will appreciate your help in advance.

You didn't post code, but I don't think you waited for the layout to occur to get the size of textView2. Here is some working code with the following XML. The code runs in the onCreateView() function of the Fragment. After layout, the width of TextView2 is set to the start/left padding of TextView1.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="Text to be centered but ellipsize against TextView_2 when it gets longer"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView2"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>
binding = DataBindingUtil.setContentView(requireActivity(), R.layout.fragment_main)
binding.root.doOnNextLayout {
binding.textView1.updatePadding(binding.textView2.width)
}

Constraint Layout's match_constraints is not working properly

I have a double constraint layout, one is the box which takes all the screen and the second one contains some views (an editTextview in particular). I want that my editText takes all the remaining space on the right, as in the photo below
I've put layout_width = 0dp to achieve this purpose, but it's not working. In fact, the editText seems to be much shorter; I still can write numbers, but they all remain in that portion of space (it shows the last 6 numbers in that part of the editText).
Moreover, when I stop typing and the keyboard disappears, all the numbers, which I've written before, expand on the right, as you can see here:
I've tried to solve the problem using layout_width = 500dp or similar, but the final result is not what I'd like to achieve. I want to be able to write numbers for ALL the line and when I reach it, the first numbers have to disappear from the view and the new written numbers have to appear on the right (I mean, it must show the last 30 characters for example).
Here is the part of the layout with the problem:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/boxEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#drawable/layout_border"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout">
<TextView
android:id="#+id/buttonPrefix"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="+39"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/boxEditText"
app:layout_constraintTop_toTopOf="parent"></TextView>
<View
android:id="#+id/verticalLine"
android:layout_width="1dp"
android:layout_height="25dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/buttonPrefix"
app:layout_constraintStart_toEndOf="#+id/buttonPrefix"
app:layout_constraintTop_toTopOf="#+id/buttonPrefix" />
<EditText
android:id="#+id/editTextPhone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/edit_text_border"
android:hint="#string/Telefono"
android:inputType="phone"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/verticalLine"
app:layout_constraintStart_toEndOf="#+id/verticalLine"
app:layout_constraintTop_toTopOf="#+id/verticalLine" />
</androidx.constraintlayout.widget.ConstraintLayout>

I'm not sure which pictures show the working and which ones show the not working examples, but i noticed this:
You forgot the end constraint:
app:layout_constraintEnd_toEndOf="parent"
And if the text overlaps your background you can probably add some padding:
android:paddingEnd="16dp"

If i have understood good, you can write
android:gravity="right"
In that way, you will start typing from the right side, and as you keep typing, the first numbers will go to the left. Now, if you want a specific number of characters to show up, you can achieve that by changing the size of the number.

How we can support different screen sizes like for background images? [Android Studio]

I'm having a problem as am newbie, I want to put my TextViews according to the background image, i did it well, all good when tested app in virtual device, But when i tested it on my real device, TextView is at some other place (slightly downwards) to what I was expecting.
Is there any way to stretch the background image so that our XML code shows same display results on all devices (with different resolutions).
I just want same design results as shown on android studio Design tab.
Example :-
i want this result on all devices
am getting this on my real device
Please guys suggest the best way to do so.
My XML Layout code :-
<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="match_parent"
android:background="#drawable/main_bg"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="245dp"
android:text="#string/app_name2"
android:textColor="#color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="#string/Admin"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/editTextTextEmailAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:background="#drawable/rounded_box"
android:backgroundTint="#android:color/white"
android:elevation="1dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:padding="9dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.39" />
<EditText
android:id="#+id/editTextTextPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="19dp"
android:layout_marginEnd="24dp"
android:ems="10"
android:hint="Password"
android:padding="9dp"
android:background="#drawable/rounded_box"
android:backgroundTint="#android:color/white"
android:elevation="1dp"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editTextTextEmailAddress" />
<Button
android:id="#+id/button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="167dp"
android:layout_marginTop="64dp"
android:layout_marginEnd="156dp"
android:text="Log In"
android:background="#drawable/rounded_corners"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPassword" />
</androidx.constraintlayout.widget.ConstraintLayout>

For this ConstraintLayout is a very good choice. how? Let's see
First, You've not provided your layout file completely so I don't know what you're doing.
Now, To position views according to any device, you should resort to scale independent solutions like using bias, setting-up different dimen values as per screen sizes and connecting widgets to each other using Constraints so they don't free float to any position when screen size changes.
Using Bias and Percent - Try to minimize use of fixed margin values like 20dp, 30dp and use Vertical/Horizontal bias, width_percent, height_percent and 0dp with it. 0dp acts as fill_contraint in ConstraintLayout.
As I can see in the pictures, you've five widgets except background, One button, Two EditTexts and two TextViews.
So, constraint button to bottom and top of parent and give it a vertical bias of 0.8 or 0.9.
As:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.8"
app:layout_constraintWidth_percent="0.4"
/>
<!--Vertical bias will place it on 80% height of the screen and width_percent will
assign it 40% width of the screen. This will remain same in any size of the screen.-->
Now, Constraint Both editTexts to the button using Bottom_toTopOf and give the second one a margin of approx 50dp. The button will always stay on 80% of the screen and both the editText will always stay above the button. And constraint the 'GK Quiz' TextView by giving it a vertical_bias of 0.4/0.45/0.5 (whatever you prefer) and constraint the second textview to its bottom.
This is how you define a layout that will stay on same place in every screen size.
Defining custom dimen.xml - For this you can check this question out. If you don't want to mess with custom values, you can resort to two easy libraries - SDP(For layout Size) and SSP(For Text Size) which provide all the custom values which stays same in every screen size. I use these libraries so I know they work well. There's a medium article on these - How to build for different Android screen sizes using a single layout resource file.
Using Constraints - Remember, the moment you use margins or x/y values to position a widget on screen, you should be aware that they can mess up in any screen size. So, you should always constraints layout with each other to create a tight pack preventing the free flow of the layout elements. By free flow, I mean the different positions on screen in different sizes.
ConstraintLayout is most powerful layout available out there I believe and it has many ways to tackle the issues of different screen sizes. It also supports Animation using its subclass MotionLayout. Read these official docs, you'll learn more.

instead of this use a framelayout and put imageview in it with height and width of match parent and use gravity center. use gravity center for image view.

Position text inside button vertically - reduce margin?

I am having trouble formatting the text inside my button. I have tried reducing the margins and padding and using gravity, but I still seem to have a some kind of margin around the text inside the button.
I have currently positioned the text in top, but as you see it stays very low and even goes out of the button.
Here is the code I use:
<Button
android:id="#+id/counterValue"
android:layout_width="283dp"
android:layout_height="144dp"
android:layout_marginStart="24dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:onClick="countIN"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:minHeight="0dp"
android:minWidth="0dp"
android:gravity="top|center"
android:text="0"
android:textSize="140dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
As you see, the big 0 is at the very bottom of the box. I would like it to be right in the middle and with very small margins.
Any ideas of what am I missing in my code?

I suggest you change the text size from "dp" to "sp" as in 140dp. If you want to keep this size tho, you might want to change the size for your button
The line in problem is:
android:textSize="140dp"

You only have to change the Button's height to wrap_content:
android:layout_height="wrap_content"
You can't have fixed height for the Button and fixed textSize and expect the text to be centered correctly.
Edit
Set this attribute:
android:includeFontPadding = "false"

Android TextView SingleLine field hides long text

I have a TextView which sits on the left side of the screen and is set with gravity="right" and it is set with SingleLine = "true."
If by some chance the text in this view gets too long I want it to simply disappear off the left hand side of the view. I thought the configuration below would do that but what actually happens is the the long string disappears completely, presumably down and outside of the view somewhere.
How can I create a simple text view that contains a single line of text and keeps its layout even when something unexpected happens? ... or even something predictable.
<TextView
android:id="#+id/tempF"
android:text="#string/tempF"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:textColor="#cccccc"
android:textStyle="bold"
android:textSize="92dp"
android:fontFamily="serif"
android:gravity="right"
android:layout_marginTop="60dp"
android:layout_gravity="top|left"
android:singleLine="true"
/>

This is the purpose of "ellipsize" - truncating a portion of text to indicate additional text.
In you case, you may simply need to add something like:
android:ellipsize="end"
or you might need to go deeper:
Automatically ellipsize a string in Java
Or look at this:
android ellipsize multiline textview
The idea behind extending the class is that you can customize the behavior of the TextView when the text content exceeds the space provided. For example, you can give it the appearance the it "bleeds over" by removing padding, etc. An ellipsis is an indicator that is commonly used to explain "there's more text that you can't see" - this is how it would look:
This is really a really long...
(the 3 periods are the ellipsis - your text goes the opposite direction, but it should still work)
With a custom TextView, you could change the "..." to nothing or anything else you want (even an image, which I've done).
You could also marquee the text:
TextView Marquee not working

Add 2 properties in xml
android:singleLine="true"
android:ellipsize="end"

You should play with ellipsize attribute of the TextView.Check below:
<TextView
android:id="#+id/tempF"
android:text="#string/tempF"
android:layout_width="146dp"
android:layout_height="wrap_content"
android:textColor="#cccccc"
android:textStyle="bold"
android:textSize="92dp"
android:fontFamily="serif"
android:gravity="right"
android:layout_marginTop="60dp"
android:layout_gravity="top|left"
android:singleLine="true"
android:ellipsize="end"
/>

<TextView
android:id="#+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorGray"
android:textSize="#dimen/_18dp"
android:padding="#dimen/_2dp"
android:singleLine="true"
android:ellipsize="end"
android:text="#string/desc" />

Since android:singleLine is deprecated. We can use this line android:maxLines
Can do like this.
android:ellipsize="end"
android:maxLines="1"

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
It works.