I'm trying to get 3 distinct Fragment's displaced vertically at a single Activity.
I'd like to:
Assign a proportional (preferently in percentage) height to each Fragment.
Fragments should take whole device width.
Change it's displacement according to rotation.
This is what my Activity layout looks like:
<LinearLayout 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"
android:orientation="vertical" >
<fragment
android:id="#+id/messageFragment"
android:name="apps.android.expressa.expressa.Fragments.MessageFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
tools:layout="#layout/message_fragment_layout" />
<fragment
android:id="#+id/listsFragment"
android:name="apps.android.expressa.expressa.Fragments.ListsFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
tools:layout="#layout/lists_fragment_layout" />
<fragment
android:id="#+id/bottomBarFragment"
android:name="apps.android.expressa.expressa.Fragments.BottomBarFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/bottom_bar_layout" />
</LinearLayout>
The problem is that right now, only first and second fragment and displayed and for third only a top is seen. As a note, I'm really new to Android now.
Hope this helps
<LinearLayout 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"
android:orientation="vertical"
android:weightSum="6" >
<fragment
android:id="#+id/messageFragment"
android:name="apps.android.expressa.expressa.Fragments.MessageFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
tools:layout="#layout/message_fragment_layout" />
<fragment
android:id="#+id/listsFragment"
android:name="apps.android.expressa.expressa.Fragments.ListsFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
tools:layout="#layout/lists_fragment_layout" />
<fragment
android:id="#+id/bottomBarFragment"
android:name="apps.android.expressa.expressa.Fragments.BottomBarFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
tools:layout="#layout/bottom_bar_layout" />
</LinearLayout>
Related
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.
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.
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!
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.
I need to create a layout as shown in the image.
The rounded button with the arrow needs to be exactly between the blue and the gray background.
I'm having difficulties placing it without specifying the margins precisely, which is something I don't want to do because there is no guarantee it will look good on all resolutions and devices.
I would appreciate an xml sample for that
Thanks!
Use the desired drawable.. hope it works.. you can set width and height according to your need.
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#1b96d9"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/arrow" />
</FrameLayout>
</LinearLayout>