Map fragment filling almost all the screen - android

I am trying to share the height of my screen's layout between a MapFragment and a simple TextView, in such a way that the small TextView at the bottom of the screen takes all the space it needs, while the GoogleMap fragment fills the rest of the available screen.
like this:
The only problem is that I was only able to obtain such result by statically specifying the fragment's android:layout_height at 450dp, and I haven't found a way to do so dynamically, so that the layout would adapt both its landscape mode and to mobiles with different screen sizes.
This is what I've tried to do:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent" tools:context="madapps.bicitourbo.DetailsFragmentTwo">
<LinearLayout android:id="#+id/map"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="vertical"
android:weightSum="10">
<!--android:paddingRight="16dp"-->
<!--android:paddingLeft="16dp"-->
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapFrag"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="9"
android:name="com.google.android.gms.maps.MapFragment"/>
<TextView android:id="#+id/headerTitle"
android:gravity="center_horizontal"
android:layout_height="0dp"
android:layout_width="match_parent"
android:text="Partenza da: Piazza Santo Stefano"
android:textSize="#dimen/textSizeBig" android:textColor="#color/textLightBlack"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"/>
</LinearLayout>
</ScrollView>
and this is the unwanted outcome:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent" tools:context="madapps.bicitourbo.DetailsFragmentTwo">
<LinearLayout android:id="#+id/map"
android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical"
android:weightSum="10">
<!--android:paddingRight="16dp"-->
<!--android:paddingLeft="16dp"-->
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapFrag"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="9"
android:name="com.google.android.gms.maps.MapFragment"/>
<TextView android:id="#+id/headerTitle"
android:gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Partenza da: Piazza Santo Stefano"
android:textSize="#dimen/textSizeBig" android:textColor="#color/textLightBlack"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:layout_weight="1"/>
</LinearLayout>
The android:weightSum gives the LinearLayout a total weight of 10.
So the fragment gets 9/10 of the LinearLayout, and the TextView gets 1/10 of the layout.

you can use RelativeLayout for this
<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"
tools:context="madapps.bicitourbo.DetailsFragmentTwo">
<RelativeLayout
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--android:paddingRight="16dp"-->
<!--android:paddingLeft="16dp"-->
<TextView
android:id="#+id/headerTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:gravity="center_horizontal"
android:text="Partenza da: Piazza Santo Stefano"
android:textColor="#color/textLightBlack"
android:textSize="#dimen/textSizeBig" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapFrag"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/headerTitle" />
</RelativeLayout>
</ScrollView>

The comments to my question solved it.
The android:layout_weight attribute wasn't working only because putting a ScrollView as the root tag blocks its effects.
By putting a RelativeLayout as root tag the weigth attribute works, and the TextView should expand as needed upward while the map would adjust.

Related

ListView not scrolling for Xamarin.Android app

I've placed a fragment tag on my page for a google map and a listview surrounded by a linear layout tag underneath the map. Does anyone know why my list view isn't scrolling. I set my listview fastscrollenabled setting to true and it still doen't scroll.
var locationService = new LocationService(_geoCoder);
listView.Adapter = new ListOfLocationAdapter(this, locationService.GetLatLongOfAddresses());
this.listView.FastScrollEnabled = true;
Here is the XAML I use for the layout.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="1">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="300dp"
class="com.google.android.gms.maps.MapFragment" />
<LinearLayout
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/List"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:cacheColorHint="#FFDAFF7F"/>
</LinearLayout>
</GridLayout>
Here is the listadapter code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:orientation="vertical"
android:background="#ffffff">
<LinearLayout
android:id="#+id/Text"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="vertical">
<TextView
android:id="#+id/CustomerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20dip"
android:textStyle="italic"
android:paddingLeft="10dip" />
<TextView
android:id="#+id/Address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textColor="#000000"
android:paddingLeft="10dip" />
</LinearLayout>
</RelativeLayout>
I tried removing the relativelayout tag, but that didn't do anything for me.
Set weight to your listview & set height to 0dp. This will make it auto-fill any remaining space, causing the internal items of the listview to scroll.
<ListView
android:id="#+id/List"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:cacheColorHint="#FFDAFF7F" />
When I move the linearlayout around both the fragment and listview the scrolling starts working. For some reason the linear layout was showing off of the bottom of the android layout making it look like it wasn't scrolling until I added more records.
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="2"
android:columnCount="1">
<LinearLayout
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="300dp"
class="com.google.android.gms.maps.MapFragment" />
<ListView
android:id="#+id/List"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:cacheColorHint="#FFDAFF7F" />
</LinearLayout>
</GridLayout>
I had the same problem. I just set layout_height of my ListView to match_parent value. This solved my problem.

Android layout: variable-width view between two fixed-width views

