I have a RecyclerView. When you look at the picture, I have the Problem, that the Items of the RecyclerView won't fill the full space of the screen. (I mean the space between the item_note and the screen edge...
Here is my main_activity.XML:
<android.support.v7.widget.RecyclerView
android:id="#+id/rvNoteList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
Here is my item_layout.XM:
<?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"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:background="#drawable/note_bg">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="9"
android:orientation="vertical">
<TextView
android:id="#+id/tvTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Title"
android:textStyle="bold"
android:textSize="18sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Text for Content" />
</LinearLayout>
Here is how I set the Layout in MainActivity.java:
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
recyclerView.setItemAnimator(new DefaultItemAnimator());
EDIT:
click to see
EDIT 2:
click to see
EDIT 3:
Adapter:
adapter = new FirestoreRecyclerAdapter<Note, NoteViewHolder>(response) {
#Override
protected void onBindViewHolder(NoteViewHolder holder, int position, Note model) {
final Note note = notesList.get(position);
holder.title.setText(note.getTitle());
holder.content.setText(note.getContent());
}
#Override
public NoteViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_note, parent, false);
return new NoteViewHolder(view);
}
#Override
public void onError(FirebaseFirestoreException e) {
Log.e("error", e.getMessage());
}
};
EDIT 4:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
If you don't want gaps as you've described, you probably don't want to be using StaggeredGridLayoutManager, since it will try to add gaps at the end of some rows to create a jagged edge effect. See https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html for more details.
For evenly spaced items, you should use GridLayoutManager. So, try changing
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
To
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
See https://developer.android.com/reference/android/support/v7/widget/GridLayoutManager.html#GridLayoutManager(android.content.Context,%20int) for more details on how to use GridLayoutManager.
Alternate Solution 1
If you want to stick with the StaggeredGridLayoutManager, you can try setting its gap handling strategy to GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS like so:
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
recyclerView.setLayoutManager(layoutManager);
Alternate Solution 2
Try changing the contents of your item_layout.xml to:
<?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="wrap_content"
android:orientation="vertical"
android:padding="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:background="#drawable/note_bg">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Title"
android:textStyle="bold"
android:textSize="18sp" />
<TextView
android:id="#+id/tvContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Text for Content" />
</LinearLayout>
Edit
Using Alternate Solution 2 and StaggeredGridLayoutManager, I was able to get the following result (using the same text in your items):
Related
I need a help to animating the filling of basket with apple in android by drop apple inside bucket image. Below is my drag and drop code in this I am dragging and dropping apple from one place to other place.
#Override
public boolean onDrag(View v, DragEvent event) {
// Store the action type for the incoming event
final int action = event.getAction();
// Handles each of the expected events
switch (action) {
case DragEvent.ACTION_DRAG_STARTED:
// Invalidate the view to force a redraw in the new tint
v.invalidate();
// Returns true to indicate that the View can accept the
// dragged data.
return true;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
// Ignore the event
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
v.invalidate();
if (v instanceof ImageView) {
ImageView dropView = (ImageView) v;
Drawable dropViewDrawable = dropView.getDrawable();
Log.v("dropViewDrawable", "" + dropViewDrawable);
for (int i = 0; i < numberOfObject; i++) {
if (containerImageViewList.get(i).getDrawable() == null) {
containerImageViewList.get(i).setImageResource(R.drawable.sp_glass_cut);
if (selectedImageColor.equals(getResources().getString(R.string.title_images_color_grey))) {
containerImageViewList.get(i).setImageBitmap(CommonMethods.convertColoredImageIntoBlackAndWhiteImage(containerImageViewList.get(i)));
}
break;
}
}
dragImageView.setImageBitmap(null);
successCount++;
} else {
CommonMethods.showSweetAlertDialog(SPLevelOneMoveObjectTBActivity.this, false);
}
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
Log.v("ACTION_DRAG_ENDED", "ACTION_DRAG_ENDED");
if (!isSuccess && !isFail) {
isFail = true;
CommonMethods.showSweetAlertDialog(SPLevelOneMoveObjectTBActivity.this, false);
return true;
}
return true;
default:
break;
}
return false;
}
now how to animate it and show the apple inside the basket?
Hi You can make your basket with the help of Empty LinearLayout(or Any other Layout like RelativeLayout and ConstraintLayout) and then assign the border to it like this
res/drawable/basket_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="0dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="45dp"
android:bottomRightRadius="45dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#9BA8A3"
android:startColor="#6BA9E8"
android:endColor="#FFFFFF"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="120dp"
/>
<stroke
android:width="5dp"
android:color="#878787"
/>
</shape>
or you can use a 9 patch image of a basket in the background also
here I have used the TextView and made it circle rather than apple using below file
res/drawable/border_circle.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- <gradient
android:angle="0"
android:startColor="#f00"
android:centerColor="#android:color/transparent"
android:centerX="0.01" />-->
<stroke android:width="5dp" android:color="#3AFB03" />
<solid android:color="#FAFB03" />
<corners android:radius="4dp" />
</shape>
You can use a 9patch apple image and ImageView instead.
Now go to your main.xml
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="260dp"
android:layout_height="98dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/basket_border"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="108dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="bottom"
android:orientation="horizontal"
android:weightSum="4">
<TextView
android:id="#+id/textView"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/border_circle"
android:gravity="center"
android:text="Text 1"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#android:color/holo_blue_bright"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="284dp"/>
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/border_circle"
android:gravity="center"
android:text="Text 2"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#android:color/holo_red_dark"
tools:layout_editor_absoluteX="90dp"
tools:layout_editor_absoluteY="284dp"/>
<TextView
android:id="#+id/textView3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/border_circle"
android:gravity="center"
android:text="Text 3"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#android:color/holo_purple"
tools:layout_editor_absoluteX="162dp"
tools:layout_editor_absoluteY="284dp"/>
<TextView
android:id="#+id/textView4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#drawable/border_circle"
android:gravity="center"
android:text="Text 4"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
tools:layout_editor_absoluteX="230dp"
tools:layout_editor_absoluteY="283dp"/>
</LinearLayout>
</LinearLayout>
you can use your concept of drag-drop to put the ImageView(apple) into the LinearLayout of id linearLayout1 which is basket so here you can apply normal animation on the ImageView(apple) while adding to LinearLayout(basket)
I need to implement a custom search functionality with autocomplete feature with custom adapter. I wrote my own custom adapter, Code is given below:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/icon_bg"
android:orientation="vertical"
tools:context="com.emc.kulkaa.myfinancials.MainActivity">
<AutoCompleteTextView
android:id="#+id/edt_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView"
android:layout_below="#+id/imageView"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:background="#drawable/round_border_edittext"
android:drawableEnd="#drawable/clear"
android:drawableLeft="#drawable/white"
android:drawableStart="#drawable/white"
android:ems="10"
android:hint="#string/search_hint"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorWhite" />
</LinearLayout>
custom_item.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:background="#color/cardview_color">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="15sp"
style="#style/simple"/>
</LinearLayout>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name = "android:autoCompleteTextViewStyle">#style/simple</item>
</style>
<style name="simple" parent="Widget.AppCompat.AutoCompleteTextView">
<item name="android:popupBackground">#drawable/simpleautocustom </item>
</style>
</resources>
simpleautocustom.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorWhite" />
<stroke
android:width="0dip"
android:color="#color/colorBlue" />
<corners android:radius="20dip" />
<padding
android:bottom="10dip"
android:left="25dip"
android:right="25dip"
android:top="10dip" />
</shape>
java code
public class MainActivity extends AppCompatActivity {
AutoCompleteTextView mEdtSearch;
#Override
protected void onCreate(Bundle savedInstanceState) {
String arr[] = {"DSA LSA", "CHILD", "AICHILES", "CHILDREN", "FRANCE", "FRENCH"};
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.custom_item, R.id.autoCompleteItem, arr);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEdtSearch = (AutoCompleteTextView) findViewById(R.id.edt_search);
mEdtSearch.setFocusable(true);
mEdtSearch.setFocusableInTouchMode(true);
mEdtSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mEdtSearch.setAdapter(adapter);
}
});
}
}
Above code works fine, here is the screenshot of output:
However it doesn't still match expected output UI which is given below:
How can I change styles and custom shape so that I can achieve the output?
I have tried something for you, hope it will solve your problem and you can customize xmls i.e background of custom_item.xml TextView according to your need.
activity_main.xml
<?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:background="#9A000000"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/edt_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView"
android:layout_below="#+id/imageView"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:background="#drawable/round_border_edittext"
android:drawableEnd="#drawable/clear"
android:drawableLeft="#drawable/white"
android:drawableStart="#drawable/white"
android:ems="10"
android:hint="#string/search_hint"
android:popupBackground="#android:color/transparent"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorWhite"/>
</LinearLayout>
custom_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/bg_rounded_border"
android:maxLines="1"
android:padding="15dp"
android:singleLine="true"
android:textColor="#color/white"
android:textSize="15sp"/>
</RelativeLayout>
bg_rounded_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/hint_color"/>
<corners android:radius="#dimen/padding_less"/>
</shape>
rest your MainActivity (java) code is same, there is no need to set a style to your list item text view.
Here is the screen shot of the output.
You can remove styles.
Only you should add android:padding="7dp" to parent LinearLayout and android:background="#drawable/simple_auto" to TextView in custom_item. It is working.
custom_item:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:padding="7dp"
android:background="#color/cardview_color">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/simple_auto"
android:padding="10dp"
android:textSize="15sp"/>
</LinearLayout>
I have a recyclerView currently set up to add a drop shadow to the bottom of each item with spacing which works well. I want to add a thin gray border around each item as well as a soft rounding if possible. Code so far:
public class VerticalSpaceItemDecorator extends RecyclerView.ItemDecoration {
private final int verticalSpaceHeight;
public VerticalSpaceItemDecorator(int verticalSpaceHeight) {
this.verticalSpaceHeight = verticalSpaceHeight;
}
#Override
public void getItemOffsets(Rect outRect,
View view,
RecyclerView parent,
RecyclerView.State state) {
// 1. Determine whether to add a spacing decorator
if (parent.getChildAdapterPosition(view) != parent.getAdapter().getItemCount() - 1) {
// 2. Set the bottom offset to the specified height
outRect.bottom = verticalSpaceHeight;
}
}
}
public class ShadowVerticalSpaceItemDecorator extends RecyclerView.ItemDecoration {
private Drawable divider;
public ShadowVerticalSpaceItemDecorator(Context context) {
// Use the default style divider
final TypedArray styledAttributes = context.obtainStyledAttributes(
new int[] { android.R.attr.listDivider });
this.divider = styledAttributes.getDrawable(0);
styledAttributes.recycle();
}
public ShadowVerticalSpaceItemDecorator(Context context, int resId) {
// Use a custom divider specified by a drawable
this.divider = ContextCompat.getDrawable(context, resId);
}
#Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
// 1. Get the parent (RecyclerView) padding
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
// 2. Iterate items of the RecyclerView
for (int childIdx = 0; childIdx < parent.getChildCount(); childIdx++) {
// 3. Get the item
View item = parent.getChildAt(childIdx);
// 4. Determine the item's top and bottom with the divider
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) item.getLayoutParams();
int top = item.getBottom() + params.bottomMargin;
int bottom = top + divider.getIntrinsicHeight();
// 5. Set the divider's bounds
this.divider.setBounds(left, top, right, bottom);
// 6. Draw the divider
this.divider.draw(c);
}
}
}
Custom layout of recyclerView items:
<?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="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_title"
style="#style/AudioFileInfoOverlayText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView"
android:layout_alignLeft="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/imageView"
android:layout_gravity="left"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="TextView"
android:textColor="#android:color/white"
android:textSize="22sp" />
<TextView
android:id="#+id/textView_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/textView_title"
android:layout_below="#+id/imageView"
android:layout_marginTop="12dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="TextView" />
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView_info"
android:layout_marginBottom="5pt"
android:layout_marginRight="5pt"
android:background="#drawable/circle_button"
android:text="One"
android:textColor="#android:color/white" />
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_below="#+id/textView_info"
android:layout_marginBottom="5pt"
android:layout_marginLeft="5pt"
android:background="#drawable/circle_button"
android:backgroundTint="?android:attr/colorControlHighlight"
android:text="Two"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
drop_shadow code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="4dp" />
<solid android:color="#color/darkGray" />
<corners android:topLeftRadius="0dp" android:topRightRadius="0dp"
android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/>
</shape>
Border:
<?xml version="1.0" encoding="UTF-8"?>
<stroke android:width="3dp"
android:color="#color/gray"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
Create Xml on Drawable folder named border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#color/colorAccent" android:width="1dp"/>
<corners android:radius="5dp" />
</shape>
then after change background of RelativeLayout
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/border"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingLeft="5dp"
android:paddingRight="5dp"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView"
android:layout_alignLeft="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/imageView"
android:layout_gravity="left"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="TextView"
android:textColor="#android:color/white"
android:textSize="22sp" />
<TextView
android:id="#+id/textView_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/textView_title"
android:layout_below="#+id/imageView"
android:layout_marginTop="12dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="TextView" />
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView_info"
android:layout_marginBottom="5pt"
android:layout_marginRight="5pt"
android:text="One"
android:textColor="#android:color/white" />
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_below="#+id/textView_info"
android:layout_marginBottom="5pt"
android:layout_marginLeft="5pt"
android:backgroundTint="?android:attr/colorControlHighlight"
android:text="Two"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
If you want to bold the border then <stroke android:color="#color/colorAccent" android:width="5dp"/>
Hello I am trying to add a ripple effect onClick method for View, but this one no working. All my items having an ID, but I don't know how to call it
Here is a code.
#Override
public void onClick(View v) {
int[] attrs = new int[]{R.attr.selectableItemBackground};
TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
int backgroundResource = typedArray.getResourceId(0, 0);
v.setBackgroundResource(backgroundResource);
switch (v.getId()) {
case ACTION_PLAY_ID:
Log.d(MainActivity.TAG, getString(R.string.detail_action_play));
v.setBackgroundResource(backgroundResource);
Intent intent = new Intent(getActivity(), PlayerActivity.class);
intent.putExtra(Video.VIDEO_TAG, videoModel);
startActivity(intent);
break;
case ACTION_BOOKMARK_ID:
if (bookmarked) {
v.setBackgroundResource(backgroundResource);
deleteFromBookmarks();
((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star_outline));
} else {
v.setBackgroundResource(backgroundResource);
addToBookmarks();
((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.star));
}
break;
case ACTION_REMINDER_ID:
if (!isReminderSet) {
createReminderDialog((ImageView) v);
} else {
cancelReminder(liveTvProgram.getProgramId());
((ImageView) v).setImageDrawable(res.getDrawable(R.drawable.alarm));
}
break;
}
}
For Lubomir
i have something like this but not working too:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) {
View view = inflater.inflate(R.layout.item_detail, container, false);
ButterKnife.bind(this, view);
View myView = view.findViewById(R.id.actions_container);
int[] attrs = new int[]{R.attr.selectableItemBackground};
TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
int backgroundResource = typedArray.getResourceId(0, 0);
myView.setBackgroundResource(backgroundResource);
loadImage();
init();
return view;
}
ImageViews(actionbuttons) is creating in java for LinearLayout actions_container
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/header_image"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="#dimen/detail_image_1_state"
android:elevation="8dp"/>
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/detail_bottom_margin"
android:layout_marginTop="#dimen/detail_top_margin"
android:background="#color/primary_color">
<LinearLayout
android:id="#+id/actions_container"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_actions_height"
android:layout_alignParentTop="true"
android:background="#drawable/ripple_effect_image"
android:elevation="2dp"
android:orientation="horizontal"
android:paddingLeft="300dp"
android:paddingStart="300dp"/>
<LinearLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/actions_container"
android:orientation="vertical"
android:paddingLeft="300dp"
android:paddingStart="300dp">
<TextView
android:id="#+id/title"
style="#style/TextTitleStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/subtitle"
style="#style/TextSubtitleStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/duration"
style="#style/TextSubtitleStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/season"
style="#style/TextDescriptionStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/episode"
style="#style/TextDescriptionStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/description"
style="#style/TextDescriptionStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="7"/>
</LinearLayout>
<FrameLayout
android:id="#+id/recommended_frame"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentBottom="true">
<android.support.v17.leanback.widget.HorizontalGridView
android:id="#+id/recommendation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
</FrameLayout>
<TextView
android:id="#+id/recommended_text"
style="#style/TextHeaderStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/recommended_frame"
android:text="#string/related_programs"/>
</RelativeLayout>
</RelativeLayout>
Also my xml ripple effect file is like:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/dark_primary_color">
<item>
<color android:color="#color/dark_primary_color" />
</item>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
Clickable Views
In general, ripple effect for regular buttons will work by default in API 21 and for other touchable views, it can be achieved by specifying
android:background="?android:attr/selectableItemBackground"
In code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
View myView = findViewById(R.id.myView);
int[] attrs = new int[]{R.attr.selectableItemBackground};
TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
int backgroundResource = typedArray.getResourceId(0, 0);
myView.setBackgroundResource(backgroundResource);
}
As stated in Lubomir Babev's answer, adding android:background="?android:attr/selectableItemBackground" does the trick.
However, if your view already has a background, you can use the same on the android:foreground attribute instead:
android:background="#color/anyColor"
android:foreground="?android:attr/selectableItemBackground"
android:foreground is only supported by API 23+ though.
create ripple background
view_background.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/blue" >
<item android:drawable="#drawable/view_normal">
</item>
</ripple>
view_noraml.xml //this is how you view appears in normal
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="#dimen/button_corner"/>
<solid
android:color="#android:color/transparent"/>
<stroke
android:width="0.5dp"
android:color="#color/white"/>
</shape>
now set the view_background to your view
example
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp"
android:foreground="#drawable/view_background"
android:clickable="true"
android:focusable="true"
>
<ImageView
android:id="#+id/grid_item_imageView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_gravity="center"
android:scaleType="centerInside"
/>
</FrameLayout>
I know this is a pretty old thread but just in case the above answers didn't work, I'd recommend you to try the below code as it worked for me:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
The key thing to notice are the clickable and focusable.
The solution for this is simple easy in my side.
Here is ripple effect:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#BFB3F7">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_background_color" />
</shape>
</item>
</ripple>
and next on the class i need to search function
setBackground
Then i need declare a drawable item to it. something like this:
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
v.setBackground(res.getDrawable(R.drawable.ripple_effect_for_buttons));
scrollContainer(false);
} else {
v.setBackground(null);
if (recommendation.getFocusedChild() != null) {
scrollContainer(true);
}
}
}
And YUPII its working
You can add:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/ripple"/>
In Kotlin it could be easily done with an extension functions.
fun TypedArray.use(block: TypedArray.() -> Unit) {
try {
block()
} finally {
this.recycle()
}
}
fun Context.getStyledAttributes(#StyleableRes attrs: IntArray, block: TypedArray.() -> Unit) =
this.obtainStyledAttributes(attrs).use(block)
fun View.setClickableRipple() {
val attrs = intArrayOf(R.attr.selectableItemBackground)
context.getStyledAttributes(attrs) {
val backgroundResource = getResourceId(0, 0)
setBackgroundResource(backgroundResource)
}
}
There is a problem with item selection in custom ListView.
There is no checkboxes, so no need in checkable=false. I've tried setup android:focusable="false" and android:focusableInTouchMode="false". Tried "Draw Selector On Top option". I can see standard touch animation, but items not highlighted.
My ListView definition (activity_main.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/listview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
ListView creating in onCreate of main activity (MainActivity.java):
...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = (ListView) findViewById(R.id.listview);
view.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
list = new ArrayList<String>();
currentDirectory = Environment.getExternalStorageDirectory().getAbsolutePath();
adapter = new ArrayAdapter<String>(this, R.layout.listviewitem, R.id.firstLine, list);
view.setAdapter(adapter);
updateFileList(currentDirectory);
view.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View parent_view, int position, long id) {
String listItem = (String) view.getItemAtPosition(position);
Log.d("Hello", "file: " + listItem);
view.setSelected(true);
File tempFile = new File(currentDirectory + File.separator + listItem);
if (tempFile.isDirectory()) {
currentDirectory = currentDirectory + File.separator + listItem;
updateFileList(currentDirectory);
}
}
});
}
...
R.layout.listviewitem consists of ImageView and two TextViews (listviewitem.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:background="#drawable/menu_item_background_selector"
android:padding="6dip" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/icon"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="#id/icon"
android:gravity="center_vertical"
android:text="Example application"
android:textSize="16sp" />
</RelativeLayout>
Where selector menu_item_background_selector (menu_item_background_selector.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true"></item>
<solid android:color="#bfced4"></solid>
</selector>
the selector is wrong. The item should wrap the state and the color. And you should have a default item. E.g.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#bfced4" android:state_activated="true" />
<item android:drawable="#color/default_color" />
</selector>
Android will check the state from the top. So if android:state_activated is true, the corresponding color will be picked up. If it is false, it checks the next on the selector, until it reach the last one