Develop Reference

Background Images in Android ListView are not Showing Up

I have a custom ListView and adapter, and this is the code for my listview_item.xml:
<?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="wrap_content" >
<ImageView
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="17.0dip"
android:fontFamily="sans-serif-condensed"
android:paddingTop="17.0dip"
android:textColor="#color/white"
android:textSize="24.0dip" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
android:layout_marginLeft="18.0dip"
android:layout_marginTop="-3.0dip"
android:fontFamily="sans-serif-condensed"
android:textColor="#ffaaaaaa"
android:textSize="13.0dip" />
<Button
android:id="#+id/btnRanks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Ranks" >
</Button>
</RelativeLayout>
I want to set an image as the background of each list item, but when I call imageView.setImageDrawable(drawable);, I get a listview that looks like this: . You can see that the image fills the entire width of the listview, but not the height. How do I get the image to fill the listview's height as well?
By the way, this is the intended background image:

In your ImageView, instead of
android:layout_height="match_parent"
use
android:layout_height="wrap_content"
I'd also remove the attribute
android:scaleType="centerCrop"

Long text in Android TextView pushes out other Objects

I have created a ListView which shows different media files with the possibility to play them.
Each row consists of a RelativeLayout with two widgets. (The SeekBar and the Rest)
The upper part of this RelativeLayout is a RelativeLayout too.
It consists of three parts:
A play button (inside a LinearLayout for padding)
A TextView for the file name
A LinearLayout box containing some labels
They are put together using the android:layout_toRightOf property.
This works quite well, unless the file name is extremely long.
A long file name causes the right LinearLayout 'Box' to be pushed outside the screen.
In addition the whole (inner) RelativeLayout gets stretched vertically without reason.
I have already tried to setandroid:ellipsize="end" and android:singleLine="true". But that didn't fix it.
Heres the full code:
<?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="horizontal"
android:padding="8dp" >
<!-- Top Box -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fragment_play_row_topbox" >
<!-- Play button -->
<LinearLayout android:id="#+id/fragment_play_row_iconBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="4dip" >
<ImageButton
android:id="#+id/fragment_play_row_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#android:drawable/ic_media_play" />
</LinearLayout>
<!-- Big Text -->
<TextView
android:id="#+id/fragment_play_row_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/fragment_play_row_iconBox"
android:text="\??"
android:textSize="24dp"
android:ellipsize="end"
android:singleLine="true" />
<!-- Size & Duration & Button-->
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/fragment_play_row_text"
android:layout_alignParentRight="true"
android:gravity="right" >
<TextView
android:id="#+id/fragment_play_row_size"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text=" ?? MB" />
<TextView
android:id="#+id/fragment_play_row_duration"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text=" ??:??" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#android:drawable/arrow_down_float" />
</LinearLayout>
</RelativeLayout>
<!-- Seek Bar -->
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/fragment_play_row_topbox" />
</RelativeLayout>
I hope someone can help me fix this.
Thanks in advance,
Uriel

You have to reference as the info layout as the root of your items, referencing it to the parent and the text referencing to the info layout, by this way you will not have this problem, I've modified a little bit your layout just adding an id to the info layout (linearInfo), remmember when you set an id is "#+id/my_item" but when you are referencing to it is "#id/my_item", here is your layout modified, hope it helps you:
<?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="horizontal"
android:padding="8dp" >
<!-- Top Box -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/fragment_play_row_topbox" >
<!-- Play button -->
<LinearLayout
android:id="#+id/fragment_play_row_iconBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearInfo"
android:layout_alignTop="#+id/linearInfo"
android:padding="4dip" >
<ImageButton
android:id="#+id/fragment_play_row_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:src="#android:drawable/ic_media_play" />
</LinearLayout>
<!-- Big Text -->
<TextView
android:id="#+id/fragment_play_row_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearInfo"
android:layout_alignTop="#+id/linearInfo"
android:layout_centerVertical="false"
android:layout_toLeftOf="#+id/linearInfo"
android:layout_toRightOf="#+id/fragment_play_row_iconBox"
android:ellipsize="end"
android:gravity="center_vertical"
android:singleLine="true"
android:text="\?? Ultra Hyper Mega Giant Text"
android:textSize="24dp" />
<!-- Size & Duration & Button-->
<LinearLayout
android:id="#+id/linearInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/fragment_play_row_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ?? MB" />
<TextView
android:id="#+id/fragment_play_row_duration"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text=" ??:??" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#android:drawable/arrow_down_float" />
</LinearLayout>
</RelativeLayout>
<!-- Seek Bar -->
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/fragment_play_row_topbox" />
</RelativeLayout>

Android - RelativeLayout with image and text, design problems

I have a relative layout with an image and two textviews (one for the news title and the other one for the date). I put a hardcoded value for the width of the textview with the title. If I use wrap content it overlaps the date.
Here's my xml code:
<?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:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dp"
android:padding="3dp" >
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/internet"
android:contentDescription="News" />
</LinearLayout>
<TextView
android:id="#+id/txtTitle"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
android:textSize="14sp" />
<TextView
android:id="#+id/txtDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/txtTitle"
android:layout_marginRight="5dp"
android:gravity="right"
android:text="23.09.2013"
android:textColor="#C0C0C0"
android:textSize="10sp" />
</RelativeLayout>
For the screen size 4,7 it looks like this:
screen size 4,7
But for the screen size 5,1 it looks bad:
screen size 5,1
My goal is that I have the same look for each screen size.
The space between the title and the date should always be the same.
How can I achieve this?