How does one lay out 3 views horizontally such that the outer 2 views are of fixed width and the middle view fills the remaining available horizontal space? All of my attempts to do this have resulted in the rightmost view being pushed off the screen.
I struggled for a while to get this working and found how how to do it with RelativeLayout. See code example below and pay close attention to the usage of layout_toRightOf, layout_toLeftOf, and layout_alignParentRight
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/eventDetailSectionHeight"
android:background="#color/grayout">
<SomeFixedWidthView
android:id="#+id/leftFixedWidthView"
android:layout_width="100dp"
android:layout_height="match_parent"/>
<SomeVariableWidthView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/leftFixedWidthView"
android:layout_toLeftOf="#+id/rightFixedWidthView"/>
<SomeFixedWidthView
android:id="#+id/rightFixedWidthView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try setting layout_weight for each child according to requirement.
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<View
android:id="#+id/leftView"
android:layout_width="0dp"
android:layout_weight="0.4"
android:layout_height="match_parent"
android:background="#ff0000"/>
<View
android:id="#+id/middleView"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="match_parent"
android:background="#33cc33"/>
<View
android:id="#+id/rightView"
android:layout_width="0dp"
android:layout_weight="0.4"
android:layout_height="match_parent"
android:background="#ff0000"/>/>
</LinearLayout>
Use below code for your desired result
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/leftView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#ff0000"/>
<View
android:id="#+id/middleView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#33cc33"/>
<View
android:id="#+id/rightView"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#ff0000"/>
</LinearLayout>

How to make a dynamically moving View float on top of a ViewGroup?

I'm currently using a library that allows me to move freely a CardView in my screen, based on the user's finger. Here's my problem: I have a view Group on top that needs to stay below that CardView, but I'm not managing to do so.
I've tried using Frame Layout, but it didn't work as planned. The best I could do was that
but still, not what I meant to dO (card view completely floating around the "toolbar")
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/framelayout"
android:background="#color/verdeClaro"
tools:context=".View.Activity.LeitorMbookActivity"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:isScrollContainer="true"
>
<com.wenchao.cardstack.CardStack
android:elevation="4dp"
android:layout_marginTop="32dp"
android:id="#+id/cardStackContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding = "20dp"
android:clipChildren="false"
android:clipToPadding="false"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_gravity="top"
android:background="#android:color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="15"
android:gravity="center_vertical|right"
>
<ImageView
android:id="#+id/home_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/ic_home"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center_vertical"
>
<com.akexorcist.roundcornerprogressbar.RoundCornerProgressBar
android:id="#+id/progress_bar"
android:layout_height="6dp"
android:layout_width="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="24dp"
app:rcProgressColor="#color/white"
app:rcBackgroundColor="#color/verde_musgo"
app:rcRadius="2dp"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
The library I'm using to move the card is that.

Get the second quarter of layout's heigth

I have some difficulties with designing my app. My screen should contain toolbar and some edit fields. these fields should be places in the upper part of the screen under the toolbar. In the end it should look like this (sorry for quality of the image):
For this I decided to break the screen height into four equals parts and to pose my edit fields in the second quarter. I tried to use the following code to acchieve this, but it doesn't help: all the smaller relative layouts take all the screen.
I also tried:
to substitute the parent Relative layout with Linear layout
to replace "fill_parent" with "wrap_content".
After these actions the smaller layouts simply disappear.
<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"
android:baselineAligned="false" >
<include android:id = "#+id/toolbarLogo" layout="#layout/toolbar_logo"></include>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.25"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.25"
>
<EditText
.../>
<EditText
...
/>
<Button
.../>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
/>
</RelativeLayout>
Could you help me please with this problem?
Change your root layout to be a LinearLayout and ensure that the orientation is set to vertical. Change the layout_width of the children to be 1. See code below for an example:
<?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="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f00"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0f0"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f0f"/>
</LinearLayout>
Try It.. Set
android:layout_weight="1"
for each LinearLayout and
set
android:weightSum="4"
for Parent LinearLayout and
Like This Example..
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0ff"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#01a"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#101"/>
</LinearLayout>
</RelativeLayout>
You can use google library PercentRelativeLayout with this library you can set width, height and margin of your views by procentege which is great because in all screen they look the same and of course it is not hard to code it. Here example:
<android.support.percent.PercentRelativeLayout
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">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>
you must add this line in your build.gradle
dependencies {
compile 'com.android.support:percent:23.2.0'
}
Official documentation by Google https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html
And for your case should look maybe like this:
<RelativeLayout
android:id="#+id/firstLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_heightPercent="10%"
/>
<LinearLayout
android:id="#+id/secondLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/firstLayout"
android:orientation="vertical"
app:layout_heightPercent="40%">
<EditText
android:layout_width="200dp"
android:layout_height="60dp"/>
<EditText
android:layout_width="200dp"
android:layout_height="60dp"/>
<Button
android:layout_width="200dp"
android:layout_height="60dp"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/secondLayout"
app:layout_heightPercent="30%"
/>
</android.support.percent.PercentRelativeLayout>
Hope this helps.

Layout weight with two ListViews

I want two set Listviews vertically.
I want them to be 40% and 60% length of vertical screen respectively.
Here is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_weight="0.4"
android:layout_width="match_parent"
android:layout_height="0dp">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="0.6"
android:layout_width="match_parent"
android:layout_height="0dp">
<ExpandableListView
android:id="#+id/listEvents"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</LinearLayout>
But this doesn't work.
The first ListView takes all the screen.
I have also tried removing the LinearLayout that embeds the two ListViews, but it didn't work either.
I also tried with android:layout_height="wrap_content" in both Listviews and didn't work.
If I rotate screen to landscape and after back to port again, it works.
It fails the first instance creation.
Any idea on how to solve it?
This layout will work:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/lvwView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
/>
<ExpandableListView
android:id="#+id/elvEvents"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"
/>
</LinearLayout>
Just don't inherit from ListActivity or ListFragment!

Categories

Resources