Android ListView GUI difficulties - android

http://i.stack.imgur.com/4Irb3.png
click above link for screen shot.
Ok so i'm having some problems editing my xml layout to get this list looking good. Basically i want each row of info to fill the whole list row, so that the white space you see in between each row isn't there. I have tried manipulating multiple different attributes in the row.xml and the main.xml but nothing has worked so far. Anyone have any advice? Thanks
row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="4dip"
android:paddingBottom="6dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:orientation="horizontal">
<TextView android:id="#+id/position"
android:textColor="#color/white"
android:background="#color/black"
android:layout_width="20dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"/>
<TextView android:id="#+id/team_name"
android:textColor="#000000"
android:background="#color/grey"
android:gravity="center"
android:layout_width="70dip"
android:textSize="14dip"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView android:id="#+id/games_played"
android:textColor="#000000"
android:background="#color/cyan"
android:layout_width="5dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView android:id="#+id/points"
android:textColor="#000000"
android:background="#color/turquoise"
android:layout_width="5dip"
android:textSize="14dip"
android:gravity="center"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/white"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="Team"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="right"
android:layout_width="wrap_content" />
<TextView
android:text="Games Played"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="center"
android:layout_width="wrap_content"
android:paddingLeft="22dip" />
<TextView
android:text="Points"
android:background="#color/red"
android:textColor="#color/white"
android:gravity="left"
android:layout_width="wrap_content"
android:paddingRight="18dip"/>
</TableRow>
<TableRow >
<ListView
android:background="#color/white"
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</TableRow>
</TableLayout>


Did you set android:minHeight prop as well as android:layout_height of LinearLayout? this will fixes the row height.


i figured it out, i had to remove the padding attributes in the linearlayout, can't believe i didn't figure it out before!

Related

Buttons below the ListView

I have the listView with set of items. And I want to add 2 buttons below the list. But if I do like this:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:background="#000000"
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<CheckedTextView
android:id="#+id/checkedTextItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:clickable="true"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:textColor="#000000"
android:paddingLeft="10dip"
android:paddingRight="6dip"
android:typeface="sans" android:textSize="16dip"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignBottom="#+id/fileManagerList">
<Button
android:id="#+id/attachFiles"
android:layout_width="200dp"
android:layout_height="55dp"
android:background="#007FFF"
android:gravity="center|center"
android:text="Attach files"
android:layout_alignBottom="#+id/fileManagerList"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
<Button
android:id="#+id/cancelFiles"
android:layout_width="82dp"
android:layout_height="55dp"
android:background="#838B83"
android:gravity="center|center"
android:layout_alignRight="#+id/attachFiles"
android:layout_alignBottom="#+id/fileManagerList"
android:text="Do not attach"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
my buttons displaying in each row of ListView. I tried do it the same way but using RelativeLayout, but I get correct list, buttons were in the bottom, but they overlay the last item of the list. How can I implement this?

Try this Layout, You can achieve your goal using the below XML Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relRingtone"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:contentDescription="#string/ringtone"
android:layout_marginLeft="3dip"
android:textSize="2dp" />
<LinearLayout
android:id="#+id/closecalmlayout"
android:layout_below="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
</LinearLayout>
</RelativeLayout>
Hope it helps.

This is because you are using #+id everywhere, wherever you are referring any id. Ex.:
android:layout_alignBottom="#+id/fileManagerList"
Use "#id/" instead.
And also, try:
android:layout_below="#id/fileManagerList" // Add this attribute in button.

How to right align text

I was trying to change the alignment of text. This is what i have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/ctime"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="time" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/cstatus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="100"
android:text="status" />
</TableRow>
</TableLayout>
</LinearLayout>
Everything is left-aligned in the output even after setting android:layout_gravity="right".
This is a part of the layout, as I cant post the entire layout.

use this one
android:gravity="right"

TableRow with image and 2 TextView

