My view hierarchy: (left image)
GreenTextField in RedFragment in BlueFragment in BlackFragment
I need to have the GreenTextField go over parent fragments bounds like the image to the right.
I have tried with negative margin, but I doesn't work.
Any suggestion about how to solve this?
This fragments layout is needed and this sample is simplified a lot.
Result: As expected this is not really possible.
First, if there is a chance to use ViewGroups instead of those nested Fragments, you should think about redesign. It would be crazy to maintain such code :)
But if you really have to keep this structure, try something like that.
Set android:clipChildren="false" to all parents of GreenTextField.
This works for layouts, but it could not work for Fragments, so see here.
Calculate GreenTextField's width and set it (of course programmatically).
Make your GreenTextField draw on top, over right blue part. There would be no problem if the blue structures are inside RelativeLayout, but probably they are not. Then try with bringChildToFront(View child) from ViewGroup.
This is impossible.
This is not the purpose of fragment(as independent ui element) and fragments' child view can't exit its parent limits (width and height)...if it is, its a design flaw.
In order to do so you sholud put the black fragment and the textField in a relative layput.
textfield height issues -> change it dynamically on onViewCreated method, of the left red fragment, in order to place it on top of its position.
another solution is to put the textField under the black fragment, and set its position dynamically.
Set to the black rect to be a parent of the green. Calculate offset manualy.
Related
I have a project with 99 fragments. A client wants us to make our BottomNavigationView semi-transparent and have our content scroll behind it. But not all our fragments are scrollable. Some are RelativeLayouts with controls attached to the bottom of the page that need to not allow themselves to go down past the BottomNavigationView, so that they're not covered up. And even with the pages that scroll, sometimes it's not even the entire page that scrolls, but just a subset of it. Is there any way I can achieve this kind of ambiguity without going through all 99 of my fragments and making a unique judgement call on each or them?
There is no direct solution as such for what you are trying to achieve.
If your fragments has RecyclerView then add extra bottomSpacing for last item in the list in ItemDecoration class.
If your fragment has ScrollView then add extra paddingBottom for last view in the hierarchy.
If your view has anything other than these two scrolling views, then you can hardcode the bottom margin and give a color below matching to the navigation view. This make it look opaque from translucent.
One thing that is understood is the bottom spacing, margin and padding will be equal to or slightly greater than (ideally height + 8dp) you bottom navigation.
Since you fragments behave differently, there is no use of trying to make single solution for the same. But to make the job easier for future, you can externalise these margins and spacings in dimens.xml (use same object for all the spacing) and hence in future if any requirement changes, you can change the spacing directly from the dimens.
And you can do the same for bottom navigation spacing color, externalize to colors.xml and change it as you like.
I am relatively new to Android UI. I always get confuse in providing margin to different view like should i provide bottom margin or should i use top margin(to view below it). Also should i use RelativeLayout or LinearLayout if both can solve my problem.
Thanks
It Depends on your need
Linear Vs Relative
If you just want to stack your TextView and Button horizontally or vertically you should go with LinearLayout.
If you want to make a layout that is more complex for example you can have an ImageView covering all of the screen and Button over the ImageView or if you want your layout elements to be stack on corners or at bottom, RelativeLayout is your Guy.
Top margin vs Bottom Margin
It doesn't make much a difference its a personal preference, I Use margin-bottom on first element rather than margin-top for second element.
One noticeable difference is when you are working with Show layout bounds during development. You can see here those pink coloration indicate that it is using margin on its view while padding has no coloration. Recently I prefer to use padding if applicable with my requirements as it seems more cleaner to inspect UI when Show layout bounds is enabled from Developer option.
The image is not mine and was just use as a quick sample.
If both Linear and RelativeLayout will solve your layout, then you should use Linear as it is faster to render.
With regards to top vs. bottom Margin. That's entirely your preference and how you want to think about the elements. Does Item A always sit 40dp above the next item or does Item B always sit 40dp below the previous item?
I have two views that I want to center vertically in a RelativeLayout.
Is there a way to do this without using gravity/layout_gravity ?
My problem behind this question :
I need to do a layout with several squares and under each one a TextView. The main problem is that the TextViews must overlap. Only one TextView will be visible at a time. Each TextView has a different lengh.
I started with a RelativeLayout but encountred the previous problem. And I can't group the views 2 per 2 because I need to set a layout_toRightOf of the previous square.
Current layout :
For the moment, I have set a magic number in layout_marginLeft for each square (to the border of the parent view) but it isn't clean at all.
Thanks
Use android:layout_centerInParent="true" to center something into a RelativeLayout
You can use android:layout_below="#id/your_first_view" to put your second View below the first !
If you want to do more complex stuff you may separate your different Views and store the into new LinearLayout that you set to horizontal or vertical depending on your needs.
Another trick can be to create empty Views with small height or width and that can help you to position thing around them !
This combined to the toRightOf toLeftOf stuff will do what you want
Finaly, I kept the the layout_marginLeft but I put the values in my res/values/dimens.xml, it is cleaner and I can have a dimens.xml per screen dimension.
A trick is to set the width of the textViews deliberately big so it won't depend on the strings lenght.
I always face this problem and I feel that I design it bad.
if I want to display an activity (settings type of activity) where my user can input a name, choose an item, and check a toggle item. As follows I would like to align the EditText, spinner and button under neath each other in which they occupy the right half of the screen and the text occupies the left side.
Do I use
Nested linear layouts with weights (which I never seem to get it right)
Relative Layout where I align things and I use center in parent property to get it starting from half screen (too many IDs are defined in XML file even for lables that I won't use in the code)
Table layout
Which one you recommend? or maybe how?
For perfect alignment I think the TableLayout is the best option in your case. You can do this using other two options. But if the text length of the left side changes then you may need to change the xml layouts. But by using tableLayout that will be more easy to manage.
From the image you provided above, it seems you have TextDetails on left side and View on right such that right view must start from centerVertical. Is it right??
I suggest you use TableLayout... Add your views as you mentioned above..
You can set width hardcoded so that they remain intact always like this..
float screenWidth = ((Activity) context).getWindowManager()
.getDefaultDisplay().getWidth();
then your views both TextDetails and View's add setWidth(screenWidth / 2);
I think you need to go throw Android desing patters. There are some tips about how to do this better. On my opinion - just use LinearLayout and manipulate with their gravity/margin/padding. Or use RelativeLayout instead like google recommends.
Best wishes.
The following screenshot illustrates a simple example of what I have now:
What I'd like to achieve, is that the selected (blue) view not be clipped at the boundary of the red container. My first try was clipChildren="false", which causes the blue view to expand outside of its borders, filling the the red area. I just want to see the portion overlaying the green area.
I think you'll have to float the blue on top of both the red and green. You can't have a child outside of its parent ViewGroup (AFAIK). You'll need to redesign your layout.
Getting what you want should be pretty easy, though. I don't use the graphical designer, so would need XML.
FrameLayout with LinearLayout inside to show the Red/Green, then another Linear or Relative after the first LinearyLayout (inside the FrameLayout). With LinearLayout, I'd align right, and give the blue element some padding.
It may be possible to do this all with RelativeLayout, but I tend to stay away from it.
Essentially what you're looking for is overlapping views. This can be done with a FrameLayout. For information on how to do this, please checkout this example.