creating a list using android xml and java - android

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>

Related

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"
...

Hiding the main layout of Custom Dialog

I have made layout for custom dialog, it has inside two imageview. I want to show both Imageview when dialog appear. and i want to hide the main layout of my xml file I have used "#00000000" as background:color, but it is not working.
Is there any way to do the same?
Thanks.
Here is my layout. I have taken screen shot please have a look i want to hide the border which are showing in image.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical" android:background="#00000000">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView android:id="#+id/img_closeimage" android:src="#drawable/product_zoom_close"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:clickable="true"></ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_marginLeft="25dip" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="-5dip" android:layout_marginBottom="20dip" android:layout_marginRight="20dip">
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
></ImageView>
</LinearLayout>
</LinearLayout>
image description here
Adinias comment is correct, your layout has quite some redundancy. You also say that you only want to show an imageview, but your layout contains two imageviews. If you only want to show one imageview, then your layout should look like this:
<?xml version="1.0" encoding="utf-8"?>
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
If you want to show two ImageViews, use this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical" android:background="#00000000">
<ImageView android:id="#+id/img_closeimage" android:src="#drawable/product_zoom_close"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:clickable="true"/>
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
</LinearLayout>
Your current layout looks the way it does because you have specified the layout to take as much space as possible with android:layout_height="fill_parent" and android:layout_width="fill_parent". Try to use wrap_content as height and width instead.

unusual Listview error

I made a small android application that maintains a list of video files on the sd-card and plays it. I am using a listview with text and two images in each row. The problem I just noticed is quite usual. In horizontal mode, only those list items that fit into the screen area appears as normal while those items who require scrolling to get appeared, are either in wrong order or they are just repetition of the items in the top of the list. Moreover, by scrolling up and down, sometimes the order of items changes.. I am using two xml files. First for list view and second for the contents of the listview. here is the code for both xml files
<?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">
<ListView
android:id="#+id/list"
android:listSelector="#android:color/transparent"
android:divider="#drawable/bwgradient"
android:dividerHeight="1.5px"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
<?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="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:src="#drawable/cover"
android:scaleType="centerCrop"/>
<TextView
android:id="#+id/text"
android:state_focused="false"
android:listSelector="#00000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="left|center_vertical"
android:textSize="14dip"
android:layout_marginLeft="20dip"/>
<ImageView
android:id="#+id/play"
android:layout_width="30dip"
android:layout_height="30dip"
android:src="#drawable/play"
android:onClick="imageClick"
android:layout_gravity="center"
android:layout_marginRight="20dip"
android:scaleType="centerCrop"/>
</LinearLayout>
Any possible suggestion ??
when orientation changes from horizontal to portrait and vice verse,the activity will recreate itself(the Activity object destroyed and new Activity object will create).See docs http://developer.android.com/reference/android/app/Activity.html#ConfigurationChanges for more information

Setting the background on a selected listview?

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

Android - how to get ListView to line up underneath Text View

I am attempting to put a ListView beneath a Text View in an Android App. However, the first line of the ListView shows up on the same line as the TextView. How do I get this to move underneath?
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="#+id/android:question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/dummy_question" />
<ListView android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/no_notes"/>
</LinearLayout>
I think at first look prob. is only that in linearlayout put
android:orientation=vertical
it will solve ur prob.
Try using a TableLayout. Example. Good luck.
I see two issues. First, as chirag mentioned, you need to set the ListView orientation. Second, a listView cannot 'wrap content' for height. What would it wrap to? One row, two? Basically, a listView has no idea how tall you want it to be. Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:id="#+id/android:question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/dummy_question" />
<ListView android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="0px" android:layout_weight="1" />
<TextView android:id="#+id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/no_notes"/>
</LinearLayout>

Categories

Resources