I want to add two aligned buttons below google map.I have tried adding buttons below but its not showing and whenever i try to change size of map,interface gets different for different devices. how can i do it? Please help. Here is my code given below without button code -
activity_maps.xml -
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/etSearch"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="search"
android:id="#+id/btnSearch"
android:layout_gravity="end"
style="?android:attr/buttonStyleSmall"
android:onClick="onSearch" />
</LinearLayout>
<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=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
</LinearLayout>
If I guessed right your problem is that any Buttons below the map fragment (inside the main LinearLayout) are not visible. This can be solved by setting the map fragment's layout_height to 0dp and giving it a layout_weight of 1. The UI elements above and below the map fragment should have the layout_height set to wrap_content just like you have done.
The idea is that the other UI elements use just the amount of the screen height that they need and the map fragment will then use all the remaining space. A similar approach can commonly be used in all kinds of layouts that have some elements with fixed height/width and one element that is supposed to scale to an optimal height/width.
As XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/etSearch"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="search"
android:id="#+id/btnSearch"
android:layout_gravity="end"
style="?android:attr/buttonStyleSmall"
android:onClick="onSearch" />
</LinearLayout>
<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="0dp"
android:layout_weight="1"
android:id="#+id/map"
tools:context=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
<!--The Buttons below the map fragment-->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2" />
</LinearLayout>
</LinearLayout>
You can do it by specifying layout_weight attribute for map fragment and linear layout that holds editText and a button.
For example:
<LinearLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content">
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/etSearch"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="search"
android:id="#+id/btnSearch"
android:layout_gravity="end"
style="?android:attr/buttonStyleSmall"
android:onClick="onSearch" />
</LinearLayout>
<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"
android:layout_weight="1"
tools:context=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
This will split the space equally for map fragment and linear layout, but feel free to try different numbers to achieve what you want
Related
I've placed three buttons as below,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard"
android:id="#+id/standard_map"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="satellite"
android:id="#+id/satellite"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hybrid"
android:id="#+id/hybrid"/>
</LinearLayout>
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.MapFragment"
map:cameraTargetLat="13.0827"
map:cameraTargetLng="80.2707"
map:cameraBearing="112.5"
map:cameraTilt="65"
map:cameraZoom="20"/>
</LinearLayout>
The output yield is as below:
image explaining the problem
The orientation of the inner Linear Layout is horizontal and that's perfectly fine. I need the buttons to be aligned in centre (Vertically centred). Even when I use android:gravity="centre", it aligns the buttons horizontally centred which is of no use. I need the buttons to be vertically centred in an Horizontal Linear Layout.
As far as I understand your Question, you want to make middle button
in center, so I have done some changes, please update your code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/standard_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard"
android:layout_weight="1"/>
<Button
android:id="#+id/satellite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="satellite"
android:layout_weight="1"
/>
<Button
android:id="#+id/hybrid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hybrid"
android:layout_weight="1"/>
</LinearLayout>
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:cameraBearing="112.5"
map:cameraTargetLat="13.0827"
map:cameraTargetLng="80.2707"
map:cameraTilt="65"
map:cameraZoom="20" />
</LinearLayout>
Please let me know if any problem with this.
In the second LinearLayout change layout_gravity and orientation properties. So, your second layout should be like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:orientation="vertical">
...
</LinearLayout>
And you will achieve this:
This is the code of the XML file of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.barda.wikirace.MainActivity"
android:background="#drawable/backgroundmain"
android:orientation="vertical"
android:weightSum="1"
android:id="#+id/activity_main"
>
<ImageView
android:id="#+id/wikiRaceTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/transparent"
app:srcCompat="#drawable/wikiracetop" />
<TextView
android:id="#+id/emptyView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/twoPlayersBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/twoplayersbutton"
/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"/>
<Button
android:layout_marginBottom="7dp"
android:id="#+id/singlePlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/playbutton"
android:onClick="startSinglePlayerMenuActivity"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"/>
</LinearLayout>
</LinearLayout>
This is how it looks in the preview:
And this is how it appears on the device (LG G4):
What can cause the problem?
As you can see, I want the buttons to be on the right color for them.
why don't just use the constraint layout?
if you want to do it in the way you're doing it, you will have to setup the width with a fixed value or match_parent why? because when you say wrap_content and the image is big is going to be over the other views as is happening also you can setup a android:layout_weight for the button if you want to use the weight as "control" for your layout, be coherent with the method that you use to adapt the views.
I've got Activity with MapFragment and simple LenearLayout with buttons. On the image you can see little padding (about 3 dp and gray colored) between LienarLaouyt and Map. This padding belongs to mapFragment - i checked it by switching background color of main layout and linear layout. How can i remove it?
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/select_period_button_label"
android:id="#+id/fragmentHistory_selectPeriodButton"
android:textSize="20sp"
android:layout_weight="1"
android:background="#drawable/control_button_selector"
android:textAllCaps="false" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/track_button_label"
android:id="#+id/fragmentHistory_trackButton"
android:textSize="20sp"
android:layout_weight="1"
android:background="#drawable/control_button_selector"
android:textAllCaps="false" />
</LinearLayout>
<fragment
android:id="#+id/activityDeviceCurrentLocation_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Try This...
<fragment
android:id="#+id/activityDeviceCurrentLocation_map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
I'm currently using a GridLayout to get a view that looks something like this:
I'm trying to create this layout by defining the following layout xml:
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="5"
android:rowCount="2" >
<LinearLayout
android:id="#+id/banner"
android:layout_row="0"
android:layout_columnSpan="5"
android:orientation="horizontal" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_row="1"
android:layout_columnSpan="2" />
<RelativeLayout android:id="#+id/previewpane"
android:layout_row="1"
android:layout_column="2"
android:layout_columnSpan="3"/>
</android.support.v7.widget.GridLayout>
While this compiles and runs without crashing, the ViewPager is taking up all the screen space for some reason. Why would this happen (seeing it should only occupy 2 columns out of 5 and only the bottom row) and how can I change this layout to properly display like shown in the illustration?
I didn't manage to get it right using the GridLayout so in the end I decided to just use a RelativeLayout/LinearLayout construction instead. (Using a RelativeLayout as the root view to prevent having to use nested weights)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/default_bg_color">
<LinearLayout android:id="#+id/banner"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_below="#id/banner"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<RelativeLayout android:id="#+id/previewPane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
</RelativeLayout>
I am currently trying to work out how to align certain elements within my Android app's GUI.
Please see the image link below, the first layout is the current one, and the second is what I am aiming for.
Currently, I am using two linear Layouts. I have tried to use relative and table layouts for the right hand buttons and EditText, but always the EditText is shrunk, or overflows the tablet's screen size.
Thanks for your help!
Image Link: (http://postimage.org/image/pptkdkomx/)
Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5" android:text="Button2"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
Why don't you use RelativeLayout and on your EditText use android:layout_alignBottom="myImage"
Just brought together a quick template, you may need to fix + add your own attributes since I used only notepad:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
<Button android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"/>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</LinearLayout>