Setting the background on a selected listview? - android

I have the following 2 layout files to display a list of contact groups. The view in it's normal state looks perfect. Semi transparent list items over my background. When I touch the list to move it the background goes to black rather than staying semi transparent.
gouplist.xml
<?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"
android:background="#drawable/megaphone_320x480">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<TextView
android:id="#id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="No Groups"
/>
</LinearLayout>
two_line_list.xml
<?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">
<TextView
android:id="#+id/lv_topText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#BBBBBB"
android:background="#99000000"
android:textSize="24sp"
android:typeface="sans"
android:textStyle="bold"
/>
<TextView
android:id="#+id/lv_bottomText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#BBBBBB"
android:background="#99000000"
android:textSize="18sp"
android:typeface="sans"
android:textStyle="bold"
/>
</LinearLayout>

The cacheColorHint property needs to be set on the actual listview, like so. As 3dmg stated, it'll usually be set to the same background color as the container that the ListView is in. In the example below, the ListView would be inside a LinearLayout which also has a white (#FFF) background.
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:cacheColorHint="#FFF" />

I think it was this list parameter:
android:cacheColorHint="#color/colorOfYourList"
android:cacheColorHint

Related

For Android is there an example of controls outside list view?

<!-- test.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/my_location_table_layout_results">
<ListView
android:id="#+id/button_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ListView>
<Button
android:id="#+id/fragmenttab1_item_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Help" >
</Button>
</FrameLayout>
I have not found example like this so not sure what I need to do is possible.
I need to open up a dialog that has multiple fragments and on one of those fragments have a textview with button that when the button is selected it
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TableLayout
android:id="#+id/my_location_table_layout_results"
android:layout_width="match_parent"
android:layout_height="35dp"
android:stretchColumns="1"
android:shrinkColumns="0"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<EditText
android:id="#+id/fragmenttab1_item_edittext"
android:layout_width="0dp"
android:layout_weight="0.7"
android:gravity="center"
android:textSize="20sp"
android:layout_height="50dp" />
<Button android:layout_alignParentRight="true"
android:id="#+id/fragmenttab1_search_btn"
android:layout_width="0dp"
android:layout_weight="0.3"
android:layout_height="50dp"
android:gravity="top"
android:textSize="20sp"
android:text="Search"
style="WW3dBaseTheme" />
</TableRow>
</TableLayout>
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/test"
android:layout_below="#+id/my_location_table_layout_results" />
</RelativeLayout>
populates a listview of buttons that is shown below the textview/button on the same fragment.
Is that possible? I tried but for some reason instead of just the list of buttons I get copies of the textview/button pair and the button I want in the listview. It is almost as if because I have the listview in the xml it pulls in all the ui controls when it renders inside the listview. Here is the xml>
As I expected it turned out I needed to put the xml for control for the listview in another xml file in order to draw properly in the list.

Use ListView as background of TextView

