I want to design a screen with a Google map and a footer. With the footer, i seperated it in a different xml layout file and used 'include' tag. The problem is the footer overlayed the map. My xml layout files were described bellow.
map_viewer.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/layout_mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/actionBtn"
android:layout_marginTop="5dp">
<fragment
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
map:uiRotateGestures="false"
class="com.glympsefunctionalitydemo.maps.Map"/>
<RelativeLayout
android:id="#+id/footer_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include layout="#layout/footer/>"
</RelativeLayout>
</RelativeLayout>
footer.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#null">
<ImageButton
android:id="#+id/actionBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_actions"/>
<ImageButton
android:id="#+id/mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/footer_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_map"/>
<ImageButton
android:id="#+id/mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/footer_horizontal_margin"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#null"
android:src="#drawable/btn_settings"/>
</RelativeLayout>
</merge>
The map takes all the space, the footer overlayed the map. But i just want the map to take the space left when showing the footer. How can i get it working.
Try this for map_viewer.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<fragment
xmlns:map="http://schemas.android.com/apk/res-auto"
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
class="com.glympsefunctionalitydemo.maps.Map"
map:uiRotateGestures="false" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/footer" >
</include>
</LinearLayout>
Related
I Have the following layout and I need the favorite image to placed on the upper right corner of the itemImage using FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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=".ItemDetails"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
tools:srcCompat="#mipmap/ic_launcher"
/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
tools:srcCompat="#mipmap/ic_launcher_round"
android:elevation="10dp"/>
</FrameLayout>
But the favorite image is never show ?? what is wrong with my layout
Any help will be much appreciated
Maybe this layout will work. I changed tools:srcCompat to android:src. tools: attributes are only visible in AndroidStudio, they are removed from the build.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
android:elevation="10dp"
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
</LinearLayout>
</ScrollView>
The result is this :
I want the ExpandableListView to fill the screen and I want to out the inner RelativeLayout below the ExpandableListView, but the ExpandableListView will fill the whole screen and I can't see the RelativeLayout.
What am I doing wrong?
I have this layout
<RelativeLayout 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="fill_parent"
android:orientation="vertical"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity">
<ExpandableListView
android:id="#+id/messagesListView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorBackground"
android:layout_gravity="right|top">
</ExpandableListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/messagesListView"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toStartOf="#+id/imageView3" />
</RelativeLayout>
</RelativeLayout>
Try this optimized layout:
<RelativeLayout
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="fill_parent"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity"
>
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:layout_alignParentBottom="true"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imageView3"
android:layout_toStartOf="#+id/imageView3"
/>
<ExpandableListView
android:id="#+id/imageView3"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_above="#id/messagesListView"
android:background="#color/colorBackground"
android:layout_gravity="right|top"
/>
</RelativeLayout>
It's flatter (I got you rid of the extra nested layout). Therefore, more performant.
Try this,
Remove the ** in the layout I just used to highlight the lines
Quite not sure anybody can edit this comment to improve:
You gave the height for ExpandableListView as android:layout_height="match_parent" and after u r trying to put a layout with property below so its already taken the full height. But here I gave the bottom layout has to be the Relative layout the ExpandableListView has to come above the relative layout
<RelativeLayout 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="fill_parent"
android:orientation="vertical"
android:paddingTop="#dimen/all_pages_padding_top"
tools:context="driver.mci.ir.mcicardriver.activity.MessagesActivity">
<ExpandableListView
android:id="#+id/messagesListView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorBackground"
**android:layout_above="#+id/textLayout"**
android:layout_gravity="right|top">
</ExpandableListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
**android:id="#+id/textLayout"**
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageButton
android:id="#id/imageView3"
android:layout_width="#dimen/login_icon_size"
android:layout_height="#dimen/login_icon_size"
android:scaleType="fitXY"
android:src="#drawable/sendmessage"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
/>
<EditText
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_toStartOf="#+id/imageView3" />
</RelativeLayout>
I am struggling with my Android Layout.
I want to create a Linear Layout which contains a Button at the Top, next a List View and when all elements of the list view are displayed I want to show a Fragment which displays Google Maps.
This is my Layout xml file. In that case you can only see the Fragment and the Button but not the listview
<?xml version="1.0" encoding="utf-8"?>
<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="fill_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:orientation="vertical"
tools:context="de.mypackage.MyActivity">
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
android:id="#+id/button_back"
android:text="#string/back"
/>
<ListView
android:id="#+id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1"/>
/>
<fragment
android:id="#+id/fragement"
android:name="de.mpackage.MapsFragment"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
tools:layout="#layout/fragment_maps"/>
</LinearLayout>
Any Idea how I can realize my layout?
Try this code
<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="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:weightSum="1"
android:paddingRight="10dp">
<Button
android:id="#+id/button_back"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/back" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" />
<fragment
android:id="#+id/fragement"
android:name="com.yougotag.supplierfieldagent.fragments.AboutFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
tools:layout="#layout/fragment_about_app" />
</LinearLayout>
this will set both in half screen you can change ration of weights in layout.
Advice :
Declare your root layout as RelativeLayout
RelativeLayout is a view group that displays child views in relative
positions. The position of each view can be specified as relative to
sibling elements .
Then use android:layout_below
Positions the top edge of this view below the given anchor view ID.
Accommodates top margin of this view and bottom margin of anchor view.
<fragment
android:id="#+id/fragement"
android:name="de.mpackage.MapsFragment"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_below="#+id/birth"
tools:layout="#layout/list"/>
Try this code
<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="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="#+id/button_back"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/back" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<fragment
android:id="#+id/fragement"
android:name="com.yougotag.supplierfieldagent.fragments.AboutFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_about_app" />
</LinearLayout>
Try this :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
tools:context="de.mypackage.MyActivity">
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
android:id="#+id/button_back"
android:text="#string/back"
/>
<ListView
android:id="#+id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_below="#+id/button_back"/>
/>
<fragment
android:id="#+id/fragement"
android:name="de.mpackage.MapsFragment"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
android:layout_below="#+id/list"
tools:layout="#layout/fragment_maps"/>
</RelativeLayout>
I found a solution hope it helps.
In my ListView for the height instead of using 0dp I used wrap_content and adds layout_weight=1 for my Fragment
<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"
android:background="#EFEFEF"
android:orientation="vertical">
<Button
android:id="#+id/button_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:divider="#null"/>
<fragment
android:name="de.mpackage.MapsFragment"
android:id="#+id/fragement"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:layout_weight="1"
/>
</LinearLayout>
How can I create the below layout in Android? I want the bottom bar to have a fixed size and the above-panel to grow based on the device size. Is there a library that's available to have the below effect?
Right now I used a relative layout but the height of the top panel doesn't grow.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="400dp">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_weight="0.71"
android:layout_below="#+id/linearLayout"
android:layout_height="150dp"></LinearLayout>
</RelativeLayout>
Try like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_above="#+id/tab_bar"
android:layout_height="match_parent">
</LinearLayout>
<LinearLayout
android:id="#+id/tab_bar"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="150dp"></LinearLayout>
</RelativeLayout>
You need to set android:layout_height="0dp" and android:layout_weight="1".
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.amrizal.example.firebasetester.SecondActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<TextView
android:text="Section 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#android:color/holo_blue_bright">
<TextView
android:text="Section 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
</LinearLayout>
Im attempting to add a camera symbol at the bottom of my application (Like Snapchat) overlayering a map, but cant seem to make it work. The layer and the imagebutton within places itself below the layer containing the map object. If i reduce the hight of the "map-layer" it works, but then there is, naturaly, a white void on either side of the camera symbol which is centered.
Any suggestions? Here is a picture and the layout file, i included the whole thing in case i made some mistakes early on that causes the issue. All help is much appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:background="#165d38">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton2"
android:src="#drawable/mark"
android:background="#00000000" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Swoop"
android:id="#+id/textView2"
android:textSize="18dp"
android:gravity="center_horizontal|right" />
</LinearLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton3"
android:src="#drawable/mr_ic_settings_light"
android:layout_weight="0"
android:backgroundTint="#00000000" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent">
<fragment tools:context="net.net16.swooptest.demomaps.MapsActivity"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:baselineAligned="false"
android:background="#00000000">
//THIS IS THE CAMERA BUTTON
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton4"
android:src="#drawable/abc_btn_radio_to_on_mtrl_015"
android:background="#00000000"
android:clickable="true"
android:layout_weight="1"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Try to use android:elevation property so button will be above map in relative layout