Develop Reference

ScrollView with LinearLayout child does not wrap_content correctly

So, I have the following .xml:
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.scopesystems.cityalert.ui.Despre"
tools:showIn="#layout/app_bar_despre"
android:background="#drawable/toolbar_incercare">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear_parent">
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2.8" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--General-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/general"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/despre_general"/>
<!--Evaluti-ne-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/evaluatine"
/>
<!--Confidentialitate si licente-->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/sectionHeader"
android:text="#string/confidentialitate"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/despre_politici"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</LinearLayout>
</ScrollView>
The issue is that the last ListView is on only 1 row, and it has to be scrolled to display all the items in the list. I tried to add to the linear_parent a height of match_parent but it wont let me, it says that I should use instead wrapcontent. How can i change the layout to display the items on all the screen, not just half?

In this case, On the ScrollView use android:fillViewport="true" and for child of ScrollView android:height="wrap_content".

Placing Fragment below Listview

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>

Linear Layout with Weights and Scroll View

I'm trying to create a responsive layout using weights but I also need to use a scroll view in this case.
This is my code at this moment:
<RelativeLayout 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=".EncyclopediaFragment">
<!--Linear Container-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<!--Title Box-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:orientation="horizontal"
android:weightSum="100">
<!--Empty Space-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
</LinearLayout>
<!--Text Box-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="95">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/encyclopedia_mosntersLabel"
android:gravity="center"
android:textAlignment="viewStart"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
</LinearLayout>
</LinearLayout>
but it needs to be like this.
That layout is suppose to be responsive with weights but at the same time I need to make it possible to scroll.
So my question is: how can I create a layout responsive with weights and at the same time a layout that can scroll down, just like in the picture?

If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:
<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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Monsters"/>
<!-- the following LinearLayout should be repeated twice for 6 Monsters -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Towers"/>
<!-- the following LinearLayout should be repeated twice for 6 Towers -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<!-- attention here for two Towers in the last row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>

The content inside your ScrollView should use wrap_parent, and if you want to stretch the content inside it set android:fillViewport="true". Try this:
<RelativeLayout 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=".EncyclopediaFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Linear Container-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

<RelativeLayout 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=".EncyclopediaFragment">
<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Linear Container With Weights-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

Design a round button over two colored layouts

I'm trying to design something like that :
Currently i'm having issue putting the button at "the middle" of the two layouts reunion point. Is there a way i do this ?
Thanks.

Here is a way to do it
<?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"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FF0000">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#FFFF00"
android:weightSum="0.5">
<!-- TO ADD CONTENT HERE -->
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#000000"
android:text="TEST"
android:textColor="#FFFFFF"/>
</RelativeLayout>
OUTPUT:
You can change the layout height from android:layout_weight="0.5"

you can use RelativeLayout for your parent and try adding twoLinearLayouts , one below another and set their heights, now place a Button in your RelativeLayout and set android:layout_centerInParent="true" for your Button .
and if you want to use weight for layouts, instead of adding two LinearLayout to your RelativeLayout, add one LinearLayout with weightSum=100 and then add two LinearLayouts to it with custom weights.
for your case , you have to do sth like this :
<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="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:background="#f00" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#0f0" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="test" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Android Relative Layout with sticky footer

I'm relatively new to Android development and I'm having a hard time putting together a certain interface. I've looked through many similar questions but none of them give me the answer i'm looking for.
I want to put together an XML interface like the following:
I want a LinearLayout that acts like a sticky footer that will contain two Buttons. This part will always align to the bottom and and will always be 60dp high. The RelativeLayout would then be on top of the footer, but it's height should scale depending on the screen size.
I've tried the following:
<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="match_parent"
android:orientation="vertical"
tools:context=".DartboardActivity">
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="506dp"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard" />
<hhs.week3.dartboard.VerticalSeekBar
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:thumb="#drawable/thumbhorizontal"
android:layout_marginBottom="40dp" />
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:thumb="#drawable/thumbhorizontal" />
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333">
<Button
android:id="#+id/fire"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/fire" />
<Button
android:id="#+id/settings"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>
I got it working half decently, but it requires me to give the RelativeLayout bit a fixed height, making it look right on my phone, but not on others.
How do I best approach this?

Use the LinearLayout layout_weight mechanism to assign all remaining space to your RelativeLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
... />
</LinearLayout>

Try following code
<RelativeLayout 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:orientation="vertical"
tools:context=".DartboardActivity" >
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttons"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#333"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I removed LinearLayout and replaced with RelativeLayout. This will allow you to set your LinearLayout stick to bottom.

I was able to achieve the same result by using below code. Basically, the parent layout is one Linear layout and the first child element is a scrollview so it can squeeze its content when the keyboard is shown. Also note the use of the android:layout_height="0dp" and android:layout_weight="1" used with the scrollview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/wrap2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
<FrameLayout
android:id="#+id/buttonsPanel"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#333" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="action buttons" />
</FrameLayout>
</LinearLayout>

Try this
<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="match_parent"
android:orientation="vertical"
tools:context=".DartboardActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard"
android:adjustViewBounds="true"/>
<hhs.week3.dartboard.VerticalSeekBar
android:layout_marginTop="10dp"
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:thumb="#drawable/thumbhorizontal"/>
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:thumb="#drawable/thumbhorizontal" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333333">
<Button
android:id="#+id/fire"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/fire"/>
<Button
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/settings"/>
</LinearLayout>
</LinearLayout>