Android Fill the empty space in a layout - android

My layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/skyblue" >
<TextView
android:id="#+id/tvPlaceHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/places"
android:layout_margin="10dp"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:contentDescription="#string/search"
android:id="#+id/ivPlace"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo" />
<TextView
android:contentDescription="#string/search"
android:id="#+id/tvTrivia"
android:textSize="14sp"
android:textStyle="bold"
android:layout_margin="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/search" />
</LinearLayout>
</ScrollView>
The screenshot:
My question is, why is it not covering the whole layout? I mean it has a white space below but I declared in my xml to have its background color as blue.

Change your inner LinearLayout height
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" // CHANGED LINE
android:orientation="vertical"
android:background="#color/skyblue" >

Remove this line android:background="#color/skyblue" from LinearLayout and write in ScrollView
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/skyblue"
>

Related

Putting ScrollView and bottom menu on the same view

The layout I'm trying to put ScrollView above of the menu at the bottom of the screen (which is just an <include> wrapped in <LinearLayout>.
Problem: ScrollView doesn't work (last elements of it cannot be shown on the screen and is show "below" the menu, which looks like there was no ScrollView at all) and I can't scroll through it.
Layout .xml file:
<?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="wrap_content"
android:background="#drawable/bg" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout
android:id="#+id/l1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center_vertical" >
<com.myapp.AutoResizeTextView
android:id="#+id/text_discounts_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:drawableLeft="#drawable/ic1"
android:drawablePadding="5dp"
android:gravity="center_vertical"
android:maxLines="100"
android:paddingTop="5dp"
android:text="#string/label1"
android:textColor="#color/text_black"
android:textSize="14sp" />
<TextView
android:id="#+id/text_discounts_month_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/text_discounts_month"
android:layout_weight="0.4"
android:gravity="right"
android:minEms="2"
android:text="#string/label1_number"
android:textColor="#color/text_black"
android:textSize="14sp" />
</LinearLayout>
<!-- Horizontal line -->
<View
android:id="#+id/hr1"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#id/l1"
android:layout_marginTop="10dp"
android:background="#android:color/darker_gray" />
<!-- There are many more items as the item below inside the layout, i.e. LinearLayout followed by a horizontal line -->
</LinearLayout>
</ScrollView>
<!-- Bottom menu -->
<LinearLayout
android:id="#+id/down"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="15dp"
android:gravity="center_vertical" >
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/menu_bottom_full" />
</LinearLayout>
</RelativeLayout>
Try this
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/down"
android:fillViewport="true" >
<?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:background="#drawable/bg" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
Try this

Linear Layout not visible

In the following piece of code the Linear Layout at the extreme bottom is not visible.I tried several methods but couldn't make it visible.Please take a look
<?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:background="#color/GlobalBG"
android:orientation="vertical" >
<include
android:id="#+id/id_nav_bar"
layout="#layout/app_nav_layout" />
<ListView
android:id="#+id/id_home_screen_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#android:color/transparent" />
<RelativeLayout
android:id="#+id/id_linear_layout_system_capacity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dip"
android:background="#drawable/home_storage_bg"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="40dip"
android:gravity="center_horizontal"
android:text="Dummy"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/id_linear_layout_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/home_seekbar_bg" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home_bottom_bg"/ >
</LinearLayout>
you have put
android:layout_width="wrap_content" android:layout_height="wrap_content"
as wrap_content and there is no content inside your layout so it is not visible maybe
Fixed the problem by editing the code as below:-
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="17dip"
android:gravity="center_horizontal"
android:text="Dummy"
android:textStyle="bold" />
As I understand this invisible layout should be always visible in the bottom of the screen, then you should better use RelativeLayout insted of LinearLayout
Change this layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/GlobalBG"
android:orientation="vertical" >
TO <RelativeLayout> and set this android:layout_alignParentBottom="true" to your invisible layout
Edited:
this works for me
<?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:background="#color/red" >
<RelativeLayout
android:id="#+id/id_linear_layout_system_capacity"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dip"
android:background="#color/row_base_background_end"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="20dip"
android:gravity="center_horizontal"
android:text="Dummy"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/id_linear_layout_seekbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#color/row_base_background_start" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/gray" >
</LinearLayout>
</RelativeLayout>

Align a layout to the top of another layout in order to make a status bar