I have the below layout which contain mainly:
Relative layout, which act as header with Textview and button.
and Listview.
I would like to make the "header" which is the above relative layout to be transparent and show the listview as user scroll down the list view.
I know how to make the layout transparent, but I dont know how to show the listview as background for the "header".
<?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:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFDBE2ED"
android:paddingBottom="0dp"
android:paddingTop="0dp"
>
<TextView
android:id="#+id/txtTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical"
android:layout_centerVertical="true"
android:paddingLeft="0dp"
android:text="#string/list_header"
android:textColor="#000000"
android:textSize="25sp"
android:textStyle="bold">
</TextView>
<Button
android:id="#+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0px"
android:layout_marginLeft="10px"
android:layout_marginRight="3px"
android:layout_marginTop="6px"
android:height="0dp"
android:text="Clear"
android:textSize="15sp"
android:width="70dp"
android:layout_alignParentRight="true"
>
</Button>
</RelativeLayout>
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/form"
android:layout_alignParentTop="true" >
</ListView>
</LinearLayout>
You are using a LinearLayout as the root container and in linear layout the views are placed one over the other so you cannot overlap one view over the other. If you want an overlapping effect you can use either the FrameLayout or the RelativeLayout as the root container.
Using RelativeLayout is a better option.
Here is sample code for this:
<?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:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<Button
android:id="#+id/view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#00cc0000"
android:layout_alignParentTop="true" />
</RelativeLayout>
Here the button is overlapping the list view.
I hope this will help :)
Try moving the ListView inside of your RelativeLayout, as the first element (this ensures that it's in the back). This way, the other views are just on top of the ListView, and if you make them transparent you should get the desired effect!
Oh, and you should make the ListView then fill the RelativeLayout:
<ListView
android:id="#+id/mylist1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
</ListView>
, and make the RelativeLayout fill the screen:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonlayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
...

creating a list using android xml and java

I got a list from the web (link is here )
where it uses two xml layouts to create a list, the first xml is just the background where the second xml is going to be displayed as buttons in a list.
what I am trying to do is have that same list but add a tittle or a picture title at the top, i've been playing around with the list but i cant get it to work, the only way i can think to make this happen is somehow moving the position in which the second xml is displayed and have the top part to add whatever i like.
Thank you for the help and ideas to make this work!
[EDIT] code snippet...
First XML layout
<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="schemas.android.com/apk/res/android";
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_weight="1"
android:scrollbars="none"
android:divider="#000000"
android:scrollingCache="true" android:layout_height="wrap_content"/>
Second XML layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#AA010101"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ListView android:id="#+id/list"
android:layout_width="1px"
android:layout_height="1px"
android:layout_weight="1">
</ListView>
<RelativeLayout xmlns:android="schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_height="fill_parent">
<ImageView android:id="#+id/img"
android:layout_width="80dp"
android:layout_height="70dp"
android:layout_alignParentLeft="true"
android:scaleType="fitXY" />
<TextView android:layout_width="wrap_content"
android:id="#+id/title"
android:layout_height="wrap_content"
android:paddingTop="18dp"
android:layout_toRightOf="#+id/img"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_marginRight="50dp"
android:paddingLeft="10dp"
android:textSize="16sp" />
</RelativeLayout>
</LinearLayout>
You have to edit the XML file containing the <ListView>, by adding whatever you want before (most probably a TextView with a Compound Drawable). So that what you called the "background" looks more like this:
Main layout should host a <TextView> (+eventuall a Compound Image) + a <ListView>.
Secondary layout should host the content of each of your list item. If you have a <ListView> in each XML layout, it means you will have a list of lists... I don't know much about your list and app, and do not know what information you would like to display in each list item (e.g. ContactName, CalendarDate, Cities... whatever). But there are very few chances that you need a ListView in both of them.
mainListLayout.xml
<?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”>
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="text to replace image"
android:drawableLeft="#drawable/reference"
android:text="Title of the list"/>
<ListView
android:id=”#android:id/list”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />
</LinearLayout>
The Drawable can obviously be on the Right, Top or Bottom, and not only on the Left. You might also like to have a look at android:drawablePadding="#dimen/xxx to add some extra space between text/title and the image. Drawable has to be one of your ic_* png files from res/drawable (eventually -hdpi, -mdpi and so on)
itemLayout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:contentDescription="#string/ItemIcon"
android:layout_width="000"
android:layout_height="000"
android:src="#drawable/ic_icone"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView
android:id="#+id/ItemDescription"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textColor="#000000"
android:text="ItemDescription" />
</RelativeLayout>

Listview issue with item background

I've got problem with my ListView item's background, it's bigger than should be.
Here is my background resource:
And it's screenshot from my device:
Layout:
<?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:orientation="vertical"
android:background="#drawable/bg_nocar">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="50dp"
android:layout_marginLeft="6.67dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/reservation"
android:textStyle="bold"
style="#style/reservation_text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/reservation.1"
style="#style/reservation_text" />
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/reservation.selectclass"
style="#style/reservation_selectclass_text"
android:layout_marginTop="33.33dp"
android:layout_marginLeft="6.67dp" />
<ListView
android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#00000000"
android:dividerHeight="0.67dp" />
</LinearLayout>
That's my item layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reservation_row"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/car_bg"
android:orientation="horizontal">
<LinearLayout
android:layout_width="93.33dp"
android:layout_height="98.67dp"
android:orientation="vertical"
android:layout_marginLeft="6.67dp"
android:layout_marginTop="13.33dp">
<TextView
android:id="#+id/classname"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/reservation_classname" />
<TextView
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/reservation_name"
android:layout_marginTop="16.67dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="98.67dp"
android:orientation="vertical"
android:layout_marginLeft="6.67dp"
android:layout_marginTop="13.33dp">
<ImageView
android:id="#+id/img"
android:layout_width="150dp"
android:layout_height="93.33dp"
android:layout_marginTop="6dp" />
<TextView
android:id="#+id/price"
android:layout_width="30dp"
android:layout_height="20dp"/>
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Why the background is so big?
Since you dont want your image to scale to the dimensions of the list item, you should not put it as a background.
Instead you can do this. Let the background be white (since your car_bg resource is all white with one logo). Then, your listview layout can look like this:
<RelativeLayout> //background white
<ImageView> //Your car_bg with width and height set as wrap_content
<LinearLayout> //All the content that you previously had
</RelativeLayout>
This way your image will not get scaled and remain as the original one. That said, you must now take car of different screen dimensions yourself. You must have different densitiy images available for your car_bg resource.
Try scaling the ImageView to keep its aspect ratio instead of attempting to set its height/width manually. This is most likely why your ImageView appears to be stretched.

Relative Layout, Textview not showing

I am using this XML to show my one Button at the bottom and one TextView at the top with one TextView right in the middle. The middle textview covers the whole span in between the button and the top textview. The middle TextView is not being displayed at all. What is wrong?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/task"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
/>
<Button
android:id="#+id/btnAddTask"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/AddTasks"
android:layout_alignParentBottom="true"
/>
<TextView
android:id="#+id/TasksList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
android:layout_above="#id/task"
android:layout_below="#id/btnAddTask"
/>
</RelativeLayout>
Your problem is definitely that you have the TasksList TextView below your button. Swap your layout_above and layout_below values. This works for me:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/task"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
/>
<Button
android:id="#+id/btnAddTask"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/AddTasks"
android:layout_alignParentBottom="true"
/>
<TextView
android:id="#+id/TasksList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
android:layout_above="#id/btnAddTask"
android:layout_below="#id/task"
/>
</RelativeLayout>
The problem wsa that you reversed your layout above and the layout below:
try
android:layout_below="#id/task"
android:layout_above="#id/btnAddTask"
See screenshot.
And here is the complete layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/task"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
/>
<Button
android:id="#+id/btnAddTask"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/AddTasks"
android:layout_alignParentBottom="true"
/>
<TextView
android:id="#+id/TasksList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
android:layout_below="#id/task"
android:layout_above="#id/btnAddTask"
/>
</RelativeLayout>
There's definitely something wrong with how you have this laid out.
You have for the button, alignParentBottom="true"... then for the TasksList TextView it is set to be below the button... basically off the screen.
You can remove orientation from the RelativeLayout... Relative layout's do not have orientation like LinearLayout's do.
As you're describing... I'm not 100% you can do it with a Relative Layout. If you simply wanted one thing on top, one centered and the other on bottom, it would be best to use a single layout parameter for each one, centerInParent, alignParentTop and alignParentBottom.
If you reconsider LinearLayout (as I'm guessing you started with) you'd stick with a Vertical Orientation, then give them layout_weight of 0, 1, and 0 making sure the height was set to wrap_content.
<?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">
<TextView
android:id="#+id/task"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
<TextView
android:id="#+id/TasksList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/tasks"
android:layout_weight="1"
/>
<Button
android:id="#+id/btnAddTask"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/AddTasks"
android:layout_weight="0"
/>
</LinearLayout>

Categories

Resources