Hey Guys facing a problem with setting a background image on my ListView. Code is as below
history.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"
>
<ListView android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"
android:src="#drawable/back">
</ListView>
<TextView android:id="#id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFff00"
android:text="No data"
android:cacheColorHint="#00000000"
/>
</LinearLayout>
rowlayout.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"
android:orientation="vertical">
<TextView android:id="#+id/ProductName"
android:textSize="25sp"
android:textColor="#FFFF00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Java Code
...
setListAdapter(new ArrayAdapter<String>(this, R.layout.rowlayout,R.id.ProductName,Names));
...
I dont know what i am doing here but the background does not appear. Its black throughout. If i put the background on the text view in rowlayout.xml then it appears but its like whole screen carries one entry of the ListView. Tried alot of tutorials. Maybe doing some rookie mistake.. help me out please
use android:background="#drawable/icon" for listview like
<ListView android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:layout_weight="1"
android:drawSelectorOnTop="false"
android:background="#drawable/icon">
</ListView>
use android:background="#00000000" on your listview items, then set the parent forms background to your image
As I understand your code concept correctly you want to achieve two Views lying on the LinearLayout, one of which (TextView in your case) cover layout with it's background and another one is transparent. So there is no other way than to set background for your layout and make your ListView transparent, using android:background="#00000000" and also you should set android:cacheColorHint="#00000000" to avoid filling your ListView background with black during scrolling
I believe what you're experiencing is described here: http://android-developers.blogspot.com/2009/01/why-is-my-list-black-android.html
Because of an optimization called "cache color hint", the background of your list is being set by default to the window's background color, #191919 in Android's dark theme.
If you set a background on each row, I think you'll see what I mean. Try setting the following background shape:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<stroke
android:color="#color/mid_gray"
android:width="1dp"
/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="3dp"
/>
<corners android:radius="10dp" />
<solid android:color="#android:color/white" />
</shape>
like this:
<?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/shape_data_background">
<TextView android:id="#+id/ProductName"
android:textSize="25sp"
android:textColor="#FFFF00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
Related
I have an imageview and a cardview elevated on top of it. The cardview contains multiple views inside it.
I want to set a background color to cardview such that its startcolor should make the initial part of the imageview behind it to be visible at a transparency rate of 30% and the cardview should become darker and darker and black at the end.
This is what I have tried so far:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>
This doesn't make my imageview visible.I have explored many SOF posts but wasn't able to reproduce what I want!
Any inputs are welcome and would be very helpful!!
Use this XML code
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#21293B"
android:centerColor="#21293B00"
android:endColor="#00000000"
android:angle="90"/>
</shape>
put it as a background to a View, put that View above your ImageView
<RelativeLayout
android:id="#+id/player_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/shasha_poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="500dp"
android:scaleType="centerCrop"
android:src="#drawable/placeholder"
android:visibility="visible" />
<View
android:id="#+id/gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_with_shadow2" />
</RelativeLayout>
You can do something like this
// this is your back image
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/xxxxx"
...
/>
// your cardview over the image
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
app:cardBackgroundColor="#00000000" // make cardview transparent
...
>
// an image to make the new drawable background
<ImageView
android:background="#drawable/gradient" // the xml with your gradient
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
/>
</android.support.v7.widget.CardView>
I think this is what you looking for, I test this and work as you expected.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/your_image" />
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
card_view:cardBackgroundColor="#color/transparent"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
card_view:contentPaddingTop="2dp">
<RelativeLayout
android:id="#+id/list_container_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/your_gradient"
android:gravity="center"
android:orientation="vertical">
<!--Add your cardview contents-->
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
This is the gradient background file your_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>
In my view, I would like a ripple effect to appear whenever a user touches an ImageView in the layout. I've tried wrapping the ImageView inside a RelativeLayout, but it hasn't worked. Here is the layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sample.me.TapActivity" >
<RelativeLayout
android:id="#+id/tap_view_frame"
android:layout_width="#dimen/activity_tap_image_width"
android:layout_height="#dimen/activity_tap_image_height"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:clickable="true"
android:background="#drawable/ripple_view" >
<ImageView
android:id="#+id/tap_view"
android:src="#drawable/ram"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:clickable="true" />
</RelativeLayout>
<TextView
android:id="#+id/tap_name_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:layout_marginLeft="#dimen/textview_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_above="#+id/tap_number_textView"/>
<TextView
android:id="#+id/tap_number_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:layout_marginBottom="#dimen/textview_vertical_margin"
android:layout_alignLeft="#+id/tap_name_textView"
android:layout_alignBottom="#+id/tap_view_frame" />
<android.support.v7.widget.CardView
android:id="#+id/tap_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/cardview_horizontal_margin"
android:layout_marginRight="#dimen/cardview_horizontal_margin"
android:layout_marginTop="#dimen/cardview_vertical_margin"
android:layout_below="#+id/tap_view_frame">
<android.support.v7.widget.RecyclerView
android:id="#+id/tap_options_recyclerview"
android:layout_width="match_parent"
android:layout_height="#dimen/cardview_tap_height" />
</android.support.v7.widget.CardView>
And here is the "ripple_view" drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffa0a0a0">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffa0a0a0"/>
</shape>
</item>
</ripple>
I have also tried adding in the android:background="?android:attr/selectableItemBackground" tag, but that didn't seem to help. Can anyone explain why the ripple is not showing up? I used the same method to enable the effect in my custom buttons and RecyclerView rows, but it is not working for the RelativeLayout. Ideally, I would like to avoid using a third party library for something as simple as this.
I want to create a button with background color, icon and text in android.
But I don't know how to add image. My XML is:
<?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:layout_margin="12dp"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button"
android:text="BOTON"
/>
</TableLayout>
</LinearLayout>
And my background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:radius="6dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92" />
</shape>
</item>
</selector>
I want to make some like this:
how add background image plus text in my background button? I tried put icon with property android:drawableleft but the size was to little for the size of button...
This isn't actually that hard. I just had to do this for my own project.
Android Buttons have a drawableLOCATION property in the XML.
To put an image at the top, as you want it, you'd use
android:drawableTop="#drawable/your_drawable_icon"
All four possible options are:
android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop
To adjust the spacing/padding of the image icon, you can use
android:drawablePadding="12dp"
You can read more about this here.
If that isn't accurate enough for you, you can use a RelativeLayout and put stuff in it to look right.
I had to do that for my current project. So instead of the button, I had this for my XML:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/applianceInfoLayout"
android:clickable="true"
android:background="#drawable/button_background" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/service_menu_icon_padding"
android:layout_marginRight="#dimen/service_menu_icon_padding"
android:id="#+id/infoTextView"
android:src="#drawable/ic_applianceinfo"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_centerVertical="true"
android:text="Info"
android:textColor="#E6E7E8"
android:fontFamily="sans-serif-light"
android:textAllCaps="false"
android:textSize="22sp"
android:layout_toRightOf="#id/infoTextView"/>
</RelativeLayout>
Which gave me this:
I'm programming an Android game using AndEngine. I want to create a circle which has a number in, like in this picture:
Something like this:
circle.xml (in res/drawable)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#aaf" />
</shape>
and circletext.xml (in res/layout):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<TextView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="#drawable/circle"
android:gravity="center"
android:shadowColor="#android:color/white"
android:shadowRadius="10.0"
android:text="4"
android:textColor="#android:color/black"
android:textSize="18sp" />
</FrameLayout>
looks like this:
Well I guess the simplest way is to just put a picture like that in haha. You could always use an image with a circle then layer the text with the number over the top of it.
I have to make another highlight color for ListView item. I use custom adapter for items, and i have following code:
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:background="#FFFFFF"
android:weightSum="1.0"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_weight="0.13"
android:background="#drawable/booklist_header"
android:orientation="horizontal"
android:layout_height="0dp" >
<ImageView
android:id="#+id/imageViewBookListBack"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:src="#drawable/back_button" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_weight="0.77"
android:layout_height="0dp" >
<ListView
android:id="#+id/listViewCurrentList"
android:listSelector="#drawable/selector"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutBooklistAdwhirl"
android:layout_width="fill_parent"
android:layout_weight="0.1"
android:layout_height="0dp" >
</LinearLayout>
</LinearLayout>
Code for item 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:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageViewBookListItemImage"
android:layout_width="120dp"
android:layout_marginTop="15dp"
android:layout_height="120dp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="135dp"
android:layout_marginTop="15dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textViewBookListItemTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textColor="#000000"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textViewBookListItemAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textColor="#000000"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Code for selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/green" /> <!-- focused -->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/green" /> <!-- focused and pressed-->
<item android:state_pressed="true" android:drawable="#color/green" /> <!-- pressed -->
<item android:drawable="#color/green" /> <!-- default -->
</selector>
Code for color.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#006400</color>
<color name="white">#FFFFFF</color>
</resources>
But I have a problem: ListView item doesn't change color by click! It has white color always. Where have I made mistake?
This is how you do it:
First, in your ListView, put the following:
android:listSelector="#00000000"
This makes your listSelector (the color you normally see when you click the listview) transparent.
Next, set the LinearLayout of your item layout to this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/selector"
android:orientation="horizontal" >
I had the same problem a few days ago and it took me ages to figure this out. Hopefully it works for you!
You can try to add this: android:drawSelectorOnTop="true" to the definition of the ListView.
Hope this will help you!
P.S. You can optimize your main layout and remove the unnecessary layouts. You can use layoutopt for this.
android:drawSelectorOnTop="true"
Even if this is late to the question, I came to a simpler solution, which I would like to share even for my future self:
In your ListView just set
android:listSelector="#drawable/selector"
In your List Item you need to remove the background.