I`m having problems for do something like this: http://imageshack.us/photo/my-images/824/examplehm.png/
My xml code shows 3 columns in the row but i want 2 columns and the second column must be divided in two horizontal parts.
My .xml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ListView android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
<TableRow>
<ImageView android:id="#+id/imagen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dip"
android:paddingRight="5dip" />
<TextView android:id="#+id/cabecera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12px" />
<TextView android:id="#+id/descripcion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="10px" />
</TableRow>
</TableLayout>
Someone could help me?
Thanks.

Put LinearLayout by the image and then put in it two TextViews , or use RelativeLayout for entire row.
Here is example of the first solution:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow>
<ImageView android:id="#+id/imagen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dip"
android:paddingRight="5dip" android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" android:gravity="center_vertical">
<TextView android:id="#+id/cabecera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="12px"
android:text="TextView"/>
<TextView android:id="#+id/descripcion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:textSize="10px"
android:text="TextView" />
</LinearLayout>
</TableRow>

Android linear layout align center and right

This is what I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="right|center_vertical"
/>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="right|center_vertical"
android:layout_gravity="center_vertical"
android:background="#E30000">
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon"
android:gravity="right|center_vertical"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
And I want this:
So horizontal center align the text and vertical center align the button.
What am I missing? I haven't tried RelativeLayout and I would prefer LinearLayout to work this out.

android:gravity="right|center_vertical"
aligns your TextView to the right. How about center_horizontal?
And your LinearLayouts have the same ID, if there is not more code, then I would delete one of them.

try this one
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="center_horizontal|center_vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:layout_weight="1"
android:gravity="center"/>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="right|center_vertical"
android:layout_gravity="center_vertical"
android:background="#E30000"
android:layout_width="wrap_content">
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:drawableLeft="#drawable/icon"
android:gravity="right|center_vertical"
android:layout_height="wrap_content"
android:layout_margin="5dip"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

I found none of the answers work exactly as the OP intended, but the RelativeLayout solution was the closest one. Except that the TextView wasn't centered. But, with layout_centerInParent=true, works like a charm:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:layout_centerInParent="true" />
<Button
android:id="#+id/btnCalls"
android:drawableLeft="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>

you have used android:gravity="right|center_vertical" in your textview. Use android:gravity="center".

Try to add empty View inside horizontal LinearLayout between element that you want see left and element that you want to see right, e.g.:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

define layout weight for TextView and LinearLayout
set android:layout_weight="1" to TextView
set android:layout_weight="0" to LinearLayout
and also change the layout_width="wrap_content" to LinearLayout
and set layout_gravity="center" to TextView

I think,gravity means the position of things inside the component(for textview,it means the text you have given)in component where layout_gravity means position of component itself in the whole layout.So...
Try Using:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#FFFFFF"
>
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#E30000"
android:layout_gravity="right"
android:gravity="center_vertical|right"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:gravity="center_vertical|center"
android:layout_weight="0.9"
>
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal|center_vertical"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:gravity="center_vertical|right"
android:paddingTop="5dip"
android:layout_weight="0.1"
>
<Button
android:id="#+id/btnCalls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon"
android:layout_gravity="center_vertical"
android:gravity="center"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Just use RelativeLayout, and wallaaa!!!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="20px"
android:textStyle="bold"
android:text="Something"
android:gravity="center" />
<Button
android:id="#+id/btnCalls"
android:drawableLeft="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>

The solution for this is-
android:gravity="center_vertical"
Normally you'll also have to take care of its parent's position too to make sure it works.

Android Create aligned fields Layout

Here's my issue I have a login and want to line up the EditText fields. See the mockup picture attached .
I have tried a few ways and cannot figure out how to make the fields lineup.
I really hate layouts in Android I spend more time just messing with things to line up right. Wish they would just scrap it and use something more intuitive, as its more like using tables in HTML. So in advance thanks for your help and cheers!

You could probably play around with RelativeLayout and get just what you want.
Here's an approximation with TableLayout.
<?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">
<TableLayout
android:layout_marginTop="40dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="10dip"
android:text="UserID:" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:text="USER ID" />
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="10dip"
android:text="Password:" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
android:text="PASSWORD" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_marginTop="50dip"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="3"
android:gravity="center">
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="LOGIN" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="REGISTER" />
</LinearLayout>
</LinearLayout>

See if this works for you. It doesnt center quite perfectly but it does align well across multiple screen sizes.
<?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" android:background="#FFFF0000">
<LinearLayout android:id="#+id/top_row"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_marginTop="25dip">
<LinearLayout android:layout_height="wrap_content" android:orientation="horizontal" android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content" android:text="User Id" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:orientation="horizontal" android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content" android:text="Password" android:gravity="right" android:layout_marginRight="10dip" android:layout_width="fill_parent" android:layout_weight="2" android:textColor="#FF000000"></TextView>
<EditText android:layout_height="wrap_content" android:layout_width="fill_parent" android:ems="10" android:layout_weight="1"></EditText>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_width="wrap_content" android:layout_below="#+id/top_row" android:layout_centerHorizontal="true" android:layout_marginTop="20dip">
<Button android:layout_width="wrap_content" android:text="LOGIN" android:layout_height="wrap_content" android:layout_marginRight="10dip"></Button>
<Button android:text="REGISTER" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginLeft="10dip"></Button>
</LinearLayout>
</RelativeLayout>
Here's what it looks like in my IDE...

You can do this quick and dirty using TableLayout, just add a TableRow with a TextView and a EditText for the userid and repeat the same for the password.
See http://developer.android.com/resources/tutorials/views/hello-tablelayout.html

Categories

Resources