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)
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>
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 a very irritating problem with my views. As you see on a galaxy S7 my views is perfectly in center, but on a galaxy S4 mini they are placed down at the bottom!
I have tried to change alot in XML without any succses. I think it may be of the way I designet the whole thing with recyclerview, tabviews etc.
The following dont work either:
layout_InParent, Gravity:Center, layout_centerVertical
Imagebutton item for the recyclerview. item_colorbutton.xml:
android:id="#+id/colorbutton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="15dp"
android:background="#drawable/bbtn">
BACKGROUND tabfragement. tab_fragment_1.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:layout_marginTop="10dp"
android:id="#+id/rvColors"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
This is the viewpager for the different tabs: BACKGROUND, FONT, TEXT STYLE
<org.m.muddzboy.QuoteCreator.ViewPager.NonSwipeableViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="51pt"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerInParent="true"
android:background="#517293" />
Your parent view seems to be limited height... and your recyclerview wraps children, plus it has top margin of 10dp. So you have 10dp, then 15dp + 15dp top and bottom margin of child view (you set general margin of 15dp, so all sides), plus 48dp height of child view. Seems like on low density devices that is not enough for your view which contains recyclerview. So it follows the rules and pushes your views down. It cannot break set margin. It has to set them as you requested.
In situations like this it's better to have dimensions for different device configurations. And if it's too complex, setting relative dimensions programmatically based on measured height of containing view.
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'm doing a menu. The problem is that my buttons are too close to one another. I would like to separate them a bit.
Also I would like to extend them (rozszerzyć je) to the similar sizes.
Here you have the code:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
Here you have the image of this problem:
And each button out of the 4 ones has a similar code. (the difference is in layout_above.
How to make it?
Thanks in advance!
Any reason why you have to use a RelativeLayout? If you can use a LinearLayout I'd use something like:
<LinearLayout
android:layout_width="..."
android:layout_height="..."
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding_top="4dp"
android:padding_bottom="4dp"
... />
</LinearLayout>
This would get all your buttons to be the same size horizontal and vertical. You can tweak the padding top and bottom to get the desired effect.
The way layout_weight works is it takes the leftover space of the parent view, and portions them out to the children views according to their weights. Since the height of every button is 0dp, 100% of the vertical space is left to partition out. Since the weight of all the buttons is the same, they will be roughly the same size.
This explanation is for a vertical LinearLayout. For a horizontal, just switch the values of layout_height and layout_width.