Xamarin android layout - transparent background of row item - android

I have a custom listView which is built from the following row item layout. What i need is for the background to be semi-transparent. I can do this as shown in the code below using the Alpha attribute and setting it to 0.5. However, what this also does is make my textView and imageView semi-transparent too.
How can i just make the background colour semi-trans, but have the text and image normal/opaque?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#ffffff"
android:padding="8dp"
android:alpha="0.5">
<ImageView
android:id="#+id/Image"
android:layout_width="110dp"
android:layout_height="90dp"
android:layout_marginRight="6dip"/>
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22dip"
android:textStyle="italic" />
<TextView
android:id="#+id/Text2"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:singleLine="true"
android:ellipsize="marquee"/>
</LinearLayout>
</LinearLayout>

Try using the ARGB value for the background instead of using alpha. You can set it to 50% transparency by using #80FFFFFF.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#80ffffff"
android:padding="8dp">
See this post

Related

Android TextView Text wont wrap on Listview

hello i am trying to wrap a textview that has a long text. but when i test it, it just goes beyond the screen. What im trying to do is it will go to the next line if the text is long and it automatically adjust the layout. I am using this in a listview.
i am referring to this old question Android TextView Text not getting wrapped, it works on him so i tried to implement it but it wont effect on mine. thanks for answering.
here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:background="#e6e6e6"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
<TextView
android:id="#+id/tv_reviewer_name"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceLarge"
android:text="Reviewer Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:width="0dip"/>
</LinearLayout>
</LinearLayout>
UPDATE
here's my listview:
<ListView
android:divider="#android:color/transparent"
android:dividerHeight="2.0sp"
android:id="#+id/lv_reviews"
android:background="#f2f2f2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
You can use the inputType to auto manage a multiline text.
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:width="0dip"
android:inputType="textMultiLine"
/>
if i use listView or recyclerView, i well put the layout width match parent as mentioned below:
<LinearLayout
<!--change to match_parent-->
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
try it once, hope this will help you.
problem solved. it turns out android studio didnt update my changes when i ran my app. i uninstalled the app and then run it again and it works perfectly.
When you are using Gravity in vertical orientation, you have to use layout_height=0dp & when you are using Gravity in Horizontal orientation then you have to use layout_width=0dp for every child of Linear Layout so that it can resize the layout by itself
<LinearLayout
android:background="#e6e6e6"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:padding="4dip"
android:layout_weight="1">
<TextView
android:id="#+id/tv_reviewer_name"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceLarge"
android:text="Reviewer Name"
android:layout_width="wrap_content"
android:layout_height="0dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_review_details"
android:textSize="16sp"
android:textAppearance="?android:textAppearanceSmall"
android:text="Review"
android:layout_height="0dp"
android:layout_width="match_parent"/>
</LinearLayout>
</LinearLayout>

Need xml layout for the below screen

I am working on creating a page with a layout with header "Account Information" (ref.. image). Followed by a table and i need to populate the table dynamically after fetching from server but not able to do so. Below is the .xml file and attached is the image:
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#layout/header_gradient" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="0.20"
android:gravity="center_horizontal"
android:padding="15dp"
android:text="#string/my_account_header_text"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<TextView
android:id="#+id/my_acc_component"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:text="#string/my_account_component"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
<TextView
android:id="#+id/my_acc_details"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/my_acc_component"
android:text="#string/my_account_details"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
This may not be your issue, since I don't know what the problem is yet, but there is an issue that I see. When using weight in a LinearLayout with a vertical orientation your height should be 0dp. Similarly, if it is a horizontal orientation then width should be 0dp. So for example you would change your layouts to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff" >
and
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
Also, this is definitely not whatever your problem is but fill_parent is deprecated and match_parent should be used instead.
*Actually, there is a problem with the weight property... if you are working with weight then you better use weight_sum property in the LinearLayout and give your textView or other view an percentage depending on your giver weight_sum value in the parent layout...
However,I think what you are looking for is something like this:*
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|top"
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:background="#drawable/image" // if you want your title/header to be upon the image. Or just create another ImageView for that image
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_component"
android:text="your text"
android:textSize="your Size"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_details"
android:text="your text"
android:textSize="your Size"
/>
</LinearLayout>
</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.

