I currently have a map implemented in my Android application, and I'm having a bit of trouble trying to place a button at the top of it.
At the moment, this is how it is being displayed -
I want to prevent the button from being transparent, ideally I want it to appear like this below, or even have the button to span the width of the screen and stick to the top of the map -
Can anyone point me in the right direction in how to achieve the look in my second screenshot? Or even have the button across the top without being transparent, the map doesn't have to be in a frame or anything. Here is my code for the top screenshot -
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"/>
If anyone could help me I would appreciate it.
Nest the two views within a different layout such as a RelativeLayout. Take advantage of the alignParentTop, align_bottom, etc. properties.
<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="match_parent" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btn_login"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"/>
<fragment
android:layout_below="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/map"
tools:context="com.example.pro.maps.MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
</RelativeLayout>
Related
Sorry for the elementary question but I can't find the solution:
When covering a button with a layout without elevation, it emerges over the layout because a button has a depth (negative depth, it points at the viewer).
So, if you have a
<FrameLayout... >
<Button.../>
<FrameLayout
id="#+id/fragmentsContainerOrAnything"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C00F"
android:clickable="true"
android:focusable="true"
>
</FrameLayout>
</FrameLayout>
The button would show through the FrameLayout.... In this case, literally "out of the blue" because the button has depth and so it emerges over the layout, even though the layout is placed "upon" the button.
The question is:
How do I make the FrameLayout cover the underlying Button without fiddling with its elevation.
How do I make the button flat? Of course I can just set it back to the origins and call it "TextView". But is there a nicer way?
Thanks
Add your button inside FrameLayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#C00F"
android:clickable="true"
android:focusable="true" />
</FrameLayout>
I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?
i don't know if i understand correct. but what you ask is pretty simple.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Recently picking up android development, I have hit a snag in the road. I'm having trouble positioning my layouts. Screenshots are as follows:
I'm trying to input either another layout type/list view in the upper section of the screen, without disrupting the button/text box at the bottom, though.. When extending this layout. I hit the following snag:
The entire contents of the original frame shift when the box of the new layout is extended, I've tried modifying:
android:layout_gravity="top">
and other layout attributes such as weight, margin, height/width.. This always hits the same problem.
My XML for this view is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="483dp"
android:layout_weight="1.06"
android:layout_gravity="top">
</FrameLayout>
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/edit_message"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:layout_gravity="bottom"
android:onClick="SendMessageButton"
/>
</LinearLayout>
Though, i'm some-what stuck on how to make the correct changes & any response to this question would be greatly appreciated!
At the moment, all your child views live inside a single horizontally-oriented LinearLayout. LinearLayouts always arrange views sequentially, as you are experiencing.
There are a couple different ways to achieve the layout you are looking for. I'm going to suggest one that uses nested LinearLayouts (an outer one to stack things vertically, and then a nested one to arrange the EditText and Button horizontally), but you could also consider using a RelativeLayout for this.
Updated layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="SendMessageButton" />
</LinearLayout>
</LinearLayout>
Note that a LinearLayout is oriented horizontally by default; I have explicitly included the attribute here to make the structure more clear.
The reason, your button and editText is appearing far from the frame layout and not near the corner is the parent layout orientation is Horizontal.
Change it to Vertical.
Now, if you need your button and editText to be arranged in the same line, it should be mentioned as described in samgak answer.
However, i would like to suggest the following.
Using framelayout might create bad user experience across different screen sizes in android.
If the parent layout in Linear, if the screen size is x and all your components added if the height it takes is x-20, then the theme you set for parent layout would not cover the entire screen. Therefore, it is recommended to use RelativeLayout and for the button and editText, use the layout_alignParentBottom = true attribute.
If needed, i can share the code sample for this. Added Vertical Scroll to the layout.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="483dp"
android:layout_gravity="top">
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Edit Message"
android:layout_gravity="bottom" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:layout_gravity="bottom"
android:onClick="SendMessageButton"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
I apologize for the vague title, I'm not really sure how this problem would best be identified, and had difficulty finding preexisting questions on this matter.
I want the screen to look like the image on the left, but in practice it's looking like the image on the right.
The left is the fragment for a drawing toolbar, with placeholder icons for a pencil and eraser shown. It's desired that it always be in the bottom corner of the screen, while the rest of the screen is a drawing field (which is implemented in another fragment). I have a single activity which instantiates both fragments, which is shown on the right. As you can see, the toolbar elements are not in the desired spot. I do not know why this is happening. I know that I can move the toolbar fragment to its desired spot by adding buttons and such to the other fragment, but that would obfuscate the drawing field and so it is not desirable. How do I best deal with this issue?
Below is code for both XML files:
Drawing Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="bottom|left"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/pencil"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="left"
android:background="#drawable/pencil"
/>
<ImageButton
android:id="#+id/eraser"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/eraser"
/>
</LinearLayout>
And the Instantiating Activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".com.example.chris.drawingtest.DrawingActivity">
<fragment
android:name="com.example.chris.drawingtest.DrawingFragment"
android:id="#+id/Drawing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_drawing"
/>
<fragment
android:name="com.example.chris.drawingtest.ToolbarFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/Toolbar"
tools:layout="#layout/fragment_toolbar"
/>
</LinearLayout>
Thank you for any help!
The drawing fragment has no content currently. The toolbar content does have content. It is directly below the drawing fragment.
Something below nothing ends up being at the very top.
To fix this, add this line to your XML for the toolbar fragment:
android:layout_alignParentBottom="true"
Sorry, read this too quickly. LinearLayout doesn't provide layout_alignParentBottom. Instead, you'll want to use this:
android:layout_gravity="bottom"
I have some Popups on my screen, and need something not so common.
I Layout my popup with Header + Content + Footer into a LinearLayout. But I need a little arrow to show on my component.
When the popup is above the anchor and the arrow is down, I use the following code to have it drawed.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content" android:orientation="vertical"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/header" android:background="#drawable/background_header"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
<HorizontalScrollView android:background="#drawable/background"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:scrollbars="none">
</HorizontalScrollView>
<ImageView android:id="#+id/arrow_down" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginTop="-3dip"
android:src="#drawable/quickcontact_arrow_down" />
</LinearLayout>
In runtime I'm able to place the arrow exactly above the anchor with the following code.
ViewGroup.MarginLayoutParams param = (ViewGroup.MarginLayoutParams) mArrowDown
.getLayoutParams();
param.leftMargin = root.getMeasuredWidth()
- (screenWidth - anchor.getLeft());
And it's show correctly.
Now I need do the same thing but the arrow needs to show in the up side.
My problem is that the arrow need overlap a little over the other View (cause the backgrounds color match them), so this is why it's need to be draw after.
I tried with a FrameLayout and letting "content" has some topMargin, but it's not working.
I know it's can be done with AbsoluteLayout, but I'm avoiding it at all costs.
EDIT:
Following Josh answer, I wrote the following code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/content"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:fadingEdgeLength="0dip">
<RelativeLayout android:id="#+id/header"
android:background="#drawable/background_header" android:orientation="horizontal"
android:layout_width="match_parent" android:layout_height="wrap_content">
</RelativeLayout>
<HorizontalScrollView android:background="#drawable/background"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scrollbars="none">
</HorizontalScrollView>
</LinearLayout>
<ImageView android:id="#+id/arrow_up" android:layout_above="#id/content"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/quickcontact_arrow_up" />
</RelativeLayout>
But I don't know why, the arrow is not show now.
I won't pretend to have read all that xml. I think what you want is RelativeLayout, though. You should be able to use this technique to place any little arrow view where ever you like, relative to the bounds of the RelativeLayout which encompasses it.
If you wrap everything you have in a single RelativeLayout, for instance, and then add, say, a Button as the second item, you can give the button attributes like alignParentRight=true and layout_marginRight=10dp to place the button 10dp from the right edge of the screen, ON TOP of whatever views are already there.