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.
Related
Guys I have the code above which looks like this:
The issue is that I need to set the height hardcoded in order to make it visible.
What I want is to set the height till the bottom of my mainview.
Is this possible using the height attribute or do I need to use other attributes?
My current implementation looks like this:
<?xml version="1.0" encoding="utf-8"?>
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".pkgFragment.LocationAddFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/llLayoutAddLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/abLayoutAddLocation"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:rowCount="1"
>
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_columnWeight="1"
android:layout_height="match_parent"
android:text="#string/vehicle_name"/>
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_columnWeight="1"
android:layout_height="match_parent"
android:text="#string/vehicle_name"/>
</GridLayout>
</LinearLayout>
<org.osmdroid.views.MapView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#id/llLayoutAddLocation"
>
</org.osmdroid.views.MapView>
</RelativeLayout>
</ScrollView>
I MapView's height/width doesn't need to be hardcoded. I checked the repo myself. You can use match_parent to fill up the whole bottom area. Here is the sample from the repo MapView Sample Layout .
I suggest, Instead of RelativeLayout, use LinearLayout as the child(only) of ScrollView and set the MapView Height to match_parent.
Your code will look like 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/llLayoutAddLocation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:rowCount="1"
>
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_columnWeight="1"
android:layout_height="match_parent"
android:text="#string/vehicle_name"/>
<com.google.android.material.switchmaterial.SwitchMaterial
android:layout_columnWeight="1"
android:layout_height="match_parent"
android:text="#string/vehicle_name"/>
</GridLayout>
</LinearLayout>
<org.osmdroid.views.MapView
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</org.osmdroid.views.MapView>
</LinearLayout>
Edit:
I've edited the answer. Remove the scrollview and set the height and width of the Parent LinearLayout to match_parent.
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>
I am trying to include Caldroid calendar in my activity. I want that the calendar ocuppy 3/4 of the screen like this:
But it always shows at the top of the screen.
This is my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/opciones"
android:layout_width="299dp"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
And this is how i attach the caldroid:
FragmentTransaction t = getSupportFragmentManager().beginTransaction();
t.replace(R.id.calendar1, caldroidFragment);
t.commit();
I search it in StackOverFlow but i dont find the solution.
Finally i solved it implementing my own custom_cell and modify the padding_bottom to increase the cell size.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_cell"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="68dp"/>
</LinearLayout>
It is one solution but maybe not the most elegant.
there are two way for this :
first way :
use android:layout_weight="" instead static size for LinearLayout
for example :
<LinearLayout
android:id="#+id/parentLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/options"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:id="#+id/calendar1"
android:layout_width="0dp"
android:layout_weight="0.7"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
Second Way :
using PercentLayout (work with percentage and maybe Clearer)
add Percent library to your app by adding this line to gradle dependency:
dependencies {
...
compile 'com.android.support:percent:24.1.2' //or any other versions
...
}
in XML layout :
<LinearLayout
android:id="#+id/options"
android:layout_width="0dp"
app:layout_widthPercent="30%"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_toRightOf="#id/options"
android:id="#+id/calendar1"
android:layout_width="0dp"
app:layout_widthPercent="70%"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
notice that :
add http://schemas.android.com/apk/res-auto" to first parent of layout
android:layout_toRightOf specify the second view(layout_below is possible too)
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>