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.
Related
Why doesn't this center a button both horizontally and vertically on the screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_gravity="center"/>
</LinearLayout>
layout_gravity specifies alignment for the button within it's parent. But this only centers the button vertically, not horizontally. If I change the orientation of the linearlayout to vertical, the button is centered horizontally, not vertically. I don't see why the orientation matters here because I only have 1 child element.
I know I can achieve this by specifying the gravity in the LinearLayout with android:gravity="true" or using a RelativeLayout and have the Button android:centerInParent="true", but I'd like to know how android came up with the layout in the code above.
P.S. Why does the background color still show as gray if that's the hex code for white?
LinearLayout will only allocate the minimum amount of space needed for a view in the direction of its orientation. That's why you can't seem to center a view in the same direction as the orientation. LinearLayout generally assumes that you want to put multiple things adjacent to each other, not occupy an entire space unconditionally for a single item.
P.S. I see the entire background of the LinearLayout as white in my preview view in Android Studio, so I don't know what you mean in your P.S.
Don't use a linear layout to display items in the middle of the screen, as these are meant to list items in a row. Use a relative layout instead. So your code should look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#FFFFFF">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/red"
android:textColor="#color/white"
android:text="click"
android:layout_centerInParent="true"/>
</RelativeLayout>
This is my layout:
TEXTVIEW
IMAGEVIEW (optional)
LINEARLAYOUT - to which I add Buttons dynamically
LINEARLAYOUT - with two buttons side by side (left button and right button)
What do I need to do to ensure that the bottom two linear layouts are fixed to the bottom of the screen, regardless of how much space they may take up? ie. The first linear layout might have 3 buttons and take up over half the screen, which is okay. It just needs to be above the left/right buttons in the last linear layout, which is fixed to the bottom.
Then I want my TextView and my ImageView vertically centred in the remaining space. The ImageView will be set to invisible if there is no image, so it could only be the text view which needs to be centred.
I've been playing around with android:gravity="bottom", android:layout_height="0dip"/android:layout_weight="1" (I later realised this would only give 50% to the text/imageview and 50% to the 2 linear layouts), but I can't get my desired result.
Any advice appreciated.
You have to take RelativeLayout.
There you have a better control of the relative position of the views, something like this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_above="#+id/imageView"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/imageView"
android:layout_above="#+id/ll_1"
android:layout_centerVertical="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLyout
android:id="#+id/ll_1"
android:layout_above="#+id/ll_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLyout
android:id="#+id/ll_2"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
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.
I have an ImageView in an activity that takes up the whole screen. What I want to do is have a few translucent buttons in the corner of this ImageView overlayed on top (like 30% transparency). Is this possible with an ImageView in android? If it is can someone point me in the right direction to get started?
Use a layout, and make your ImageView and two Buttons children within the layout.
Example using RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alpha="0.5"
android:text="Button 1"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/button1"
android:alpha="0.5"
android:text="Button 2"/>
</RelativeLayout>
You can position your buttons better by using android:layout_marginTop and android:layout_marginLeft attributes.
The key parts to understand here are:
1/ The ImageView is set to match_parent, therefore it'll stretch to fill the RelativeLayout.
2/ By default, sub Views are positioned at the top left of RelativeLayouts, this is why button1 appears there.
3/ Button2 is positioned to the right of button1 using the RelativeLayout attribute layout_toRightOf. Its vertical position is still set to the default - top.
My Login screen layout seems like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<include
android:id="#+id/headerlayout"
layout="#layout/headerview"
android:layout_height="50dip"
android:layout_width="fill_parent" />
<ImageView
android:id="#+id/imgIcon"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtUserName"
android:layout_width="fill_parent"
android:layout_height="80dip"
android:lines="1"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="16dip"
android:text="User Name"/>
</LinearLayout>
However I am not able to see ImageView and TextView. Only headerview is visible and white layout below it. Why is it so?
Thanks,
Stone
just add
android:orientation="vertical"
in your <LinearLayout> tag.
Edit:
By default the orientation is set to Horizontal means every component will be added horizontally, since you are using "fill_parent" to the header, so it covers all the place(width) and leave no room for other components to appear. So when you add vertical all components are placed vertically. So enough room is available for components to layout themselves.More detail here
Bydefault LinearLayout aligns all children in a single direction horizontally (if you dont specify android:orientation ) .
So here in your case it was adding views horizontally. Your header portion took full width of the screen (as you have specified android:layout_width="fill_parent" in include tag)and no space is left for that TextView and ImageView.
You just have to add orientation tag in LinearLayout and set its value to vertical.
ie android:orientation="vertical".
LinearLayout from Android Docs says
LinearLayout aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute. All children are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.