I am just looking for an example for expansion panels in android (Material design).
https://www.google.com/design/spec/components/expansion-panels.html
I know we have expandable listview. But, I need to show some additional layout view on expanding each panel similar to Accordian view. How can we achieve this in android?
Try the expandable layout here . It can have the same behaviour as an Accordian
Include it to your gradle with compile 'com.github.aakira:expandable-layout:1.5.1#aar'
Example
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/accordian_header"
android:clickable="true">
<TextView
android:id="#+id/accordian_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:textColor="#333"
android:textStyle="bold"
android:text="Title" />
<ImageButton
android:id="#+id/down_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="8dp"
android:src="#android:drawable/arrow_down_float" />
</RelativeLayout>
<com.github.aakira.expandablelayout.ExpandableLinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="14dp"
android:paddingRight="14dp"
android:paddingBottom="14dp"
android:orientation="vertical"
android:id="#+id/content"
app:ael_expanded="false"
app:ael_duration="500"
app:ael_orientation="vertical">
<!--add your content here -->
</com.github.aakira.expandablelayout.ExpandableLinearLayout>
</LinearLayout>
Then in your java code
ExpandableLinearLayout content=(ExpandableLinearLayout) itemView.findViewById(R.id.content);
RelativeLayout header=(RelativeLayout) itemView.findViewById(R.id.accordian_header);
//to toggle content
header.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
content.toggle();
}
});
Hope that was helpful.
Related
I am using recyclerview for showing data from web service. Based on particular condition i need to remove the particular recycler view item. So i am using View.Gone. But it is showing empty space. I googled about this issue and set the height to wrapcontent, but it is not working. Please any one help me.
my code:
xml: item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/businfo"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
app:contentPaddingBottom="10dp"
app:contentPaddingTop="16dp"
android:elevation="10dp"
android:layout_margin="5dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal">
<TextView
android:id="#+id/travel_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="14sp"
android:layout_marginLeft="5dp"
android:textColor="#color/holo_blue_light"
android:text="CGR Travels"/>
<TextView
android:id="#+id/bus_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:textSize="14sp"
android:textColor="#F04C3B"
android:layout_marginRight="30dp"
android:text="Rs.349"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginTop="5dp"
android:background="#b6b6b6"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/arrtime_desttime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:textSize="15sp"
android:textColor="#1e356a"
android:text="9.00P.M - 7.00AM"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:textSize="12sp"
android:layout_marginRight="30dp"
android:text="38 seats"
android:id="#+id/seatcount" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="12sp"
android:layout_marginLeft="5dp"
android:text="2+1 semi sleeeper"
android:id="#+id/bustype" />
<TextView
android:id="#+id/cancellationpolicy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:textSize="12sp"
android:textColor="#color/holo_blue_light"
android:layout_marginRight="30dp"
android:text="Cancellation policy"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="#+id/routeid"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="#+id/dropdate"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
java:
#Override
public void onBindViewHolder(final BusrouteAdapter.ViewHolder viewHolder, final int position) {
if ((bus_routes.get(position).getAvailableSeats() == 0)) {
viewHolder.businfo.setVisibility(View.GONE);
} else {
viewHolder.businfo.setVisibility(View.VISIBLE);
}
}
Although removing the item from list and then updating list (notifydatasetchanged()) is a good practice but in some cases like when you have multiple viewHolders in a signle recyclerView it may be complicated, so in order to hide an specific item in your recyclerView you should do as below:
- Dont hide the root view of your layout, instead add a child to rootView of your layout which contains all other views and hide that. for example in your case you can set your cardView visibity to View.GONE and dont make any change to its parent linearLayout (businfo). i had similar case and this worked for me.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- don't change visibility of rootView view -->
<LinearLayout
android:id="#+id/child_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Place all child views inside here -->
<!-- change visibility of child_container view -->
</LinearLayout>
</LinearLayout>
You should remove this item from your bus_routes:
bus_routes.remove(position);
And then:
notifyItemRemoved(position);
notifyItemRangeChanged(position, bus_routes.size());
You can not directly hide view this way. you have to remove unwanted items from your ArrayList or don't add unwanted item before setting adapter. If your items are updated then again remove unwanted items and call notifydataset changed
Remove this element from ArrayList and use notifyDataSetChanged();
Example :
holder.imageDelete.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
paths.remove(position);
notifyDataSetChanged();
}
});
You dont need to set visible or gone just remove item from list and than update list.
#Override
public void onBindViewHolder(final BusrouteAdapter.ViewHolder viewHolder, final int position) {
if ((bus_routes.get(position).getAvailableSeats() == 0)) {
bus_routes.remove(position);
}
}
try to call youradapter.notifydatasetchanged() after set adapter to recyclerview from activity.
I am trying to do the same animation as Google :
https://vid.me/9Wli
A quick explanation about my app :
At the top I have an AppBar, below it a LinearLayout including a button to expand more information and below this LinearLayout I have a RecyclerView.
For the moment, when I click the "expand more" button, I just show some items with .setVisibility(View.VISIBLE), so I have no animation.
Here is my actual XML code :
<LinearLayout
android:id="#+id/expandable_zone"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:visibility="gone">
<LinearLayout
android:id="#+id/1"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_width="wrap_content"
android:text="#string/expandable_1"
android:textColor="#color/secondaryTextDark"
android:textSize="13dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom_expandable_zone"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:animateLayoutChanges="true"
android:id="#+id/expand_more"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="11sp"
android:layout_marginTop="11sp"
android:layout_width="wrap_content"
android:text="#string/expand_more"
android:textColor="#color/secondaryTextDark" />
<ImageButton
android:background="#drawable/circle_shape"
android:id="#+id/expand_less"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="11sp"
android:layout_marginTop="10sp"
android:layout_width="wrap_content"
android:src="#drawable/ic_check_grey600_24dp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Can anyone give me the best solution to do that ?
android:animateLayoutChanges="true"
set it on LinearLayout
android:id="#+id/bottom_expandable_zone"
if this wont help u need to serach on stackoverflow how to animate view and implement it on your android:id="#+id/bottom_expandable_zone"
I have a ListView with TextView and Button each row this is my layout content
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/desc"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right">
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dp" />
</LinearLayout>
</FrameLayout>
This is a screenshot which describe the error: http://it.tinypic.com/r/a47ho9/9
I would not use a FrameLayout for the ListView row because it is difficult to position items in a FrameLayout. Just use one LinearLayout with android:orientation="horizontal" and put your TextView and Button inside that.
It's easier to use a RelativeLayout to place your widgets correctly I would say. And I would also recommend to try flattening your layout. It means that you should not nest so many layouts. It is a pretty simple thing to do in this case. You want to have as little nested layouts as possible when you build your ui to optimisee performance.
Try something like this instead, might not be exactly what you want but maybe helps you.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background=""
android:padding="8dp">
<TextView
android:id="#+id/desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Medium text"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_toLeftOf="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="70dp"
android:text="button"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
You can read more about optimising your layout here https://developer.android.com/training/improving-layouts/optimizing-layout.html
I am using a RecyclerView and I am not able to see any feedback when I touch on the item of the RecyclerView. How do I achieve it?
I am trying to show a feedback to the user when they are touching the row of RecyclerView. Something like a ripple effect.
I want to know how to achieve it in a specific row of the RecyclerView.
This is the recycler view's custom row layout.
<?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="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
This is the layout of the Activity having the RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:background="#drawable/ic_drawer_header">
<ImageView
android:id="#+id/circle_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/profile_pic"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="John Doe"
android:textSize="20sp"
android:textColor="#ffffff"
android:layout_below="#+id/circle_imageview"
android:layout_alignLeft="#+id/circle_imageview"
android:layout_alignStart="#+id/circle_imageview"
android:layout_marginTop="5dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Transaction Technologies"
android:layout_below="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView"
android:textColor="#ffffff"
android:layout_marginTop="5dp" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/nav_header_container" />
</RelativeLayout>
I just need to highlight/give feedback of the row which is being touched by the user. How do I achieve it?
Thanks in advance.
You need to add android:focusable="true" in your custom row item for RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true" >
</RelativeLayout>
You can add a Ripple effect by using THIS LIBRARY.Include it in your Gradle files using.
compile 'com.thomsonreuters:rippledecoratorview:+'
Simply put your row layout in a RippleDecoratorView.For eg:
<com.thomsonreuters.rippledecoratorview.RippleDecoratorView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="4dp"
rdv:rdv_rippleColor="#android:color/holo_blue_dark"
rdv:rdv_rippleAnimationFrames="60"
rdv:rdv_rippleAnimationPeakFrame="15"
rdv:rdv_rippleMaxAlpha="0.8"
rdv:rdv_rippleAnimationDuration="600"
rdv:rdv_rippleRadius="50dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
</com.thomsonreuters.rippledecoratorview.RippleDecoratorView>
Or you can use any of these libs acc to your requirement:
1>https://github.com/balysv/material-ripple
2>https://github.com/siriscac/RippleView
3>https://github.com/traex/RippleEffect
I can help you but I will need some feedback from you as well. In the onCreateVIewHolder inside your recycler View adapter you must have defined textViews and assigned it to the elements inside the sample recycler view. Add this. Make sure you define the layout outside the function so its accessible throughout the class
RelativeLayout layout;
layout=(RelativeLayout)view.findViewById.(R.layout.drawer_row)
Then go to you recycler view adapter and in the onBindViewHolder define
holder.layout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Handle onClick event
}
});
In the onClick event you can add any kind of feedback you want to the user to experience such as starting a new activity, toasts, messages or in this case a ripple effect. You can use a custom library for ripples such as these
Ripple effect for lollipop views
https://android-arsenal.com/details/1/980
https://github.com/balysv/material-ripple
Ripple effects are not supported in pre-Lollipop devices.
Still use this material-ripple
compile 'com.balysv:material-ripple:1.0.2'
Apply ripple on holder.drawView
MaterialRippleLayout.on(holder.drawerView)
.rippleColor(Color.RED)
.create();
Or you can apply from xml
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button inside a ripple"/>
</com.balysv.materialripple.MaterialRippleLayout>
Many popular apps like Google Maps, Facebook, Foursquare, etc. have header and/or footer bars on most of their activities. These headers often include very useful buttons, and
I would like to create one for my app. Does anyone know how they are done? I haven't been able to find anything so far.
Here are some pictures of what I mean:
http://www.flickr.com/photos/calebgomer/6262815430
http://www.flickr.com/photos/calebgomer/6262815458
Using this way you can make your header-footer xml and use it to any of your activity also you just need to write code for the controls in header-footer once in HeaderFooter.java and can access it your project.
Build your HederFooter.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" android:weightSum="10"
android:id="#+id/commonlayout" android:background="#FFFFFF">
<LinearLayout android:id="#+id/llheader"
android:layout_width="fill_parent" android:layout_height="0dp"
android:background="#drawable/bar" android:layout_weight="1">
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_gravity="center">
<Button
android:id="#+id/Button_HeaderFooterSubscribe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="2dp"
android:layout_centerVertical="true"
android:background="#drawable/subscribe"
/>
<Button
android:id="#+id/Button_logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="2dp"
android:layout_centerVertical="true"
android:background="#drawable/logout"
/>
<Button
android:id="#+id/Button_playlist"
android:layout_marginLeft="2dp"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/tempadd"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout android:id="#+id/lldata"
android:layout_weight="8" android:layout_width="fill_parent"
android:layout_height="0dp" android:background="#FFFFFF">
</LinearLayout>
<LinearLayout android:id="#+id/llfooter"
android:layout_weight="1" android:layout_width="fill_parent"
android:orientation="horizontal" android:layout_height="0dp"
android:visibility="visible" android:background="#drawable/fbg"
android:weightSum="5.0" android:gravity="center"
android:layout_margin="0dp">
<Button android:id="#+id/home" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/home" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/issue" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/issue" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/browse" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/browse" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/search" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/search" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:layout_height="wrap_content" android:id="#+id/favorite"
android:background="#drawable/favorite" android:layout_width="wrap_content"
android:layout_weight="1"
android:textColor="#FFFFFF" android:padding="10px"></Button>
</LinearLayout>
</LinearLayout>
Then Create One HeaderFooter.java Activity
public class HeaderFooter extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.headerfooter);
}
}
Now Extend above activity to your all other activities and inflate your particular view in the middle layout of the headerfooter.xml
public class Home extends HeaderFooter
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ViewGroup vg = (ViewGroup) findViewById(R.id.lldata);
ViewGroup.inflate(Home.this, R.layout.home, vg);
}
}
Just create a xml as you need.
Add these XML to your other screens using tag in your other Screen XMLs.
Sample is here.
You can handle the button click as you need in each activity.
Hope this helps.
Design Xml layout with header,footer and body.you have to extend the main activity every time,you have to change body by inflating desired layout.
I think the element that you're liking in those layouts is the fact that they're using a FrameLayout for the lower part of the display.
They're probably doing something like this:
<LinearLayout android:orientation="vertical
.../>
<head layout element>
<FrameLayout element>
<footer layout element>
</LinearLayout>