Seeking help to design a layout as shown here:
http://docs.google.com/Doc?docid=0AQhgDtGvE2HgZGZ6cmtua185MTd0eGdyZmc&hl=en
The major challenge I face is aligning the components at desired positions. Please refer the three buttons(icons) and the way they are positioned.
Literally, going nuts, thinking how to position those exactly at the desired places.
Any help is much appreciated.
Regards,
Rony
Since you used the Android category, I'm assuming that you're trying to recreate this iPhone layout in Android.
The three buttons would probably be best laid as follows.
Your main layout container would probably be a RelativeLayout, so you can dock things to the top and bottom and lay everything else out in relation to one of its sibling elements. The three button icons (and I'm assuming you're referring to the circular buttons and not the tab bar buttons at the very bottom) would be in a LinearLayout centered within its parent (probably want to use gravity=center_horizontal on the main outer layout) and the individual items would have an equal left and right margin parameters to get the desired spacing (layout_marginLeft, layout_marginRight). You could also make the LinearLayout container of the buttons flush (layout_width=fill_parent) and using android:weight attribute on the outer buttons laying them out towards the center and using a lower weight on the center item. I'd favor the first option, personally.
If you're trying to create relatively complex layouts and any of the above doesn't make sense, go back and read the docs. Layout in Android is very powerful, but you really have to understand the available tools to take advantage of it.
Related
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.
I am porting an iOS application so the design is pretty much out of my hand. What I have is two LinearLayouts, one with what is basically a bump (shown in pictures) that I want to overlap the second LinearLayout.
I get aesthetically what I want desire I use FrameLayout to contain the two layouts. However, here I run into two functional problems. The first, I need to be able to allow the bottom, overlapping LinearLayout which is composed of five adjacent image buttons to change size (preferably, using layout_weight). The second is anything that is in the bottom of the top LinearLayout it is hidden by the bottom LinearLayout.
When I switch to using LinearLayout, from FrameLayout to contain the two I get functionally what I want, however, aesthetically it smashes the button to fit.
Both cases are pictured. All feedback is appreciated. I am hoping to find a solution to this without designing a custom widget.
Thanks.
I have read many articles regarding layout, but I am still quitely confused. My questions are:
When to use relative layout? Example?
When to use table layout and why we can't use it instead of relative layout?
When to use linear layout?
I just need brief answers.
When use which layout?
I think It depends on your UI, and most important thing that how you create optimized layout.
From definition : -
LinearLayout – designed to display child View controls in a single row or column. This is a very handy layout method for creating forms.
RelativeLayout – designed to display child View controls in relation to each other. For instance, you can set a control to be positioned “above” or “below” or “to the left of” or “to the right of” another control, referred to by its unique identifier. You can also align child View controls relative to the parent edges.
TableLayout – designed to organize child View controls into rows and columns. Individual View controls are added within each row of the table using a TableRow layout View (which is basically a horizontally oriented LinearLayout) for each row of the table.
References :
Creating Efficient Layouts
Common Layout Objects
And most important Hierarchy Viewer
at first there is some confusion about these layouts but as you start playing with these three layouts u will get idea where to use what.. I worked on relative-layout the most.
Consider i want to use a widget always at bottom of screen then with table or linear layout this is not possible always.. without feeling screen other two can not make item at bottom but relative can do.use of any type of layout depends on your screen requirements.
I started out using relativelayout. But recently I've switched to using mostly linearlayout.
The reason is kind of hard to explain, but take this as an example: Say I want a layout that has two images centered in the middle of the screen. Both images should take up 1/4 of the screen width and 1/4 of the screen height. This is impossible to do with relativelayout assuming you want it to work exactly the same on all devices. But you can do this with Linearlayout. By creating vertical and horizontal parents, you can create "boxes". To accomplish this you must learn about weigthsum and weigth. Parent layouts should have the weigthsum attribute and children should have the weight attribute.
Anyway, my point: Relativelayout is easy to use but it's also deceptive. You may think that your layout will look exactly alike on all device, but most likely, they won't look alike. The reason for this is:
With relativelayout you must define size with either dp or px(assuming you don't fill parent or wrap content).
Different devices have different aspect ratios.
I hoped that helped in terms of understanding relative and linearlayout.
I am new to android.
As far as I know, there are different layouts like the liner layout, the table layout, and some others. I would like to know in which case what layout would be suitable.
I am unable to categorize the exact differences between the layouts.
Also, can someone please tell me what the specific meanings of the attributes like fill_parent, wrap_parent are?
What type of layout to use really depends on how the layout you are trying to build looks. If you have a simple layout of items one after another, a LinearLayout usually is the best choice. It's easy to work with, but the drawback is that you can't really customize the layout very much. All your views will just end up in a horizontal or vertical list. A RelativeLayout gives you a better way of adding Views that are right/left/top/bottom aligned compared to its parent view. And last but not least, the TableLayout is really great if you are building a grid of views.
All layouts have specific uses. Read android.developers.com, fill parent means your view will cover whole screen area, wrap-content covers that much area that is occupied by the layout's child views. Match - parent takes area equal to its parent area.But using match parent is not good.
Lets say I have a list on screen, which I always want to be usable. I also want a small image or textview to slightly overlap the listview. Is anything this possible without using absolute layout parameters?
I've never seen it in any android app or tutorial, but there are things like this in many iPhone apps. It adds a nice touch.
(Also, I don't have any code to show because I'm not sure where to start)
Relative Layouts also allow things to overlap. Views declared later in the xml will be on top. I believe that aligning view edges and use of margins should allow you to achieve this affect without great difficulty.
You could use RelativeLayout and set for example android:layout_marginTop="-50dip" android:layout_below="#id/my_list".
As well as RelativeLayouts, you can also use FrameLayouts to stack objects. Other than the z-order (last object declared = highest z-order), the child objects don't depend on the positioning of other objects in the group, so you can just set margins or gravity to position them.
So in your instance, just declare a TextView after your ListView, and position it wherever you want. It won't interfere with the ListView's positioning, and it will sit on top.