We have a relatively simply Android item template on a ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#android:drawable/list_selector_background">
<!--Encounter Type and Start-->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/mid_grey"
android:paddingTop="12dp"
android:paddingRight="24dp"
android:paddingBottom="12dp"
android:paddingLeft="24dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:textSize="#dimen/text_size_large"
android:text="Main Item Heading"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10:45"
android:layout_toLeftOf="#+id/startTimeRelative"
android:textColor="#color/grey1"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/startTimeRelative"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12sp"
android:layout_alignParentRight="true"
android:text="Today"
android:textColor="#color/grey1"
android:textSize="#dimen/text_size_large" />
</RelativeLayout>
<!--Patient Name and Avatar-->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingRight="24dp"
android:paddingBottom="8dp"
android:paddingLeft="24dp">
<ImageView
android:id="#+id/patientAvatar"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:scaleType="fitXY"
android:src="#drawable/patient_avatar" />
<LinearLayout
android:layout_toRightOf="#+id/patientAvatar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/patientname"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Subsection Heading"
android:textColor="#000000"
android:textSize="#dimen/text_size_large"
android:textStyle="bold"
android:ellipsize="end"
android:maxLines="1" />
</LinearLayout>
</RelativeLayout>
<!--</LinearLayout>-->
</LinearLayout>
That displays this layout
I want to set the background of the items when they are pressed or selected. I am trying to do this by setting the item's background to a custom item selector
android:background="#android:drawable/list_selector_background"
The is is the selector xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/debug_blue" />
<item android:state_checked="true" android:drawable="#color/debug_green" />
<item android:state_pressed="true" android:drawable="#color/debug_blue" />
</selector>
The problem is that because I am setting the background colour's of Views within the item the Selector does not show through as expected. I have removed one of the inner colours (used in the "Subsection Heading" in the screenshot) and set that as the colour of the Listview. That means the blue shows through when the item is pressed on the lower part of the template, as seen in this screenshot
All the Android examples showing item selectors working with simple item layouts that have one or no background colour set.
How can I set the whole item's background whilst still having one or more background colours on child view's, when not selected?
I have looked at setting drawSelectorOnTop on the ListView but that did not help
Related
i've got a Activity with a ListView. I wrote an extra xml-file for the ListView-Item.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layoutPalettenItem"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
tools:context=".PalettenAdapter" >
<TextView
android:id="#+id/textViewPalettenBez"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="left|center_vertical"
android:text="Bezeichnung"
android:textColor="#android:color/black"
android:textSize="35sp" />
<Button
android:id="#+id/buttonPalettenPlus"
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:text="+"
android:textColor="#android:color/white"
android:textSize="30sp" />
<TextView
android:id="#+id/textViewPalettenAnzahl"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignBaseline="#+id/buttonPalettenPlus"
android:layout_alignBottom="#+id/buttonPalettenPlus"
android:layout_toLeftOf="#+id/buttonPalettenPlus"
android:gravity="center"
android:text="0"
android:textColor="#android:color/black"
android:textSize="25sp" />
<Button
android:id="#+id/buttonPalettenMinus"
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_alignBaseline="#+id/textViewPalettenAnzahl"
android:layout_alignBottom="#+id/textViewPalettenAnzahl"
android:layout_toLeftOf="#+id/textViewPalettenAnzahl"
android:text="-"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
As you can see the xml includes two Buttons (+ and -). Everything works fine and the item loads in the list. Also the Buttons are clickable but their color is darker. I set the background to #android:drawable/btn_default_holo_light. They look fine in layout but the Buttons stay darker, when i launch the app.
Let me know if you need more code on this.
I would be very glad if you could help me solve this issue
The default button background color of Theme.MaterialComponents is defined in your themes.xml file with the attribute colorPrimary eg: <item name="colorPrimary">#color/gray</item> but changing this color will affect all your widgets.
You can use app:backgroundTint attribute to change the button background color like below:
<Button
android:layout_width="50dp"
android:layout_height="50dp"
app:backgroundTint="#android:color/holo_blue_dark"/>
You have to add also the xmlns:app namespace on your root xml View like below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
Result with the above colour #android:color/holo_blue_dark using Theme.MaterialComponents will be like below:
I have a card view that lists a set of cards dynamically. I have used recyclerview for that. Now I want to disable a card(based on value)by greying out the card or something like that. This is the layout that contains the card view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="112dp"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:scaleType="fitXY">
<RelativeLayout
android:layout_width="100dp"
android:layout_height="150dp"
android:padding="8dp">
<ImageView
android:id="#+id/appIcon"
android:layout_width="match_parent"
android:layout_height="62dp"
android:padding="5dp"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/appIcon"
android:layout_centerInParent="true"
android:gravity="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textColor="#drawable/selector"
android:textSize="10dp"
android:textStyle="bold" />
<TextView
android:id="#+id/appVersion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="5dp"
android:layout_marginEnd="1dp"
android:text="version 0.0"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textSize="8dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have found some related queries and have tried out using selectors and greying out each field instead of the entire card.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="#color/colorAppName" />
<item android:state_enabled="false" android:color="#color/colorPrimary" />
</selector>
and in my class(Adapter.kt)
name = itemView.findViewById(R.id.name) as TextView
if(value==true)
{
name.isEnabled=false
}
But I want to disable the entire card. Please help
You can set tint to your relative layout which is direct child of card view in your item design. You have to do this in xml:
<android.support.v7.widget.CardView
android:layout_width="112dp"
android:layout_height="140dp"
android:layout_margin="10dp"
android:clickable="true"
android:focusable="true"
android:scaleType="fitXY">
<RelativeLayout
android:id="#+id/relParent"
android:background="#fff"
android:layout_width="100dp"
android:layout_height="150dp"
android:padding="8dp">
....>
I have added two property in RelativeLayout first is id and second is background.
Now in adapter you can do this:
if(value==true)
{
itemView.relParent.background.setColorFilter(Color.parseColor("#6F6F6F"),PorterDuff.Mode.SRC_IN)
itemView.relParent.isEnabled=false
}
else
{
itemView.relParent.background.setColorFilter(Color.parseColor("#FFFFFF"),PorterDuff.Mode.SRC_IN)
itemView.relParent.isEnabled=true
}
Note: You must have to set background to RelativeLayout from xml otherwise itemView.relParent.background will return null and your app will crash.
Update
You need to set forground color to your card you in that case do this:
itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#906F6F6F"))
Here cardDashboard is card view which you are using in your item design.
So the final code will be like this:
if(value==true)
{
itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#906F6F6F"))
itemView.relParent.isEnabled=false
}
else
{
itemView.cardDashboard.foreground= ColorDrawable(Color.parseColor("#006F6F6F"))
itemView.relParent.isEnabled=true
}
Add android:background="#drawable/selector" to your RelativeLayout or LinearLayout. That will work for enable and disable.
Note:- This is not related to question but if you follow. It will good for you.
We compare if(booleanVariable) directly instead of comparison like
if(booleanVariable==true).
Try setting the following to all the views,
android:duplicateParentState="true"
When this attribute is set to true, the view gets its drawable state (focused, pressed, etc.) from its direct parent rather than from itself.
Then dynamically disable the layout of the item (at a particular position) resulting in disabling all its child views.
Note: Since your cardviews are in a recycler view you need to maintain the state for diffrent positions inside your adapter.
You can maintain the background states using the selectors as you did before.
I changed your layouts by adding the above mentioned attribute:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="112dp"
android:layout_height="140dp"
android:layout_margin="10dp"
android:id="#+id/cd"
android:scaleType="fitXY">
<RelativeLayout
android:layout_width="100dp"
android:layout_height="150dp"
android:duplicateParentState="true"
android:padding="8dp">
<ImageView
android:id="#+id/appIcon"
android:layout_width="match_parent"
android:layout_height="62dp"
android:padding="5dp"
android:duplicateParentState="true"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:text="#string/app_name"
android:layout_below="#+id/appIcon"
android:layout_centerInParent="true"
android:gravity="center"
android:onClick="clickMe"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textSize="10dp"
android:textStyle="bold" />
<TextView
android:id="#+id/appVersion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="5dp"
android:layout_marginEnd="1dp"
android:text="version 0.0"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:textSize="8dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And have tested with disabling the cardview state, its child views also show the change with their color fading to light grey(haven't used selector for views so it changes to default disabled state (tested for textview)) .But for any clicklistner on the views you will have to use the saved state for the position disabled and not perform task when state is disabled.
I'm writing an app that will have 60 checkboxes, numbered 1-60.
My goal is to achieve something like this:
Is there a way to achieve this without having to draw 60 .png files with the number inside? Could I draw only the edges and add the numbers as a text property of the button?
I tried customizing a ToggleButton (got the idea from here)
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#null"
android:paddingLeft="10dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textOn="60"
android:textOff="60" />
toogle_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/checked" />
<item
android:drawable="#drawable/not_checked" />
</selector>
but as a result, the text was placed at the right of the button. Is it possible to place the text on top of the image?
You can do it with relative layout with textview on top of Toggle button like this. Replace margins and size as per your need
<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"
android:background="#color/background_floating_material_dark"
tools:context="com.contag.app.fragment.NavDrawerFragment">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/toggle_selector"
android:background="#android:color/transparent"
android:gravity="center"
android:textOn="#null"
android:textOff="#null"
android:minHeight="0dp"
android:minWidth="0dp"
android:id="#+id/toggleButton"
android:layout_marginTop="26dp"
android:layout_marginStart="156dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="60"
android:textColor="#android:color/holo_green_dark"
android:textSize="15sp"
android:id="#+id/textView"
android:layout_alignLeft="#+id/toggleButton"
android:layout_alignTop="#+id/toggleButton"
android:layout_alignRight="#+id/toggleButton"
android:layout_alignBottom="#+id/toggleButton"
android:gravity="center" />
</RelativeLayout>
I have created an activity following some tutorials on SO.Activity is transparent with respect to the background color of another activity but it is not showing transparency with the text contained by the background activity.
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="match_parent"
android:background="#color/ApplicationForeground"
android:gravity="center_vertical"
android:orientation="vertical" >
ApplicationForeground is blue which I set purposefully.
layoutrater is also not showing any text contained by background activity.
<LinearLayout
android:id="#+id/layoutRater"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="1"
android:background="#color/opakkblackeighty"
android:gravity="center"
android:orientation="horizontal"
>
opakkblackeighty is set #40000000.
This textview should show its context and the text contained by background activity.
<TextView
android:id="#+id/downVote"
android:layout_width="100sp"
android:layout_height="100sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5dp"
android:layout_marginTop="5sp"
android:background="#color/opakkblackeighty"
android:gravity="center"
android:src="#drawable/downvote"
android:text="-"
android:textColor="#color/ApplicationForeground"
android:textSize="50sp" />
</LinearLayout>
<TextView
android:id="#+id/totalVoting"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:background="#color/opakkblackeighty"
android:gravity="center"
android:text="0"
android:textColor="#android:color/holo_green_light"
android:textSize="20sp" />
</LinearLayout>
The linearlayout is filling parent, so you dont see the activity background.
I'm trying to set the background of the right arrow, that when I press it, only the background around the arrow will shown(till the separator).
I tried to do it with Image Button but when I do it like this, the list item can't be clickable.
this is my XML item list layout:
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="5dip" >
<ImageView
android:id="#+id/itemlist_checkedd"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/ic_checkitem" />
<ImageView
android:id="#+id/skinpreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/itemlist_checkedd"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:paddingLeft="10dip"
android:background="#null"
android:src="#drawable/ic_go_edit" />
<ImageView
android:id="#+id/separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/skinEdit"
android:layout_marginRight="5dip"
android:src="#drawable/separator"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="2dip"
android:layout_marginRight="15dip"
android:layout_toRightOf="#id/skinpreview"
android:layout_toLeftOf="#id/separator"
android:textAppearance="?android:attr/textAppearanceLarge" />
This is how it looks:
Any suggestions???
Thanks.
Create selector xml file in res/drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/arrow_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/arrow" />
</selector>
You will need to create another picture of the arrow with the highlighted background you need.
of course then assign your ImageView src to the xml file (arrow_selector.xml) for example
Just set the background color or an image to the parent view in this xml