backgroundimage is hiding all buttons in android app

in my app i am trying to show two buttons and an a title bar with a title text over it. these all are been placed along with a background image. But i am able to see only the background image and the other buttons, title bar and text. Following is the layout of my activity.
here i have denoted the background imageView id as bgd.
<?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"
>
<ImageView android:id="#+id/bgd"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="#drawable/startingpage">
</ImageView>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ImageView android:id="#+id/title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/applicationbar">
</ImageView>
<TextView android:id="#+id/titletext"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="2dip"
android:layout_gravity="center"
android:layout_marginLeft="80dip">
</TextView>
</LinearLayout>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dip"
android:layout_marginLeft="20dip"
android:id="#+id/add"
android:src="#drawable/addrestingspot">
</ImageButton>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:layout_marginLeft="20dip"
android:id="#+id/search"
android:src="#drawable/search">
</ImageButton>
</LinearLayout>
please tell me where i am going wrong.....
I think your ImageView is "eating" all the space and pushing the rest of the elements to the bottom. Since you don't have a scrollbar you can't see them. You should use the Background Image in the first LinearLayout (the top level one). Something like:
<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/startingpage"
>
For the first layout should do the trick

How to avoid space between imageview and gridview in linearlayout

I have a image view and grid view in my .xml file. When I am executing this file its getting some space between grid view and image view. How to avoid this space...can any one help me to solve this problem.
thanks in advance...
my xml code is:
android:layout_width="0px"
android:layout_height="0px">
</Button>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/prevMonth"
android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<Button
android:id="#+id/currentMonth"
android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<ImageView
android:id="#+id/nextMonth"
android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/calendarheader"
android:src="#drawable/blue_bg_with_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageView>
</LinearLayout>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</GridView>
You should try setting the android:gravity attribute correctly, and it has to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:gravity="bottom|center_horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:id="#+id/calendarheader" android:src="#color/blue_start"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:minWidth="250dp" android:minHeight="30dp">
</ImageView>
</LinearLayout>
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#color/blue_start">
</GridView>
</LinearLayout>
i'm using here simple color background, and there is no gap:
If you still having the problem, then you should see your blue_bg_with_text2 image, whether it has any empty pixels at the bottom.
ps: ignore the android:minWidth="250dp" android:minHeight="30dp" part, it is there to imitate an image with that size.
Update
Here is the same view using RelativeLayout (it's a bit clearer at least 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">
<Button android:id="#+id/selectedDayMonthYear"
android:textColor="#000000" android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0px" android:layout_height="0px" />
<ImageView android:id="#+id/prevMonth" android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/nextMonth" android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<Button android:id="#+id/currentMonth" android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/prevMonth"
android:layout_toLeftOf="#id/nextMonth"
android:layout_alignBottom="#id/prevMonth"
android:layout_alignTop="#id/prevMonth" />
<ImageView android:id="#+id/calendarheader" android:src="#drawable/calendarheader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:layout_centerInParent="true"
android:layout_below="#id/currentMonth"
android:layout_margin="0dp"
android:scaleType="fitXY" />
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/calendarheader"
android:layout_margin="0dp"
android:background="#color/white_fader_end">
</GridView>
</RelativeLayout>
I've added to it my resources as background (two of them are actually screenshots from yours).
What i observed is, you must
either use a static image for your
calendar header background, or,
if you use an xml drawable, you have
to drop the stroke element from it / set its android:width to 0
otherwise it will add an unnecessary gap around your view's drawable, that is as wide as the stroke width you've specified.
my output using static images as backgrounds looks this way:
Update 2
The problem is not between your calendar header and gridView, but inside your gridView.
It has a 'padding' of 5 px inside (not real padding, see how it gets there):
The default selector for the GridView is a 9x9 patch rectangle with a border of 5px.
That 5 px is visible all around your gridView.
You can specify a different listSelector for this grid either by xml:
android:listSelector="#drawable/grid_selector"
or from code (onCreate):
gridView.setSelector(R.drawable.grid_selector);
Now if your grid_selector is an image or is a drawable xml without any margins, then the gap that causes the problem is gone.
You can also hide that gap, by setting a background color to your gridView, that matches or grandients the calendar header's background color.

Categories

Resources