I am trying to program an alternative landscape view file (an xml file) for my app, and I must use FrameLayout instead of LinearLayout (that's what the book said). But Framelayout does not stack well, so we are supposed to use android:layout_gravity and then assign an x/y dimension, for example: android:layout_gravity="center". This example centers something exactly in the middle (both vertically and horizontally).
But my problem is, I have 4 levels on the vertical plane, where I want to place things. A text line, a line with 2 buttons (true, false), another button (cheat), then finally a line with 2 arrow buttons (previous and next). But with the layout_gravity, they only have very crude placements: top, center, bottom. I noticed that if you do not assign anything, they all end up in the upper left corner.
So how do I stack these vertically so they fall nicely spaced from top to bottom? Assigning 2 things the same parameters does not stack them, but rather overlaps them terribly.
Thank you for your help, below is my code. I have not put any gravity layouts in there yet.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/question_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/true_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/true_button" />
<Button
android:id="#+id/false_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/false_button" />
</LinearLayout>
<Button
android:id="#+id/cheat_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cheat_button" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/prev_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_left"
android:contentDescription="#string/move_back"
/>
<ImageButton
android:id="#+id/next_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrow_right"
android:contentDescription="#string/move_forward"
/>
</LinearLayout>
</FrameLayout>
You should use a Relative Layout or Linear Layout to achieve this because the Frame Layout is simply not designed for this.
Here is the api documentation for frame layout-
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other. You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
So controlling the position of child in Frame layout is very much limited,ie only using gravity.
Related
I have a layout contain one image and 3 text field
I've tried to align the image to right and text field to left but I've failed
I've used
android:layout_gravity="right" for image and left to text but it did not work also I've used end and start in gravity with no success
this is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:orientation="vertical"
android:background="#drawable/card_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/listthumb"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:contentDescription="Rss video thumbnail"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/listtitle"
style="#style/listTitle"
android:maxLines="3"/>
</LinearLayout>
<TextView
android:id="#+id/shortdescription"
android:layout_width="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/listpubdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"/>
</LinearLayout>
</FrameLayout>
Try to use a <RelativeLayout> instead of a <LinearLayout>
With the RelativeLayout you could place a widget depending on the position of another widget
Here the Relative Layout description
Hope this will help, I have not had time to test....
One linear layout should have vertical orientation and contain the 3 text fields.
One linear layout should have horizontal orientation and contain both the above linear layout and the image.
To push two views to the edges of the screen, you can also give each a left/right margin and then put a blank view with weight = 1 in between them.
Please read a bit more on how layouts work on Android and the different types available to you. A LinearLayout will stack the containing Views either Horizontally or Vertically one after the other. A FrameLayout is simply a container and the items within have to position themselves. RelativeLayout allow you to position your views with a relative reference to other views (in your case, you can position your ImageView, and then your 3 TextViews relative to where the ImageView is).
If you can use LinearLayout instead of RelativeLayout, you should do so, as RelativeLayout is always slower, due to having to perform two passes prior to rendering as it needs to measure each view and then also perform the layouts based on that. You might be looking for something like (pseudo-code):
<LinearLayout orientation=horizontal>
<LinearLayout orientation=vertical>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<ImageView />
</LinearLayout>
You have not described your question well . Check below code if it works .
You just forgot to add orientation in linear layout containing one text view and a Image view .
Add Orientation to Your Linear Layout.
My Current Implementation
I have a HorizontalScrollView which I create in XML that houses a few LinearLayout children. I have added this code below.
There are two LinearLayout containers with the id's group_one and group_two and these are populated programmatically at run time.
I also fix the width of the HorizontalScrollView at run time depending on the amount of View objects I will be inserting.
This solution works great for when the children fit in the HorizontalScrollView without the need to scroll.
The Issue
As soon as I need to scroll (there are more children than can be displayed within the fixed width HorizontalScrollView) then the scrollbar will not go all the way to the right, even though I can see that the child layout is of the correct width, and I can see the scrollbar just will not go any further.
My Question
Why would there be a limit on the scrollbar moving any further right?
My Code
HorizontalScrollView XML
<!-- THIS IS WHERE THE PLUGIN BUTTONS ARE HOUSED -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"/>
</LinearLayout>
</HorizontalScrollView>
What Is Happening
This is an image of the correct scroll to the left. The edge of the scroll view starts on the right of the red bar. Notice the distance between the two.
This is an image of the incorrect scroll right. Compare the distances between the edges of the scroll view and where the scroll bar is stopping.
This is how I want it to look when I scroll at either end.
I have been playing with this for a while now and finally found the solution.
I was trying to add the left and right margins to the LinearLayout with the ID group_container. However for some reason the HorizontalScrollView was not respecting this and this is why I was seeing this issue.
Instead I added the left and right margins to the group_one and group_two LinearLayouts. Now the HorizontalScrollView respected these and it functions as I expected. Here is my modified code.
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:id="#+id/map_plugin_scroll_view"
android:background="#color/map_plugin_background">
<!-- Enclosing box to layout the two groups.-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/group_container">
<!-- These layouts contain the map plugins. -->
<LinearLayout
android:id="#+id/group_one"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
<LinearLayout
android:id="#+id/group_two"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"/>
</LinearLayout>
</HorizontalScrollView>
set padding right to your scrollview like this :
android:paddingRight="20dp"
I have two buttons in a horizontal LinearLayout. They are currently next to each other and the very left. I want to move the second button to the right end of the LinearLayout.
I tried android:gravity on these buttons but this didn't change the position of them at all.
Thanks
You cannot achieve this using a LinearLayout.
Use a RelativeLayout instead and place each button relative to RelativeLayout right or left. Something like below example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
The easiest way to do this is to use RelativeLayout. You can give your Button you want on the right the property alignParentRight="true".
<Button
...
android:layout_alignParentRight="true"/>
For a horizontal LinearLayout, android:layout_graivty (which is what you would want instead of android:gravity) left and right won't do anything because the Views are already placed from right to left.
See this answer on the difference between android:gravity and android:layout_gravity if you are uncertain about those.
Edit
Depending on exactly what you need/want, it is possible to do this with a LinearLayout though probably still much easier and more flexible with a RelativeLayout. Anyway, you can use weight to achieve something similar and play with the values. The following gives me a Button on the left and a Button on the right.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Left Button"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Right Button"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right Button"/>
</LinearLayout>
Try setting the left button's layout_gravity to left (or start) and the right button's layout_gravity to right (or end).
The problem is that you are currently using gravity which
Specifies how an object should position its content, on both the X and Y axes, within its own bounds.
Instead, you should use layout_gravity that is
Standard gravity constant that a child supplies to its parent. Defines how the child view should be positioned, on both the X and Y axes, within its enclosing layout.
In other words - you are currently telling the buttons how to align their child views, instead of telling them how to be aligned within their parent.
You can set the android:layout_weight='1' and both buttons will share the screen equally(side by side) or if you want the extra space between them, you can place a button each in a linear layout and set the android:layout_gravity to left and rightfor each.
Add a RelativeLayout and set values to layout_marginLeft, layout_marginTop, etc.
eg.
android:layout_marginLeft="32dp"
android:layout_marginTop="160dp"
make linearLayout orientation Vertical and set button's gravity => center and as you want..
In my android app, I have a toolbar with an ImageView and two spinners. I would like the ImageView to appear flush with the left side of the screen, and the two spinners to be evenly spaced, horizontally centered in the remaining space (not horizontally centered on the screen, but horizontally centered in the space remaining after the ImageView is placed. What's the best way to achieve this?
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id\img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id\img"
android:orientation="vertical"
android:layout_gravity="center_horizontal" >
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
The relative layout fixes the relative positions of the image and spinners (as a group). The Linear layout sets the spinners and centers them within the layout horizontally by setting the layout gravity.
I'm assuming you want them one on top of the other. If you want them side by side, change the orientation.
I'm new to android programming but from how much I have understood of the layouts from the documentation, RelativeLayout is mostly used when you need the views based on some rules and the FrameLayout when you want to overlap views.
But unfortunately for the following program I get the work of FrameLayout done by using RelativeLayout. I got my work done but for understanding, Am I missing something in the difference?
Also, how did the buttons come over my image? (Even the other image is overlapping.)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_alignLeft="#id/imageView1"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="1.0" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Login" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Register" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.33"
android:text="Try application" />
</LinearLayout>
</RelativeLayout>
The RelativeLayout can use :
android:layout_toEndOf="#id/some_view"
android:layout_toStartOf="#id/some_view"
android:layout_above="#id/some_view"
android:layout_below="#id/some_view"
to make sure views lineup correctly in relation to each other. FrameLayout is very similar except it's only using gravity to put display its views (with no relation).
I would also suggest you to take a look at the ConstraintLayout component. ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.
RelativeLayout based on relation of views. It is a layout manager that helps you arrange your UI elements based on some rule. You can specify things like: align this to parents left edge, place this to the left/right of this elements etc.
FrameLayout allows placements along Z-axis. That is you can stack your view elements one above the other.
RelativeLayout - As the name suggest in this viewgroup, view are placed relative to each other. Most used property of relativelayout are used are
android:layout_toLeftOf="#id/some_view1"
android:layout_toRightOf="#id/some_view2"
android:layout_above="#id/some_view3"
android:layout_below="#id/some_view4"
android:layout_toendof="#id/some_view5"
android:layout_tostartof="#id/some_view6"
View are placeed relative to each other. It is really helpful while developing complex designed.
FrameLayout - It behaves as a single object view are not placed relative to each but as per to the FrameLayout. FrameLayout takes the size of biggest child view.
android:gravity="center_horizontal|center_vertical|bottom"
Using above property child views position is modified.