You're already using a RelativeLayout, so surprisingly there is a quick fix for you here. Leave your TextView's width as match_parent, but what you want to do is sandwich it between the ImageView and the TextView you use for your date. Try doing the following (note that I have to switch the order of the TextViews in your layout to make this work).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dp"
android:padding="3dp" >
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="News" />
</LinearLayout>
<!-- Note: I switched txtDate and txtTitle in your layout file ONLY -->
<!-- This will NOT change their order in your actual view -->
<TextView
android:id="#+id/txtDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/txtTitle"
android:layout_marginRight="5dp"
android:gravity="right"
android:text="23.09.2013"
android:textColor="#C0C0C0"
android:textSize="10sp" />
<!-- This is the important part, note the android:layout_toLeftOf -->
<!-- Also remember to change the width back to "wrap_content -->
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/thumbnail"
android:layout_toRightOf="#+id/thumbnail"
android:layout_toLeftOf="#id/txtDate"
android:text="Timberlake's fourth studio album The 20/20 Experience – 2 of 2 was released on September 30, 2013."
android:textSize="14sp" />
</RelativeLayout>
This should give you your desired view.
Hope this helps. Good luck and happy coding!

ListView displaying problems

I have a listview that consists three columns. The first one is an ImageView, the second and third one are textviews (see code blow).
I want the list to be aligned like this:
the icon and the date should always been shown completely !!
the text in the middle should show as much chars as possible
the date should always be on the right of the right side
With the XML below it looks ok on my Nexus 4. But on the asus tablet the date should be more on the right and the coloumn in the middle should show more text (screenshot 1). On the AVD (screenshot 2) the coloumn in the middle should be smaller and the date should be shown completely.
Can anyone tell me how to change the XML? Thanks!
<?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:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginLeft="5px"
android:layout_marginRight="20px"
android:layout_marginTop="5px"
android:src="#drawable/social_chat"
android:layout_weight="0"
>
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="0px"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
<TextView
android:id="#+id/last_changed"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="15px"
android:layout_marginLeft="5px"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>

Off the top of my head your layout would look something like this.-
<?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:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="5dp"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
The key here is to use wrap_content for the views that just need to keep their size, and set a weight for the middle view, which you want to fill the rest of the row.
Some useful tips.-
fill_parent is deprecated, use match_parent instead
When a view has no children, you can just close it with />
singleLine="true" is enough to have a singleLined TextView
You'll usually want to use dp units instead of px

This should do your job. I have put the imageview on the parents left, the date on the parents right and the label to the rightof image and to the left of date.It should work fine for you. Margins , padding please put yourself
<?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" >
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#id/last_changed"
android:layout_toRightOf="#id/logo"
android:singleLine="true" />
</RelativeLayout>

what RelativeLayout properties should i use?

i want to design a layout for my app as shown below in image
but im getting problem which is that the properties im applying for relative layout are not going right as in below my xml code there is horizontal ruler image having centerInParent property and a verticle ruler image also having property of centerInParent by doing this the both rulers come to accurate place but when i put a child above the horizontal ruler or a child toLeftOf verticle ruler they dont appear as the graphical view of xml file shows the reason that although by applying centerInParent the both rulers come to center but their reference remains at edges thats why by using layout_above or layout_toLeftOf the childs go outside of layout
My xml code
<?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="#FFFFFF"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginTop="2.5dip"
android:src="#drawable/smicon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#id/icon_img"
android:layout_marginTop="3dip"
android:text="Welcome To JEM"
android:textStyle="bold"
android:id="#+id/wcm_id"
android:textSize="18dip"
android:textColor="#FFFFFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/wcm_id"
android:layout_alignParentRight="true"
android:layout_marginRight="5dip"
android:text="APPS BY SAM"
android:id="#+id/app_by"
android:textSize="16dip"
android:textColor="#FFFFFF"
/>
</RelativeLayout>
<!-- This relative layout which is showing the main cross and icon around it -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_hr"
android:layout_centerInParent="true"
android:src="#drawable/horizontal"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_vr"
android:layout_centerInParent="true"
android:src="#drawable/verticle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/getuser"
android:src="#drawable/adduser"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/set"
android:src="#drawable/set"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/get"
android:src="#drawable/get"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/ico"
android:src="#drawable/icon"
/>
</RelativeLayout>
</LinearLayout>
so guys please tell me how can i achive this main cross and icon to lef,right and above,below it as shown in image

Try this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/vertical_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
/>
<ImageView
android:id="#+id/horizontal_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/horizontal_ruler"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
android:layout_below="#id/horizontal_ruler"
/>
May be it helpful for you..

You could use a TableLayout embedded in a RelativeLayout. The RelativeLayout can be used to center the TableLayout on the screen and in the TableLayout you can add your pictures/buttons and state how many rows and colums you want the TableLayout to have.