I want to achieve something like this:
As stated here InsetDrawables can be used to make backgrounds smaller than the View that contains it. However when I do this all my child views (ImageView, TextView) align with the bottom border of the inset background. Any idea how I can achieve this effect?
Btw: FrameLayouts don't work either for devices with Android 2.x because margins are handled differently.
Related
Maybe some kind of simple question to those who are skilled at android layouts, but what is the best approach to draw smth like this (maybe what widget to use) for positioning rounded area which spreads out of top border of dialogFragment and is horizontally centered like this:
You will have to create a custom layout for Dialogs.
In this case, you have all the control you want for defining dialogs layout, same as for any view.
If heart icon is all you have, create an xml for white circle and use it as a background for the heart, set it to top of parent, center it horizontally.
As you will have exact height of circle, you can set half of it as top margin for the rest of the layout below to make circle look like a hump (as on screenshot).
You can use a 9 patch as the background of you dialog. Define the stretch areas and the content area and you should be good :
And for exemple use this 9 patch file:
I would like to develop a layout below. I am really confuse related to that. I used RelativeLayout, FrameLayout to develop this. But I am not getting perfect output. As per below image, the Dark Gray color is overlap the light Gray layout. If I used Relative layout then dark Gray will be in the light Gray area. And if I used FrameLayout then the other controls of light Gray will not set perfectly.
Please guide me the right path. I am stuck in this layout. Thanks in advance.
According to your figure, If all widgets need to show without scrolling vertically , you can have vertical linear-layout here,
TextView
Button,
ImageView
List view with defined height
Other widgets
I have a few issues and questions regarding some UI development on Android. Firstly look at this image:
Firstly at image A) This is a image that I insert and repeat horizontally to give the zig-zag shape at the top of the screen regardless of screensize and above that a textField with no content and a background color - But as I'm sure you can is that the two colors don't match up quite as perfectly as it should even though they both have the same hex color value (#BF0426). And secondly, you can also see some serious pixelation on that zig-zag image. How do I fix these 2 problems?
And then at image B) Here I have a simple listView. What I would like to do, is firstly indent it a bit on both sides, and round the corners of the top and bottom item. So basically I want it to look like the blue border drawn on the screenshot. (Your typical iOS listView). How do I go about doing this?
Thanks in advance for any tips!
For the image. Just out of curiosity, why wouldnt you simply extend your image to include the top pixels as well? In other words, build your repeating image such that it incorporates the pixels that you are trying to create using the empty textview. This will at least take care of the color missmatch, as the color will all be generated from the same place. In terms of the pixelation. Are you truly repeating the image, or are you spreading the image. A spreading will definitely cause what you are seeing.
For your tableview:
For the left and right indent, you can simply use the margin or padding attributes of tableview item. There are generic padding and/or margin attributes (which will pad all of the top, bottom, left and right), or there are separate padding and/or margin attributes for each top, bottom, left, and right. Here is a great link on padding versus margin that you may want to read.
Difference between a View's Padding and Margin
Example attribute (as called in an XML file) for bottom margin
android:layout_marginBottom
setMargins(left, top, right, bottom) // for setting margins programmatically
Example attribute (as called in an XML file) for top padding
android:paddingTop
setPadding(left, top, right, bottom) // for setting padding programmatically
For the custom top and bottom, you should be able to use the following tutorial
http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/
From here, you should be able to detect the item as the first and last item and set the background property (image) to a background image that has a rounded top or rounded bottom. This is how I do it on the iPhone. I have also implemented things that LOOK like tableviews but are simply vertical layouts with my own custom views that I have made to look like what you are wanting.
One thing to consider is the file format you use is going to mutate the image as you save it (lossy compression), so a .jpg with a certain color may look different than a .bmp with the same color. Make sure you author using the same application and/or export settings when trying to match up images.
Also, if you created your image with a DPI that is not compatible with the android display it can cause serious pixelation in detail areas, especially with gradients and drop shadows.
I'm working on the controls for a game, and require part of the control panel (gray in the figure below) to change dynamically, either showing a single canvas (left) or 5 buttons (right). The border between the lower-row views should always be positioned at exactly the same x-position as the border between the buttons on the upper row, as shown. At the same time, all twelve upper buttons should be scaled and distributed evenly.
I've considered several approaches, but as of yet none do all of what I want:
Using two LinearLayouts, one for each row of controls: reliably aligning the borders seems to be impossible, and replacing part of the layout is difficult at best.
Using a TableLayout: again, replacing a portion of the layout is difficult.
Using a RelativeLayout: resizing and aligning buttons independently of the screen size doesn't seem possible
Any suggestions for an alternative method, or on how to make one of the above approaches work? It would also be nice if there were some way to animate the change of views, i.e. sliding in the buttons from the left over the canvas. Thanks!
Interesting, I've done this several weeks ago. What I did is to make use of this property of View object: "Visibility". So that means at a fixed position, I can set any View to display on to, not depending on any type of Layout, it can be Visibility.GONE, Visibility.VISIBLE or Visibility.INVISIBLE.
In my app, I used RelativeLayout to set relative position to the right side TextView.
Give it a try :)
In order to close this question: I have solved the problem by writing a custom layout class that places and sizes the child views without heeding the measured size of the children. Effectively this gives me the behavior of a linear layout with layout weights, but is more deterministic with border placement.
A ViewAnimator is used to switch between the Canvas and the Buttons.
The image is what i'm trying to achieve. I tried using tab layout, relativelayout and linearlayout (and even a combination), but in no scenario i got it exactly right.
The requirements:
no overlapping of any component
no clipping of the image in the button (the green one)
the red bar is always at the bottom
in landscape, the components should still be in their same place, but you can scroll down
If required I can paste my current variations of the different layouts, but they are all rather big and messy.
Professional insights on which layout approach you would use is also appreciated, at least i can keep trying using the right things then.
At the moment, the orange things are normal buttons, defined like so:
<Button
android:id="#+id/btn_web"
style="#style/NewButton2"
android:onClick="webClick"
android:text="#string/Text_Web"
android:drawableTop="#drawable/jc_menu_web"
android:layout_weight="0.3"
/>
This is a problem on its own,because if you stretch the buttons using fill_parent, the result is that the image will be high at the top, whereas the text will be entirely at the bottom.Would be nicer if it were a centered image in the button.