I have a ScrollView and a LinearLayout within it defined in the xml file.
<ScrollView
android:id="#+id/planList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingBottom="8dp"
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/button"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:id="#+id/planListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
I add TextViews programmatically from the Activity.
val textView = TextView(this)
textView.text = text
textView.setPadding(0, 8, 0, 8)
textView.breakStrategy = LineBreaker.BREAK_STRATEGY_BALANCED
binding.planListView.addView(textView)
It fills up the linearLayout. When the list exceeds the available size the scrollbar does not appear and no scrolling available at all.
What is wrong? How can I make it work?
Thank you in advance.
To make it works you need set layout properties properly.
texView.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
binding.planListView.addView(textView)
ScrollViews scroll when their contents are larger than the ScrollView itself - it acts as a window, allowing you to move the contents back and forth so you can see different parts. If you set the height to wrap_content, you're ensuring the ScrollView will always be the same height as its contents - so it won't scroll, and it will potentially be partially off the screen (which is what's happening here - you can use the Layout Inspector to check, you'll see the view extending below the screen area).
You need to either give the ScrollView a fixed height, or otherwise constrain it so it won't extend off the screen when its contents grow too large. Generally, there'll be an area in your UI where you want the scrollable content window to appear - that area is your ScrollView. If its contents are too big to fit inside that area, it'll allow scrolling. That's about it!
Related
I have an element that should remain centered in the layout and a button on the right size. The button width is variable.
The following design exemplify two scenarios.
Scenario 1: Long text button
Scenario 2: Small text button
The current solution is have an invisible duplicated button on the left. This is not ideal because the button look and feel may also vary for different locales. I have tried guidelines but that would require to define a percentage and I would prefer if it was dynamic. Barriers don't seem to work either because I would need them to be mirrored.
Any tips how to achieve this?
Try doing width with 0dp and give them weight and change this in runtime
may be they are in linear layout which is horizontal.
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)
button.getLayoutParams();
params.weight = 1.0f; // afterwards you can do the same with changing the weight
button.setLayoutParams(params);
Perhaps you can take advantage of the ConstraintLayoutStates:
https://riggaroo.co.za/constraintlayout-constraintlayoutstates/
And have two layouts one for each scenario.
I ended up using a different solution. I used two guidelines, one at 20% and another at 80%, to define the areas where the button could expand to.
When no button is available, I used the property app:layout_constrainedWidth="false" that ignores the constrainst and allow the title to expand to the available space.
I used this solution because I may need multiple buttons with different call to actions according to the selected language. It would be difficult to manage multiple hidden anchor buttons.
If I understand your pictures correctly, you want to have two elements on your screen:
A View that's centered on the screen, it can be any width size.
A Button that's positioned to the right of the View that can also be any width size. You want this button to be centered in the empty space between the View and the edge of the right screen.
You can try this:
<?xml version="1.0" encoding="utf-8"?>
<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/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="1"
android:textColor="#FFFFFF"
android:background="#000000"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
android:text="2"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to build an Android UI where I need 7 boxes with the days of the week. In order to do this, I decided to go with a ConstraintLayout in order to be able to auto resize my views on any screen.
I created a chain between all 7 views with the with the "spread_inside" attribute, with worked but since I had my views' widths set to wrap_content, due to the nature of TextViews the views did not have equal widths. So I tried making them have equal widths by setting all of 7 views' widths to 0dp. This works but leaves no space between the views. Is there a way to add some spacing between these 7 views? Or is there another way of achieving the "equal widths" to all 7 views while keeping the auto-resizing ability on any screen? Is this even possible with ConstraintLayout or should I keep using LinearLayout for this kind of things? (as seen in the last screenshot)
I want my views to shrink when the screen is small and to expand up to a level when the screen is big. Please see the screenshots below of how it looks now. I want to add an 8dp padding between each view (on a LinearLayout I achieve this by adding a transparent divider on the layout with 8dp width, as in the last screenshot)
How it should look, achieved using LinearLayout
if you want them to be all the same width you don't even need spread_inside, just set the width to 0dp and then add margins to the views. for example:
<?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">
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="4dp"
android:layout_marginLeft="8dp"
android:background="#ffff0000"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintStart_toStartOf="parent"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="4dp"
android:background="#ff00ff00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view1"/>
</android.support.constraint.ConstraintLayout>
keep in mind that space between views will be the sum of 2 margins, first and last view will have only 1 margin space, so you need to set them accordingly (like 4dp for margins between views and 8dp for first and last margin)
So I have a UI element (a single line of text) that I want horizontally centered with respect to the overall device -- unless/until it collides with other UI elements in the given view group / layout. At that point I'd like it to be either centered in the space remaining or pegged as close to being centered overall as possible without colliding. [When there's finally not enough space, then I want to use ellipses.]
Is there any way to achieve this using just standard Android layouts?
I'm currently achieving this via code that adjusts layout constraints when the view group's width changes, the text changes, or related UI elements become visible/invisible. It works fine, but I can't help thinking that some layout should just do this for me.
You can use a weighted horizontal LinearLayout like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="i am centered"
android:ellipsize="end"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="another widget"/>
.
.
.
</LinearLayout>
The TextView with width 0dp and weight 1 will use the remaining horizontal space.
You can add additional widgets to the LinearLayout, and the TextView will always take the remaining space.
For example, if you change the Visibility of the Button to GONE, you'll see the TextView will expand to use the whole width. Similarly, if you programmatically add new widgets to the LinearLayout, the available space for the TextView will adjust.
You can further add ellipsize options to control what happens when the text does not fit in the TextView size.
I have, say three buttons i would like to list below one another in a layout. Depending on the device, screen size, pixel density, orientation and so on, i would like the buttons to span the entire height of their parent layout. The buttons each have a fixed height (dp), so the spanning is more likely concerning the space between the buttons.
I saw several questions on various forums regarding how a LinearLayout is supposedly a fix for this problem, by nesting a layout for each element, having the layout span. I would very much like to avoid nesting layouts, and I'm using a RelativeLayout as of now, so if there is any way to go about it with this type of layout it will be of great help! :)
Additionally, I would like the top and bottom button to "touch" the parent layout border at the top and bottom, and the last (or rest) button to fill out the rest of the vertical space equally.
Thank you in advance.
I'm not entirely sure what you wish to achieve, but you should be able to do this using a LinearLayout & weights (so you don't have to nest multiple layouts).
If you want the 3 buttons to take up the entire parent of the screen just add a weight to each for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_two"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_three"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
Try to set to topButton a field in XML:
android:layout_alignTop="true";
Try to set to middleButton a field in XML:
android:layout_centerVertical="true";
Try to set to bottomButton a field in XML:
android:layout_alignBottom="true";
I am having a spot of bother with a fairly simple layout. Here it is:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="#+id/id2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</LinearLayout>
3 Questions:
How do I center vertical both TextViews (or perhaps better said, the text within those views) within the parent LinearLayout? The left view is vertically centered OK, but the right one (because it has a smaller font) is not. It seems to be centered vertically at the top. I obviously tried playing with layout_gravity of the second view but that makes no difference whatsoever. The only way I can solve it is to wrap the second TextView in a LinearLayout with its layout height parameter set to match_parent (but is this the correct way of doing this?)
Similarly, I want the View on the left horizontally centered on the left, and the View on the right horizontally centered on the right. Currently the right View is placed immediatly next to the left one. The only way I can solve this is by adding something like this inbetween the two text views:
<TextView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="">
basically acting as a spacer which decreases in size depending on the legth of the text in both TextViews
I want the text in the left View to be truncated if the combined text of the Views does not fit horizontally. No wrapping onto a new line. Currently the text in the left View simply "pushes" the right one out of the parent. No idea how to achieve that (apart from adding android:maxLines="1" to stop the text from wrapping). I have tried android:ellipsize="end" but that does not seem to have any effect.
Best way is to use Relative layout , but still if you want to do the same thing in Linear layout than do some changes in your xml file
-First is set Linear layout hight as match parent :
<LinearLayout android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizonatal">
-Second for making the views visible at centre vertical do
android:layout_gravity="center_vertical"
same property android:layout_gravity = "center_horizontal" , you have to add in second text view also.
It will make your both text view appear at centre vertical but one next to other.
To make the second view appear on right I think you can add
android:layout_marginLeft="xx dp"
put some value in place of xx.
For your third question about truncating your text, you should give some size to your TextView not wrap content..Like android:layout_width ="25dp"
and then use android:ellipsize="end".
I guess you will get that..Actually I am in hurry,time to leave the office.