Background Images in Android ListView are not Showing Up - android

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"

Related

RelativeLayout doesn't match parent's height

The relativelayout inside main layout won't fill the parent height when it's displayed on device. In fact i want the left-side layout with the yellow color to fill the row vertically.
here is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/verses_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.ad.holyquran.extra.TextViewEx
android:id="#+id/textView_Verse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/versesRelativeLayout"
android:gravity="right"
android:layout_marginTop="-15dp"
android:paddingBottom="5dp"
android:paddingRight="5dp"
android:text="Text"
android:textSize="#dimen/versesTextSize"
android:textColor="#ff000000" />
<TextView
android:id="#+id/textView_VerseTranslation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView_Verse"
android:paddingBottom="5dp"
android:gravity="fill_horizontal"
android:layout_centerHorizontal="true"
android:layout_toRightOf="#+id/versesRelativeLayout"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:text="Text Text Text Text Text Text"
android:textSize="20sp" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/versesRelativeLayout"
android:layout_alignParentLeft="true"
android:background="#fff3f27f">
<RelativeLayout
android:id="#+id/verseNumberIcRL"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/versesImageView"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/verse_number_ic" />
<TextView
android:id="#+id/textView_verseNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/versesImageView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="280"
android:paddingBottom="28dp"
android:textSize="14sp"
android:textColor="#ff000000" />
</RelativeLayout>
</RelativeLayout>
Thanks for reading.
If you remove the line
android:layout_toRightOf="#+id/versesRelativeLayout"
It will stop being on the right. If you need the yellow as background, then in the main layout (which is the first relativeLayout) set it as the background using
android:background="#drawable\image"
You may need to put all the other elements inside the main RelativeLayout.
Hope this helps.
I couldn't see the end tag of the main RelativeLayout.
Just add the tag in layout versesRelativeLayout:
android:layout_alignBottom="#+id/textView_VerseTranslation"
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/versesRelativeLayout"
android:layout_alignParentLeft="true"
android:background="#fff3f27f"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="false"
android:layout_alignBottom="#+id/textView_VerseTranslation"
>

Android ListFragment: background under each item

I'd like to create a ListFragment in Android, and a background for each element, like this:
I'll want to set the width of theese background's from the code of my ListAdapter. I thought to create the list element's layout something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:id="#+id/surveyListRow_upperLayout"
android:layout_marginTop="7dp"
android:layout_marginBottom="7dp">
<RelativeLayout
android:layout_marginLeft="23dp"
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/surveyListRow_ringLayout"
android:background="#FFFFFF"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/textColor"
android:gravity="center"
android:id="#+id/surveyListRow_surveyName"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="55dp"
android:layout_marginRight="105dp"/>
<TextView
android:layout_width="80dp"
android:layout_height="match_parent"
android:textSize="18sp"
android:gravity="center"
android:id="#+id/surveyListRow_surveyPrize"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="57dp"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0000"
android:layout_weight="30"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="70"/>
</LinearLayout>
</RelativeLayout>
And I'll set the weight property of the LinearLayout's children, to set the background width.
My problem is, when the text in the width is too long (as you can see in the third element). Then the background isn't scales to the bottom of the element.
Can you help me, why? I've tried almost everything I can imagine.
Thanks!
Try to add this to your TextView
<TextView
...
android:ellipsize="end"
android:ems="2"
android:maxLines="2" />
This don't let your textview has more than two lines and put an ellipsis on the end.
Maybe this would be a solution.

Use a vertical line in a ListView item

I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.
I understand this is an issue because I see alot of questions on here, but don't see any real answer.
The XML is pretty standard:
Cell:
<?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/appWhite" >
<View android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
<RelativeLayout
android:id="#+id/cell_trip_info_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/vertical_bar" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_name"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_trip_country"
android:layout_below="#+id/cell_trip_name"
android:textColor="#2c3e50"
android:paddingLeft="10dp"
android:text="adfadf" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/whole_container"
android:layout_alignParentRight="true" >
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:id="#+id/cell_trip_date_box"
android:layout_alignTop="#+id/update_buttons"
android:layout_alignBottom="#+id/update_buttons"
android:padding="20dp" >
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_date_thru"
android:text="#string/thru"
android:layout_below="#+id/cell_tripstart_date"
android:layout_centerHorizontal="true"
android:textColor="#fff" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/cell_tripend_date"
android:layout_below="#+id/cell_date_thru"
android:textColor="#fff"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/update_buttons"
android:visibility="gone"
android:layout_toRightOf="#+id/cell_trip_date_box"
android:background="#e9e9e9"
android:padding="20dp" >
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_edit_trip"
android:src="#drawable/slide_edit"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/cell_button_delete_trip"
android:src="#drawable/slide_delete"
android:layout_toRightOf="#+id/cell_button_edit_trip"
android:adjustViewBounds="true"
android:contentDescription="#string/content_description" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I found the cause and the obvious solution/workaround on another post Here
Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.
It worked fine this time, easily allowing me to create my vertical rule.
In your cell_trip_info_container RelativeLayout you have
android:layout_toRightOf="#+id/vertical_bar"
You dont have a View named vertical_bar
Add that ID to your vertical bar view and you should be good to go
<View
android:id="#+id/vertical_bar"
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#color/appGreen"
android:layout_alignParentLeft="true" />
change
RelativeLayout
to
VerticalLayout

Android view does not show up

I have this layout in my application, the problem is, the ImageView which has the ID overlay, does not show up over the others, and when I check the layout with Android SDK Hierarchy viewer tool, that ImageView has 0 height, placed at the bottom of the layout. What am I missing? Or what is the reason?
Thanks.
NOTE: This problem does not occur when I replace that view with a Button in the same condition. But it occurs with a View, or ImageView.
EDIT: I am using mentioned ImageView to make the whole view a bit reddish, and I'm using it as a ListView item.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image" />
<ImageView
android:id="#id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<ImageView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#77ff0000" />
</RelativeLayout>
This is what I see with your xml(with dummy text and image)
1.) Is this what you want? I ll be surprised if you are not seeing this
2.) If this forms your individual list item xml then in your main list xml make sure you have this as your parameters
android:layout_width="fill_parent"
android:layout_height="wrap_content"
or you might not see the edges of this item (the text and the image and you might see only the red overlay, or the text and image might get overlapped)
EDIT:
If this is what you want - so that the list item now forms a list item like state then
Modify your code to
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/panda" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Stack Overflow"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#77ff0000" />
</RelativeLayout>
Change Image and text to what you want at runtime
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image" />
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<ImageView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#77ff0000" />
In imageview you cant assign all the alignment type together either
[1].top with right or left
[2].bottom with right or left.
I guess what you need to do is android:layout_alignParentCenter="true"
instead of
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
# NOTE: Everything comes under View which is a parent class whether its a Button or ImageView
The height of the imageView is 0 because you havent set any source. Fixing these bugs you can try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image" />
<ImageView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#77ff0000" />

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.

Categories

Resources