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.
Related
My question is simple:If i have a text view and the text is too long,it just goes past the screen limit,how can i make it to split on multiple lines in order for it to fit in the screen
<TextView
android:id="#+id/movie_cast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/movie_image"
app:layout_constraintTop_toBottomOf="#id/movie_rating_bar"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:textColor="#color/black"
android:textSize="12sp"
tools:text="Cast: Ryan Reynolds,Dwayne Johnson,Gal Gadot"/>
And also,why does some text fit on my emulator screen and when i run the app on my phone it doesn't fit,why isn't it resizing acordingly.Look at how the text just gets out of the screen without going on the next line
Looks like you are using ConstraintLayout , instead of android:layout_width="wrap_content" use android:layout_width="0dp" and fix start and end of layout according to constraints.
add this attribute to textview
app:layout_constrainedWidth="true"
like this
<TextView
android:id="#+id/movie_cast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true" // this line
app:layout_constraintStart_toEndOf="#id/movie_image"
app:layout_constraintTop_toBottomOf="#id/movie_rating_bar"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:textColor="#color/black"
android:textSize="12sp"
tools:text="Cast: Ryan Reynolds,Dwayne Johnson,Gal Gadot"/>
You're constraining the start but not the end of the view. Constrain the end as well, so it knows when to end the textview. Without a constraint on the end, and with a wrap_content length, it will make the text view as large as wide as necessary to fit all the text.
I have a flow with two buttons in it, sometimes both are shown and sometimes only one. but I can't seem to get all 3 possible outcomes
1st
side by side this works fine
2nd
one visible one gone this works fine as well, it takes up the entire width which I want
3rd second button is now squished too much I would like it to be pushed down before it basically goes off screen or this but I also have to switch the first one to wrap_content in order to make it wider.
edit: what I want the 3rd to do in the end
I would like the above to happen before the 3rd screenshot happens.
is there a way to get all 3 possibilities?
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:flow_wrapMode="chain"
android:layout_marginTop="#dimen/margin_extra_huge"
app:constraint_referenced_ids="positiveButton, negativeButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/dialogMessage" />
<Button
android:id="#+id/positiveButton"
android:layout_width="0dp"
android:minWidth="50dp"
android:paddingStart="#dimen/margin_large"
android:paddingEnd="#dimen/margin_large"
android:layout_height="match_parent"
tools:ignore="MissingConstraints"
tools:text="no, continue" />
<Button
android:id="#+id/negativeButton"
android:layout_width="0dp"
android:minWidth="50dp"
android:layout_height="wrap_content"
android:visibility="visible"
app:buttonColor="#color/text_color_tertiary"
app:hasBorder="false"
tools:ignore="MissingConstraints"
tools:text="#string/close_confirmation_dialog_close_button"
tools:visibility="visible" />
How do I remove the spacing on the top and bottom of the texts? I want to the two texts to touch each other or at least reduce the spacing between the texts.
I've looked at other posts recommending setting android:includeFontPadding="false", but that does not work.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="96sp"
android:text="TEXT1"
android:background="#color/primaryColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
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:textSize="96sp"
android:text="TEXT2"
android:background="#color/secondaryColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView" />
The problem is that's not just empty space - it's the ascent and descent for the font, where things like the lower part of a g goes. The TextView has to have that space because it doesn't know you're not going to be using it. includeFontPadding affects some accents on top of the ascent, so you can remove a little bit of the space, but the rest of it's required.
Short of getting a font with no ascent and descent, honestly I think the best thing you can do is constrain the top of the lower TextView to the top of the upper one, and add a marginTop value that shifts it down where you want it. Use an sp value instead of dp so it stays relative to the user's font size preferences - and if you change the font you'll need to tweak it. And the backgrounds will have to be separate, behind the textviews, if you're using those
If you absolutely want this at any cost, then you can do the following, I have not checked if it will work on different screen sizes . But you can attach both of their top to the same view, can be parent, then make the background transparent, if you chose different colours then this wont work, keep the text in all caps so that the regular alphabets can't go any higher or lower. Keep the margin according to the text size which you will give in dp. This is probably "I want this in any way" approach rather than an acceptable approach.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="95dp"
android:text="TEXT1"
android:background="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="TEXT2"
android:textSize="95dp"
android:layout_marginTop="75dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can do some clever stuff with a Space view to make this work:
<TextView android:id="#+id/textView1"
[other TextView stuff]
app:layout_constraintTop_toTopOf="parent"/>
<Space android:id="#+id/space"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="#id/textView1"/>
<TextView android:id="#+id/textView2"
[other TextView stuff]
app:layout_constraintTop_toBottomOf="#id/space"/>
Then fiddle with the margin parameter in the Space view until the text is where you want it.
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.
I am having an issue with my EditText's on a few devices. I have a couple EditText's in an activity. Also, I have the option for the user to resize the font size. When the user selects a large font, then goes back down to a smaller font, the height of the EditText's widgets do not shrink to accomodate the smaller font (extra padding). I have only observed this behavior on a few devices; most work just fine. Any advice? I found this, Resizing TextView does not shrink its height on Android 3.1, which I think may be related, but adding the suggested escape codes does not seem to help. Thanks!
ADDED:
<LinearLayout
android:id="#+id/linearLayout_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:focusableInTouchMode="true"
android:descendantFocusability="beforeDescendants"
android:background="#drawable/yellow" >
<EditText
android:id="#+id/editText_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:minWidth="#dimen/add_note_min_width"
android:textSize="18dip"
android:background="#fa0"
android:ems="10"
android:hint="#string/title"
android:inputType="text"
android:textStyle="bold" />
<EditText
android:id="#+id/editText_body"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:gravity="top"
android:minWidth="#dimen/add_note_min_width"
android:minHeight="#dimen/add_note_min_height"
android:textSize="18dip"
android:background="#af0"
android:ems="10"
android:hint="#string/body"
android:inputType="textMultiLine" />
</LinearLayout>
Here is the xml for the code in question. As I said above, I have tried adding the \u3000, \u2060, and \u200b escape characters to the end of the text (independently) as was suggested in the provided link. Also, I set the bottom EditText to a layout weight of 1 to try to take up the extra padding below the title EditText. I have contemplated trying a manual measure and resize of the EditText, but this seems hacky, especially since this only affects few devices. This seems to be an actual bug with Android, but I couldn't confirm this or find a workaround.
I finally resolved this problem. As suggested in the other post I linked, a workaround is to append "\u3000", "\u2060", or "\u200b" to the text of the view. This works fine for TextViews, but where my EditText utilizes a hint, the special character must also be appended to the hint (I was only appending to the text). Hope this helps someone else.