Added icon attribute + fixed issue with focusability on inner childs …

…+ changed listener and added arrowbtn listener + updated example app
AleSpero · Mar 10, 2018 · 23b3e95 · 23b3e95
1 parent c7816a4
commit 23b3e95
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 33 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/app/src/main/java/com/alessandrosperotti/expandablecardviewexample/MainActivity.kt b/app/src/main/java/com/alessandrosperotti/expandablecardviewexample/MainActivity.kt
@@ -12,22 +12,12 @@ class MainActivity : AppCompatActivity() {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
-        val card : ExpandableCardView = findViewById(R.id.mycard)
+        val card : ExpandableCardView = findViewById(R.id.profile)
 
-        /*card.setOnClickListener({
-            if(card.isExpanded) card.collapse()
-            else card.expand()
-        })*/
-
-        card.setOnExpandedListener(object : ExpandableCardView.OnExpandedListener {
-            override fun onCollapsed(v: View) {
-                Toast.makeText(applicationContext, "Collapsed!", Toast.LENGTH_SHORT).show()
-            }
-
-            override fun onExpanded(v: View) {
-                Toast.makeText(applicationContext, "Expanded!", Toast.LENGTH_SHORT).show()
-            }
-        })
+        card.setOnExpandedListener { _, isExpanded ->
+            if(isExpanded) Toast.makeText(applicationContext, "Expanded!", Toast.LENGTH_SHORT).show()
+            else Toast.makeText(applicationContext, "Collapsed!", Toast.LENGTH_SHORT).show()
+        }
     }
 
 }
diff --git a/app/src/main/res/drawable/ic_dates.xml b/app/src/main/res/drawable/ic_dates.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#1976d2"
+        android:pathData="M9,11L7,11v2h2v-2zM13,11h-2v2h2v-2zM17,11h-2v2h2v-2zM19,4h-1L18,2h-2v2L8,4L8,2L6,2v2L5,4c-1.11,0 -1.99,0.9 -1.99,2L3,20c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2L21,6c0,-1.1 -0.9,-2 -2,-2zM19,20L5,20L5,9h14v11z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_location.xml b/app/src/main/res/drawable/ic_location.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#1976d2"
+        android:pathData="M12,2C8.13,2 5,5.13 5,9c0,5.25 7,13 7,13s7,-7.75 7,-13c0,-3.87 -3.13,-7 -7,-7zM12,11.5c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_person.xml b/app/src/main/res/drawable/ic_person.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#1976d2"
+        android:pathData="M12,12c2.21,0 4,-1.79 4,-4s-1.79,-4 -4,-4 -4,1.79 -4,4 1.79,4 4,4zM12,14c-2.67,0 -8,1.34 -8,4v2h16v-2c0,-2.66 -5.33,-4 -8,-4z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_plane.xml b/app/src/main/res/drawable/ic_plane.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#1976d2"
+        android:pathData="M10.18,9"/>
+    <path
+        android:fillColor="#1976d2"
+        android:pathData="M21,16v-2l-8,-5V3.5c0,-0.83 -0.67,-1.5 -1.5,-1.5S10,2.67 10,3.5V9l-8,5v2l8,-2.5V19l-2,1.5V22l3.5,-1 3.5,1v-1.5L13,19v-5.5l8,2.5z"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -4,16 +4,60 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:orientation="vertical"
     android:clipChildren="false"
     tools:context="com.alessandrosperotti.expandablecardviewexample.MainActivity"
     android:background="#FAFAFA">
 
 <com.alespero.expandablecardview.ExpandableCardView
-    android:id="@+id/mycard"
-    android:layout_margin="20dp"
+    android:id="@+id/profile"
+    android:layout_marginLeft="20dp"
+    android:layout_marginRight="20dp"
+    android:layout_marginTop="10dp"
+    android:layout_marginBottom="10dp"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    app:title="Item"
+    app:title="Passengers"
+    app:icon="@drawable/ic_person"
     app:inner_view="@layout/mycustomview"
     app:expandOnClick="true"/>
+
+    <com.alespero.expandablecardview.ExpandableCardView
+        android:id="@+id/location"
+        android:layout_marginLeft="20dp"
+        android:layout_marginRight="20dp"
+        android:layout_marginTop="10dp"
+        android:layout_marginBottom="10dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:title="Location"
+        app:icon="@drawable/ic_location"
+        app:inner_view="@layout/mycustomview"
+        app:expandOnClick="true"/>
+
+    <com.alespero.expandablecardview.ExpandableCardView
+        android:id="@+id/dates"
+        android:layout_marginLeft="20dp"
+        android:layout_marginRight="20dp"
+        android:layout_marginTop="10dp"
+        android:layout_marginBottom="10dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:title="Calendar"
+        app:icon="@drawable/ic_dates"
+        app:inner_view="@layout/mycustomview"
+        app:expandOnClick="true"/>
+
+    <com.alespero.expandablecardview.ExpandableCardView
+        android:id="@+id/flight"
+        android:layout_marginLeft="20dp"
+        android:layout_marginRight="20dp"
+        android:layout_marginTop="10dp"
+        android:layout_marginBottom="10dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:title="My Flight"
+        app:icon="@drawable/ic_plane"
+        app:inner_view="@layout/mycustomview"
+        app:expandOnClick="true"/>
 </LinearLayout>
