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.
Related
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.
I want to create custom toast with, one view which is a little bit out of parent. So I did something like this
This is my custom toast
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toast_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="50dp"
android:background="#000000"
android:clipChildren="false"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="15dp">
<TextView
android:id="#+id/digit_display"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_marginTop="-24dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="24dp"
android:background="#drawable/round_button"
android:gravity="center"
android:text="1"
android:textSize="64sp" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
round_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="oval">
<solid android:color="#000000"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#2C2C2C"/>
</shape>
</item>
</selector>
and in java code I am using it like this
LayoutInflater li = getLayoutInflater();
View v = li.inflate(R.layout.toast, null);
TextView numberView = v.findViewById(R.id.digit_display);
TextView descriptionView = v.findViewById(R.id.description);
numberView.setText(number);
descriptionView.setText(description);
Toast t = new Toast(getApplicationContext());
t.setDuration(Toast.LENGTH_LONG);
t.setView(v);
t.show();
And I can see my toast. But digit_display TextView is clipped from the top but I would like to see it out of toast (just top of that view). How can I achieve it? If that does not work.
EDITED
I try to understand why this example does not work, when if I am using similar structure in other project form simple form it is working.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="25dp"
android:background="#drawable/form_desing"
android:clipChildren="false"
android:clipToPadding="false"
android:gravity="center"
android:orientation="vertical"
android:padding="25dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="-50dp"
android:layout_marginBottom="50dp"
android:foreground="#drawable/clover_"
android:contentDescription="#string/fourbit_clover_icon" />
<include layout="#layout/email_input" />
<include layout="#layout/password_input" />
<include layout="#layout/buttons" />
</LinearLayout>
any idea?
Think of outer-most Layout as your Toast's root view and arrange items inside it. You're NOT limited to only use one LinearLayout or RelativeLayout . Don't try to go out from root view: It will get clipped.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="top|center">
<LinearLayout
android:layout_height="50dp"
android:layout_width="wrap_content"
android:orientation="horizontal"/>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="200dp"
android:orientation="vertical"
android:gravity="center"
android:padding="15dp"
android:background="#0A93E1"
android:minHeight="100dp"
android:layout_marginTop="30dp">
</LinearLayout>
<TextView
android:layout_height="60dp"
android:layout_width="60dp"
android:text="Text"
android:id="#+id/digit_display"
android:background="#drawable/round_button"
android:gravity="center"
android:layout_centerHorizontal="true"
android:textColor="#FFFFFF"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Text"
android:id="#+id/description"
android:layout_below="#id/digit_display"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:textColor="#FFFFFF"/>
</RelativeLayout>
</LinearLayout>
I have a CardView and I wanted to shape the corners of the cardview, I found a xml code snippet here and added it to my cardview and get this error, please look at the comment in the test.xml layout
EDIT: When I change background of the cardview to "#ffffff" (white) it works. It only crashes when I use card_view:cardBackgroundColor="#drawable/ic_corner_color"
EDIT 2: I want the corners look like this in the picture in the question, click
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.user.app/com.example.user.app.Test}: android.view.InflateException: Binary XML file line #14: Error inflating class android.support.v7.widget.CardView
This is my test.xml layout
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="cards main container">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_viewtest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#drawable/ic_corner_color" **// here is the error**
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_weight="2"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.96"
android:background="#ffffff"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<ImageView
android:id="#+id/imageViewtest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="#drawable/ic_drive_eta_black_24dp"
android:tag="image_tag" />
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/textViewNametest"
android:layout_width="340dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_weight="0.96"
android:text="some
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
My ic_corner_color.xml, which is in the drawable folder, looks like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#00ff00"/>
<corners android:radius="20dip"/>
I'm fairly sure cardBackgroundColor expects a color, not a drawable. Change it to #color/mycolor.
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 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.