I have a layout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:padding="0px" >
<include
android:id="#+id/tabBar"
layout="#layout/tab" />
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:background="#drawable/ready"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#id/app"
android:background="#drawable/dropshadow_custom" >
<TextView
android:id="#+id/error"
style="#style/AudioFileInfoOverlayText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/app"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I try to align the last LinearLayout on top of the layout which holds the ListView by using this tag: android:layout_alignTop="#+id/app" But it doesn't seem to work. How can accomplish this?
Many Thanks!
Without any content a Layout with layout_width="wrap_content" and layout_height="wrap_content" is not shown as its width and height have a value of 0! Even if you have set some background color nothing will appear! You either have to add some content to the layout or you have to define another layout dimension. The position of your layout with android:layout_alignTop="#+id/app" should be correct. Hope that helps.
You can set "layout_below" on the first layout targeting to the last layout.
The code is that, I put a button inside the top layout as an exemple (Obs: In your listview you should use 0dp in layout_weight cause you already use layout_weight ^^) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e4e8ed"
android:gravity="top" >
<LinearLayout
android:id="#+id/app"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0px"
android:orientation="vertical"
android:layout_below="#+id/top"
android:padding="0px" >
<Button
android:id="#+id/nist"
android:layout_width="match_parent"
android:layout_height="67dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:textColor="#FFFFFF" />
<ListView
android:id="#+id/lastCases"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.08"
android:longClickable="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dp"
android:layout_below="#+id/app" >
<TextView
android:id="#+id/error"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="120dp"
android:gravity="center"
android:text="No Cases"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#D6D8D9"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#000000"
android:gravity="bottom"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Top"
/>

Android LinearLayouts conflicting with each other

I have two LinearLayout
One contains a EditText with a patch9 image as a speech bubble and another with a TextView and ImageView
When I try typing into the EditText is begins to expand towards the right hand side then starts to reduce the width of the second LinearLayout (crushing the image)
XML is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:orientation="vertical" >
<EditText
android:id="#+id/summaryMessage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/greeting_bubble_white"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<ImageView
android:id="#+id/summaryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/picture_frame" />
<TextView
android:id="#+id/summaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Looks like this
Any ideas?
its expanding since you have specified that layout_width of your LinearLayout should be "wrap_content", you should specify a fixed dimension with dps so it doesn't expand beyond.
Alternative use the weight tag
try out this modification:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_weight="0.7">
<EditText
android:id="#+id/summaryMessage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/greeting_bubble_white"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="right"
android:orientation="vertical" >
<ImageView
android:id="#+id/summaryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/picture_frame" />
<TextView
android:id="#+id/summaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="10dp" />
</LinearLayout>
however I would suggest more that you use this one:
<?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:background="#color/white"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/summaryMessage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:background="#drawable/greeting_bubble_white"
android:gravity="center" />
<TextView
android:id="#+id/summaryText"
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="10dp" />
</LinearLayout>
and that you use compound drawables on your summaryText here is a link that should help you: Using Compund Drawables
Use a relative layout, the layout editor is in fact pretty good so use it to position your views

Layout problem: how to place something on top and bottom?

I want create a layout, with a horizontal LinearLayout(s) on top and bottom, a ListView fill in middle.
How can I define the main.xml.
I tried to create a layout with horizontal LinearLayout on top, TextView on bottom, a ListView fill in middle; is ok. But after I modified the bottom TextView to LinearLayout, the bottom LinearLayout disappear.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:textSize="12px"
android:text="something here"
android:layout_width="50px"
android:layout_height="wrap_content"
/>
<TextView
android:textSize="12px"
android:text="something here"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
>
<ListView
android:id="#+id/listbody"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12px"
android:text="50%"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12px"
android:text="50%"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Anybody can tell advise?
Please help.
Try containing the whole set in a RelativeLayout:
<?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:id="#+id/top_linear_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_linear_layout_id"
android:layout_below="#id/top_linear_layout_id" />
<LinearLayout
android:id="#+id/bottom_linear_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
</LinearLayout>
</RelativeLayout>
Edited with sizing stuff.
Here's what you're looking for. Estel's on the right track with the RelativeLayout (although it can be done with a LinearLayout, I think the RelativeLayout approach is cleaner, though) but the layout is out of order Nevermind, check Estel's comment which proved me wrong. :) You should first define your header, align it to the top; next, define your footer, and align it to the bottom; finally, declare your ListView, give it a height of fill_parent, and set it to layout above the footer and below the header:
<?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="fill_parent"
>
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:alignParentTop="true"
>
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:alignParentBottom="true"
>
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
/>
</RelativeLayout>
The problem would be that you are defining both of them relative to the size of the content they contain, but if the combined content of both is bigger than the screen then one of them will have to overlap the other one, you would be better to define the layout_height using an absolute measurement in a linear layout
Thanks all for your advice and direction of RelativeLayout. I can fix it now.
I have to define the footer LinearLayout before the ListView, and define ListView as android:layout_alignParentTop="true" and android:layout_above="#id/footer"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:textSize="12px"
android:text="something here"
android:layout_width="50px"
android:layout_height="wrap_content"
/>
<TextView
android:textSize="12px"
android:text="something here"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/footer"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12px"
android:text="50%"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12px"
android:text="50%"
/>
</LinearLayout>
<ListView
android:id="#+id/tablebody"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#id/footer"
/>
</RelativeLayout>
</LinearLayout>
This will definitely solve your problem:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:textSize="12sp"
android:text="something here"
android:layout_width="50dp"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12sp"
android:text="something here"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</HorizontalScrollView>
<ListView
android:id="#+id/listbody"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12sp"
android:text="50%"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="12sp"
android:text="50%"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>

Categories

Resources