My recyclerview is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/recyclerview_highlight"
android:layout_margin="6dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp">
<TextView
android:id="#+id/articleCategTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="#null"
app:layout_constraintBottom_toTopOf="#id/articleNameTextView"
app:layout_constraintRight_toLeftOf="#id/articleQteTextView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleQteTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#id/articleCategTextView"
app:layout_constraintBottom_toTopOf="#id/articleNameTextView"
android:text="#null" />
<TextView
android:id="#+id/articleNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
android:text="#null" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
#drawable/recyclerview_highlight:
<?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/selected_color"/>
</selector>
In "onBindViewHolder", I highlight it, when selected with:
holder.itemView.setSelected(article.isSelected());
All is ok BUT, for a little more visual elegance, I wanted to transform the LinearLayout into Cardview.
And when I try it, setSelected has not effect anymore. I even try to "setActivated" with state_activated but not better.
What should I modify to obtain the same type of operation? Is it at the level of the layout, the selector or the java code, and what to use instead of "selected"?
I finaly had to add a LinearLayout, inside the cardView; which is the one I setSelected() and the result is what I needed.
Related
I have a button that is complex but can be done easily with Constrain Layout. However I would like button state change feature to change the background color when pressed. I tried with state press or selected, but it doesn't work. What's the best way to solve this?
<?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/button_pressed"/>
<item android:state_pressed="false" android:drawable="#drawable/button_grayout" />
</selector>
ConstraintLayout as a Button
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp">
<TextView
android:id="#+id/txt_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Big Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mini Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#D5D5D5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txt_display_alert1" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can try to add onClick event to the ConstraintLayout like following:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:padding="8dp"
android:onClick="onClick"
>
....
add onClick() in the activity or fragment
As you apply the drawable to the ConstraintLayout, not to a Button; then you have to make it clickable and focusable in order to have the press effect of the Button:
So, you need to add:
android:clickable="true"
android:focusable="true"
Like:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:background="#drawable/button_press"
android:id="#+id/background_create"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
I have a CardView as parent and inside the CardView I have a ConstraintLayout and defined a border for the ConstraintLayout. But the problem is that the border disappears when it reaches the imageView I put inside ConstraintLayout and it can't be seen anymore
https://imgur.com/dELnfoB
Now to fix this problem, I set the top and bottom and right margins as 1dp for imageView because my border is 1dp wide, but still the problem is that the corner angle has a problem and gets narrow and is not displayed clearly
By the way, I don't want to use cardElevation
item code :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv_item_parent"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:focusable="true"
android:layoutDirection="ltr"
app:cardCornerRadius="4dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pc_corners_parent_gray_stroke">
<ImageView
android:id="#+id/iv_item_avatar"
android:layout_width="130dp"
android:layout_height="0dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginBottom="1dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/wqe" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/iv_item_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_item_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:ellipsize="end"
android:maxLines="1"
android:text="4.0 ★"
android:textColor="#color/colorTextPrimary"
android:textDirection="ltr"
android:textSize="#dimen/text_tiny_other"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
corners code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/colorWhite"/>
<corners android:radius="4dp"/>
<stroke android:width="1dp" android:color="#color/colorCardViewsBackgroundSet" android:dashWidth="1dp"/>
</shape>
You can put the ImageView inside a CardView and it should keep the corners round.
I am not sure if it's the best way to go about it but it works.
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.
Using the new appcompat-v21 I try to build a navigation drawer.. The first time I didn't write any background color or drawable and the navigation drawer started with a transparent background!! So strange! But, when I clicked in the items of it I could see the ripple effect of Android lollipop. (Amazing). So I tried to put a white background like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HomeActivity"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffff"/>
</android.support.v4.widget.DrawerLayout>
The navigation drawer now is white and so it's correct. But with this background I lost the ripple effect in the item click. My item XML is this one:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="?android:selectableItemBackground"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/spinnerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/sfondomappa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="0"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/banner_nav" />
<TextView
android:id="#+id/drawerWelcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sfondomappa"
android:layout_centerHorizontal="true"
android:background="#40000000"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Hola"
android:textColor="#color/ldrawer_color"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_horizontal"
android:layout_margin="12dp"
android:fontFamily="sans-serif-regular"
android:gravity="center_horizontal"
android:textColor="#color/main_orange"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="?android:attr/activatedBackgroundIndicator"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="3dp" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="32dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:textColor="#E4000000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I even wrote this android:background="?android:selectableItemBackground" in my root layout but nothing change.. How can I solve?
EDIT:
I wrote again the listview of my drawer in this way
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="72dp"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#00000000"
android:dividerHeight="1.00dp"
android:elevation="2dp"
android:longClickable="false"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none" />
and the ripple works. But now i lost the current position i clicked.
I've faced the same problem ... the solution is not documented good enough, but here it is.
Create a selector drawable in your drawable-v21 folder:
v21/activated_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primary_dark" android:state_activated="true" />
<item android:drawable="#color/primary" android:state_checked="true" />
<item android:state_pressed="true">
<ripple android:color="#color/primary" />
</item>
<item android:drawable="#color/background_light" />
</selector>
As you can see in the code above, the magic is done by adding the <ripple ... /> element above. It's available in v21+ only, so that's why you have to declare separate selectors for -v21 and normal.
Lastly, just put this selector drawable as background of the desired element, in your case the ListView item.
How can I add an icon before every ListView item text in an Android application?
Here is the current list_item xml that is called to populate the list:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center_vertical"
android:padding="5dip"
android:background="#color/darkblue"
/>
I attempted to add a ImageView before it, but it didn't show at all. Then I added a RelativeLayout around the entire thing and tried positioning them, but still it didn't show.
Any ideas?
Thanks!
You can use a Relative Layout, just add the property android:layout_toRightOf to your TextView::
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/myIcon"
android:layout_width="25px"
android:layout_height="25px"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:focusable="false"
android:padding="4px"
/>
<TextView
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center_vertical"
android:padding="5dip"
android:background="#color/darkblue"
android:layout_toRightOf="#id/myIcon"
/>
</RelativeLayout>
Better way to do this is to use drawableLeft, drawableRight, drawableTop, drawableBottom tags:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:gravity="center_vertical"
android:padding="5dip"
android:background="#color/darkblue"
android:drawableLeft="#drawable/yourPicture"
/>