diff --git a/expandablecardview/src/main/java/com/alespero/expandablecardview/ExpandableCardView.java b/expandablecardview/src/main/java/com/alespero/expandablecardview/ExpandableCardView.java
@@ -3,6 +3,8 @@
 
 import android.content.Context;
 import android.content.res.TypedArray;
+import android.graphics.drawable.Drawable;
+import android.support.annotation.Nullable;
 import android.support.v7.widget.CardView;
 import android.text.TextUtils;
 import android.util.AttributeSet;
@@ -47,10 +49,12 @@ public class ExpandableCardView extends LinearLayout {
     private ViewGroup containerView;
 
     private ImageButton arrowBtn;
+    private ImageButton headerIcon;
     private TextView textViewTitle;
 
     private TypedArray typedArray;
     private int innerViewRes;
+    private Drawable iconDrawable;
 
     private CardView card;
 
@@ -68,6 +72,14 @@ public class ExpandableCardView extends LinearLayout {
 
     private OnExpandedListener listener;
 
+    private OnClickListener defaultClickListener = new OnClickListener() {
+        @Override
+        public void onClick(View v) {
+            if(isExpanded()) collapse();
+            else expand();
+        }
+    };
+
     public ExpandableCardView(Context context) {
         super(context);
     }
@@ -97,6 +109,7 @@ private void initAttributes(Context context, AttributeSet attrs){
         //Ottengo attributi
         typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableCardView);
         title = typedArray.getString(R.styleable.ExpandableCardView_title);
+        iconDrawable = typedArray.getDrawable(R.styleable.ExpandableCardView_icon);
         innerViewRes = typedArray.getResourceId(R.styleable.ExpandableCardView_inner_view, View.NO_ID);
         expandOnClick = typedArray.getBoolean(R.styleable.ExpandableCardView_expandOnClick, false);
         typedArray.recycle();
@@ -110,9 +123,16 @@ protected void onFinishInflate() {
 
         arrowBtn = findViewById(R.id.arrow);
         textViewTitle = findViewById(R.id.title);
+        headerIcon = findViewById(R.id.icon);
 
+        //Setting attributes
         if(!TextUtils.isEmpty(title)) textViewTitle.setText(title);
 
+        if(iconDrawable != null){
+            headerIcon.setVisibility(VISIBLE);
+            headerIcon.setBackground(iconDrawable);
+        }
+
         card = findViewById(R.id.card);
 
         ViewStub stub = findViewById(R.id.viewStub);
@@ -124,13 +144,8 @@ protected void onFinishInflate() {
         setElevation(Utils.convertDpToPixels(getContext(), 4));
 
         if(expandOnClick){
-            setOnClickListener(new OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    if(isExpanded()) collapse();
-                    else expand();
-                }
-            });
+            card.setOnClickListener(defaultClickListener);
+            arrowBtn.setOnClickListener(defaultClickListener);
         }
 
     }
@@ -180,10 +195,10 @@ protected void applyTransformation(float interpolatedTime, Transformation t) {
 
                     if(listener != null){
                         if(animationType == EXPANDING){
-                            listener.onExpanded(card);
+                            listener.onExpandChanged(card,true);
                         }
                         else{
-                            listener.onCollapsed(card);
+                            listener.onExpandChanged(card,false);
                         }
                     }
                 }
@@ -245,15 +260,21 @@ public void removeOnExpandedListener(){
         this.listener = null;
     }
 
+    @Override
+    public void setOnClickListener(@Nullable OnClickListener l) {
+        if(arrowBtn != null) arrowBtn.setOnClickListener(l);
+        super.setOnClickListener(l);
+    }
+
+
     /**
      * Interfaces
      */
 
     public interface OnExpandedListener {
 
-        void onExpanded(View v);
+        void onExpandChanged(View v, boolean isExpanded);
 
-        void onCollapsed(View v);
     }
 
 }

diff --git a/expandablecardview/src/main/res/layout/expandable_cardview.xml b/expandablecardview/src/main/res/layout/expandable_cardview.xml
@@ -4,7 +4,6 @@
     android:layout_height="wrap_content"
     android:paddingTop="@dimen/default_vertical_padding"
     android:paddingBottom="@dimen/default_vertical_padding"
-    android:descendantFocusability="blocksDescendants"
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
         <LinearLayout
@@ -22,13 +21,21 @@
 
                 <!-- Rivedi effetto ripple -->
 
+                <ImageButton
+                    android:id="@+id/icon"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="15dp"
+                    android:visibility="gone"/>
+
                 <TextView
                     android:id="@+id/title"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:textSize="16sp"
-                    android:layout_marginLeft="20dp"
+                    android:layout_marginLeft="10dp"
                     android:text="Prova"
+                    android:layout_toEndOf="@+id/icon"
                     android:textColor="@android:color/primary_text_light" />
 
                 <ImageButton

diff --git a/expandablecardview/src/main/res/values/attr.xml b/expandablecardview/src/main/res/values/attr.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <declare-styleable name="ExpandableCardView">
-        <attr name="inner_view" format="reference"/>
         <attr name="title" format="string"/>
+        <attr name="icon" format="reference"/>
+        <attr name="inner_view" format="reference"/>
         <attr name="expandOnClick" format="boolean"/>
     </declare-styleable>
 </resources>