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.
Related
Looking for your help. I am using constrain layout. On top of blue rectangle, I have other elements too, but not sure how to achieve the layout that I have shown in the image.
I tried using card view and text view and button inside it. Please let me know if I miss any details or some information is required. Just looking for better approach.
I tried using card view and text view and button inside it
This is fine. And you will need another layout inside CardView because CardView can only hold one child. You can use ConstraintLayout,LinearLayout, RelativeLayout... to hold your TextView and Button.
I have multiple TextViews inside a horizontal LinearLayout and i need the middle text view to have ellipse=middle so that when the middle text is long enough, it pushes on both sides but the other views don't go out of bounds, but instead the middle TextView shows the '..."
Here's how it should look.
Setting the items normally, wrap_content for all in a horizontal LinearLayout will make the at ASAP text be pushed outside of the screen on Android (the above screens are from the iOS app).
Any ideas on how to accomplish this? Perhaps with a ConstraintLayout somehow ?!
Yes, i would recommend a ConstraintLayout. Top item to the top of the view, bottom item to thr bottom of the view then the middle item attached to these two views. You could also use barriers.
I'm creating a simple custom view. My view inherits from AppCompatImageButton with the goal of drawing some simple geometric shapes for my custom button and animating them.
If my XML view contains:
android:background="#color/transparent"
My view draws correctly inside a vertical LinearLayout, even though the android:background seems to otherwise do nothing. However, if I leave out android:background, the top and bottom displays an additional unwanted gap between the custom views.
The documentation says these two are "Related":
View.setBackgroundResource(int resid)
android:background
I've tried calling setBackgroundResource(R.color.transparent) in my Java initialization code, thinking this would do the same thing as XML android:background, but the unwanted padding won't go away. Here's a screenshot that shows the view without the android:background.
With android:background, the image fills the entire height not leaving the gap at the top and bottom.
How can I get my custom view to fill the entire drawing area without forcing an artificial android:background into the XML? The solution will also need to work if the programmer creates the custom view in Java without XML.
Thx.
Is there any way to make following Layout in Android..? If yes please suggest how to make and how to set clickListener's of overlapping areas of Views...? i.e View 2's area overlaps 1's area and View 3's area overlaps 2'sand 4's area and so on others views overlaps..? If there is any android library to make non-rectangle buttons/Views also suggest.. Thanks.
Here is one way that this may work:
Use a rectangular ImageView for each shape. Make sure each shape is clickable.
Shape images will have a transparent portion where they fit together.
Use FrameLayout or some similar layout that will allow overlapping of Views. You will have to work with how each View overlaps.
Make the transparent portions un-clickable. See this Stack Overflow question and its accepted answer regarding one way to do this. (N.B. I have not tested this.) You should be able to work it so that clicks propagate downward to an underlying ImageView when a transparent region is clicked.
An alternate way would be just to have two views (left and right) and implement a View.OnTouchListener to determine where the click occurs by looking at adjoining pixels: their color and placement.
Good luck!
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?