Giter Club home page Giter Club logo

expandablelayout's Introduction

ExpandableLayout


๐Ÿฆš An expandable layout that shows a two-level layout with an indicator.


License API Travis Android Weekly Javadoc

Including in your project

Maven Central Jitpack

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

And add a dependency code to your module's build.gradle file.

dependencies {
    implementation "com.github.skydoves:expandablelayout:1.0.7"
}

Usage

Add following XML namespace inside your XML layout file.

xmlns:app="http://schemas.android.com/apk/res-auto"

ExpandableLayout

Here is a basic example of implementing ExpandableLayout.

<com.skydoves.expandablelayout.ExpandableLayout
  android:id="@+id/expandable"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="30dp"
  app:expandable_duration="300"
  app:expandable_isExpanded="false" // expand the second layout initially or not.
  app:expandable_parentLayout="@layout/layout_parent" // sets the parent layout. 
  app:expandable_secondLayout="@layout/layout_second" // sets the second layout.
  app:expandable_showSpinner="true" // shows the spinner or not.
  app:expandable_spinner="@drawable/ic_arrow_down" // sets the spinner's drawable.
  app:expandable_spinner_animate="true" // animates the spinner when expanding or collapse.
  app:expandable_spinner_margin="14dp" // sets the margin to the spinner.
  app:expandable_spinner_gravity="start" // sets the gravity to the spinner.
  app:expandable_spinner_size="32dp" // sets the spinner size.
/>

Create using builder class

We can create an instance of ExpandableLayout using the builder class.

val myExpandableLayout = expandableLayout(context) {
  setParentLayoutResource(R.layout.layout_parent)
  setSecondLayoutResource(R.layout.layout_second)
  setShowSpinner(true)
  setSpinnerAnimate(true)
  setSpinnerMargin(12f)
  setSpinnerRotation(90)
  setDuration(200)
  setOnExpandListener { toast("is expanded : $it") }
}

Expand and Collapse

We can expand and collapse using the below methods.

expandablelayout.expand() // expand the second layout with indicator animation.
expandablelayout.collapse() // collapse the second layout with indicator animation.

ParentLayout and SecondLayout

We can get the parentLayout and secondLayout of the ExpandableLayout.
And we can access child views of them.

expandablelayout.parentLayout.setOnClickListener {
  toast("the parent layout is clicked!")
}
expandablelayout.secondLayout.setOnClickListener {
  toast("the second layout is clicked!")
}

// getting child view using findViewById.
expandablelayout.secondLayout.findViewById<Button>(R.id.button0).setOnClickListener { 
    toast("button0 clicked") 
}
// getting child view using android extension.
expandablelayout.secondLayout.button0.setOnClickListener { toast("button0 clicked") }

OnExpandListener

We can listen to the ExpandableLayout is expanded or collapsed.

expandablelayout.onExpandListener = object : OnExpandListener {
  override fun onExpand(isExpanded: Boolean) {
    toast("Expanded : $it")
  }
}

// or we can listen using a lambda expression.
expandable.setOnExpandListener {
  if (it) {
    toast("expanded")
  } else {
    toast("collapse")
  }
}

ExpandableAnimation

We can customize the expanding and collapsing animation.

ExpandableAnimation.NORMAL
ExpandableAnimation.ACCELERATE
ExpandableAnimation.BOUNCE
NORMAL ACCELERATE BOUNCE

ExpandableLayout Attributes

Attributes Type Default Description
isExpanded Boolean false Expand the second layout initially or not.
parentLayout layout default layout Sets the parent layout.
secondLayout layout default layout Sets the second layout.
duration Long 250L Sets the duration of the spinner animation.
spinner Drawable arrow_down Sets the spinner's drawable.
showSpinner Boolean true Shows the spinner or not.
spinner_animate Boolean true Animates the spinner when expanding or collapse.
spinner_rotation Integer -180 Sets the rotation of the spinner animation.
spinner_size Dimension 36dp Sets the size of the spinner.
spinner_margin Dimension 8dp Sets the margin of the spinner.
spinner_gravity SpinnerGravity end Sets the gravity of the spinner.

Find this library useful? โค๏ธ

Support it by joining stargazers for this repository. โญ
And follow me for my next creations! ๐Ÿคฉ

License

Copyright 2019 skydoves (Jaewoong Eum)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

expandablelayout's People

Contributors

skydoves avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

expandablelayout's Issues

Wrong header size

Please complete the following information:

  • Library Version: 1.0.6
  • Affected Device(s): Samsung Galaxy S9+ Android 10.

Describe the Bug:
Hi,

I am having some troubles while displaying the parent layout. It seems to have a fixed size and it does not adapts to the actual size of my parent layout. The Expandable layout is wrapped within a linearlayout in a nestedscroll view.

I attach the code in case I am doing something wrong:

<com.skydoves.expandablelayout.ExpandableLayout
                android:id="@+id/expandableThirdPartyDevices"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                app:expandable_duration="300"
                app:expandable_isExpanded="false"
                app:expandable_parentLayout="@layout/content_expandable_parent"
                app:expandable_secondLayout="@layout/content_expandable_second"
                app:expandable_showSpinner="true"
                app:expandable_spinner="@drawable/ic_arrow_down"
                app:expandable_spinner_animate="true"
                app:expandable_spinner_margin="14dp"
                app:expandable_spinner_gravity="end"
                app:expandable_spinner_size="32dp" />`

content_expandable_parent:

<?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="match_parent"
    android:layout_height="40dp"
    android:background="@drawable/rounded_corners_button"
    android:backgroundTint="@color/StemyEnergy.Color.UI.Text.Background.Blue"
    android:id="@+id/ctlySelectDevice">

    <TextView
        android:id="@+id/txtSelectDevice"
        android:textSize="@dimen/medium_text_size_app"
        android:textColor="@color/StemyEnergy.Color.UI.Text.Blue"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingStart="15dp"
        android:gravity="start|center"
        android:text="@string/StemyEnergy.String.UI.GeneralMessages.TestText"
        />
</LinearLayout>

Expected Behavior:
What I expect is the expandable layout header to adapt to my parent layout content.

Thanks in advance for your help!!

Cheers,
Nacho

Second layout does not have the right height

Please complete the following information:

  • Library Version 1.0.3
  • Affected Device(s) Generic device

I'm using this library inside a recyclerview. Each item in the recyclerview can be expanded, but the content of each item can vary, so the height is different for each item. The library seems to calculate the height for each item, however the height is not correct. For each item is always less the the real layout size.

Expected Behavior:

Since the content of each item is dynamic, the library should expose a method that can re mesure the height of the second layout.

Duplicate Arrow

Please complete the following information:

  • Library Version: 1.0.7
  • Affected Device(s): Android Emulator - Pixel 3a XL API 30

Description:

A duplicate arrow is shown with my own provided drawable.
PS: Setting layout programmatically worked only, not with XML

Expected Behavior:

It should override the provided drawable icon in expandable_layout_frame.xml -> AppCompatImageView.

image
image

Actual Behavior:

SS-2
SS-1

Error inflating class on Android 4.x

  • Library Version [v1.0.5]
  • Affected Device(s) [AS emulator 4.2, 4.4]

Describe the Bug:
When inflating the layout containing expandablelayout, the app crashes. Unfortunately not much is reported to the logcat. Only "Error inflating class com.skydoves.expandablelayout"

Expected Behavior:
It should work as it does on Android 7 and 10; I tested on.

This is where it crashes
LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main_settings, null, false);

Below is how I use this library inside my layout
<com.skydoves.expandablelayout.ExpandableLayout
android:id="@+id/ABC"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:expandable_duration="150"
app:expandable_isExpanded="false"
app:expandable_parentLayout="@layout/abc_parent"
app:expandable_secondLayout="@layout/abc_child"
app:expandable_showSpinner="true"
app:expandable_spinner="@drawable/ic_arrow_down"
app:expandable_spinner_color="@color/violetDark"
app:expandable_spinner_animate="true"
app:expandable_spinner_margin="0dp"
app:expandable_spinner_size="36dp"/>

arrow view bug

There is an unused arrow on the top right.
I tried to make the arrow invisible, but I can't access the view.

2021-03-15 14;30;28

New version?

After 1.0.6 version there is no fresh releases, maybe it's time after multiple commits?

Expand animation not working

Hi, First of all, thanks for making this awesome library. Your effort is really appreciatable. But, I think you need to work more on this library because Expand animation is not working at all. Child layout is always fixed and it's not animated while clicking on Parent Layout.

Spinner icon color only changes one time programmatically

Please complete the following information:

  • Library-Version: v1.0.7
  • Affected Device(s) Google Pixel3 with Android 12 and Huawei Android 8

Describe the Bug:

For the expansion spinner icon, I set its color from the XML file to be gray

<com.skydoves.expandablelayout.ExpandableLayout android:id="@+id/requestFailedExpandLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/_12sdp" android:layout_marginEnd="@dimen/_12sdp" app:expandable_duration="300" app:expandable_isExpanded="false" app:expandable_parentLayout="@layout/request_failed_header_layout" app:expandable_secondLayout="@layout/request_failed_body_layout" app:expandable_showSpinner="true" app:expandable_spinner_animate="true" app:expandable_spinner_color="@color/gray_8b8b8b" />

then I added a listener on the layout when it's expanded the icon should be blue else should be gray

setOnExpandListener { if (isExpanding) { parentLayout.backgroundTintList = ContextCompat.getColorStateList(requireContext(), R.color.blue_daebfd) spinnerColor = R.color.colorPrimary parentLayout.findViewById<MaterialTextView>(R.id.tvRecommendationExpandTitle).setTextColor(ContextCompat.getColor(requireContext(), R.color.colorPrimary)) } else { parentLayout.backgroundTintList = ContextCompat.getColorStateList(requireContext(), R.color.gray_c7c7c7) spinnerColor = R.color.gray_8b8b8b parentLayout.findViewById<MaterialTextView>(R.id.tvRecommendationExpandTitle).setTextColor(ContextCompat.getColor(requireContext(), R.color.gray_8b8b8b)) } }

but after one single change, the color never changes again.

Expected Behavior:

the spinner icon color to be always changeable

secondLayout not completely hide when collapsing

  • Library Version - 1.0.6

I had implement multiple expandableLayout and I notice that when collapsing the second expandableLayout, the secondLayout is not completely hide.

I am using ScrollView as my main's parent layout to make it scrollable. is it ScrollView makes the secondLayout work abnormally?

WhatsApp.Video.2021-03-23.at.6.34.45.PM.mp4

Redundant amount of children's in View Hierarchy

Please complete the following information:

  • Library Version [v1.0.1]
  • Affected Device(s) [Android Emulator]

Describe the Bug:
First thing - great job! I like this library, looks pretty nice and API is clear to use. Unfortunately, I found some issues with the View Hierarchy with the views which are associated.

Whenever method updateExpandableLayout invokes then we don't delete the previous elements of the view. In summary, we have an under the hood huge view hierarchy.

Current behaviour:

Screenshot 2019-10-07 at 15 11 04

I found some simple and fast fix to resolve this issue before invokes of updateExpandableLayout we add a removeAllViews method to clear our view, then view hierarchy looks much simpler.

Screenshot 2019-10-07 at 15 09 18

Expected Behavior:

We shouldn't have a redundant amount of views.

The lib has weird issues in RecyclerView

Please complete the following information:

  • Library Version: 1.0.7
  • Affected Device(s) : Samsung Galaxy Note 10 with Android 12.0

Describe the Bug:
I have attached the reproduced video and code

XRecorder_15022022_002646.mp4

/*
 * Copyright (C) 2019 skydoves
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.skydoves.expandablelayoutdemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.skydoves.expandablelayoutdemo.databinding.ActivityCustomBinding
import kotlin.random.Random

class CustomActivity : AppCompatActivity() {

  private val adapter = ParentAdapter()

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val binding = ActivityCustomBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.recyclerView.adapter = adapter
    for (i in 0..100){
      val child = ArrayList<String>()
      val randomValues = List(10) { Random.nextInt(0, 50) }
      randomValues.forEach {
        child.add("child $i")
      }
      adapter.addSectionItem(
        SectionItem("Title $i", R.color.colorPrimary, child)
      )
    }

  }
}

Expected Behavior:

As demo sample

Recycler View in second Layout is not mesured

  • Library Version : 1.0.7
  • Pixel 3 and 4, OnePlus Nord, Android 10 and 11

Describe the Bug:

I put a recycler view in the second layout, but it doesn't get mesured, hence it is not displayed. The only way i made it appear is by giving it a fixed height in dp, which is not good for my app.

Expected Behavior:

The child recycler view should be displayed in full when it's height is set to wrap_content

View Binding for parent and second layouts

Unable to get the viewBinding references for parent and second layouts inside Expandable Layout view.
Tried with mainActivityBinding.expandableLayout.parentLayout/parentLayoutResource etc.. unable to get the viewbinding instance for the layouts inside expandable layout.

[mainActivityBinding being the binidng for the layout in which Exapandable layout with id expandableLayout.]

Parent layout textview is not showing multi text

  • implementation "com.github.skydoves:expandablelayout:1.0.7"
  • Device : All

I am trying to set multiline text in parent layout textview. It's working in XML preview and when i run the device its showing only one line. I have tried with maxLine =5 and singleLine=false properties as well. Please help me

conflicts with another tag that has the same ID

Please complete the following information:

  • Library Version [e.g. v1.0.0]
  • Affected Device(s) [e.g. Samsung Galaxy s10 with Android 9.0]

This is what i am getting in my app

{"msg":"\u003ccom.skydoves.expandablelayout.ExpandableLayout id\u003d\u0027@+id/expandable\u0027\u003e conflicts with another tag that has the same ID","file":"app\src\main\res\layout\fragment_kyc_overview.xml","pos":[{"line0":187,"col0":24,"line1":195,"col1":64}]}

Recycle view - example

try change length of a each list in the Section items in your example. Something like:


adapter.addSectionItem(
      SectionItem("Title0", R.color.colorPrimary, arrayListOf("item0"))
)
adapter.addSectionItem(
      SectionItem("Title1", R.color.md_yellow_100, arrayListOf("item0", "item1", "item2", "item3"))
)
adapter.addSectionItem(
      SectionItem("Title2", R.color.md_amber_700, arrayListOf("item0", "item1", "item2"))
)

Now a ExpandableLayout start to show empty items.

toggleLayout() cannot be resolved

  • Library Version - 1.0.6

Hi, recently I found this library and the implementation is great and simple. Thanks for it :)
But there is some problem regarding on the method toggleLayout(). I can't use this method as it stated as not resolved.

Here is the screenshot.
Screenshot_1

I am using Fragment instead of Activity. Is it the problem exist because I am using Fragment?

PS: I notice that there is no toggleLayout() in ExpandableLayout.kt

demo project

Hi. The lib looks awesome.Hovewer I was not able set up layouts properly(. Can you please add some demo project?

Fixed height, not able to see the full view.

Library Version v1.0.6

The layout set as secondLayout is not displayed entirely. It has android:layout_height="match_parent" but the ExpandableLayout doesn't take in the full size of the layout file.

I'd expect to have the second layout fully displayed. The ExpandableLayout should take the added height of it's parent and second layout when expanded. Right now I see it's a fixed size and I have to include a ScrollView as a workaround

General Sizing (Height) Issues

Library Version is 1.0.4

Describe the Bug:

I had the following problem when trying to implement your library. I was using a deprecated expandable layout library and I decided to switch to yours. My existing solution had a header (parent) layout of height ?attr/actionBarSize so I assumed I'd just be able to reuse these layouts. I converted them to support your system of having a parent and child layout and got it compiling.

I noticed that there was a gap between my parent and secondary layout and couldn't figure out why. After looking into the source for the library I found the issue to be in the resource file ExpandableLayout/expandablelayout/src/main/res/layout/expandable_layout_parent.xml

This layout defines the height of the parent to be a static 36dp rather than adapt to the custom view the developer chooses to be the parent view.

Also, I noticed a few issues when calculating the height of the secondary layout, it being larger than the source layout file. I will open a pull request that should shed some more light on the subject.

Expected Behavior:
I expect the parent layout to be the size of the layout I define as the parentLayout.

I expect the secondary layout to be the exact size that I define in the layout file, not larger.

setVisibility not working

Please complete the following information:

  • Library Version 1.0.7
  • Affected Device(s) Samsung Galaxy s9+ with Android 10.0

Describe the Bug:

The layout does not work as expected when programmatically changing its visibility. When you set the layout GONE and after an event visible again , the sizing format is completely lost.

Find here the xmls:

Main layout:

<LinearLayout
            android:id="@+id/lnlytExpandableTypeDevice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp">

            <com.skydoves.expandablelayout.ExpandableLayout
                android:id="@+id/expandableTypeDevice"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                app:expandable_duration="300"
                app:expandable_isExpanded="true"
                app:expandable_parentLayout="@layout/content_expandable_add_component_device_header"
                app:expandable_secondLayout="@layout/content_expandable_add_component_device_input"
                app:expandable_showSpinner="true"
                app:expandable_spinner="@drawable/ic_arrow_down"
                app:expandable_spinner_color="@color/StemyEnergy.Color.UI.Text.Green"
                app:expandable_spinner_animate="true"
                app:expandable_spinner_margin="14dp"
                app:expandable_spinner_gravity="end"
                app:expandable_spinner_size="40dp" />
        </LinearLayout>

parentLayout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ctlyDeviceType"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@drawable/rounded_corners_button"
    android:backgroundTint="@color/StemyEnergy.Color.UI.Text.Background.Green"
    android:paddingStart="15dp"
    android:paddingEnd="15dp"
    android:layout_marginBottom="10dp">

    <TextView
        android:id="@+id/deviceType"
        android:textSize="@dimen/medium_text_size_app"
        android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
        android:textColor="@color/StemyEnergy.Color.UI.Text.Green"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|start"
        android:text="@string/StemyEnergy.ThirdPartyDeviceSetUp.SelectDevicePromptLbl" />

</RelativeLayout>

secondLayout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:id="@+id/lnlyExpDeviceType">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/devRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:orientation="horizontal">
    </androidx.recyclerview.widget.RecyclerView>
</LinearLayout >

Find attached some screenshots:

  1. The second expandable layout was first set gone. After a click event it was set visible. The content of the second layout is missing (when it should not be gone) and the header format lost.

imagen

  1. Expandable layout working properly when not changing visibility:

imagen

Expected Behavior:

Visibility working as expected.

Thanks in advance!

Cheers,
Nacho

P.S. I have wrapped the expandable layouts within a LinearLayout, because is the only way of making them invisible without losing the format. However, if you set the LinearLayout visibility to GONE, the format is lost anyway.

Spinner expanded icon color

Hi. When using your component expanded spinner icon sets to yellow color by default.

Can you please tell me what style should I override to solve this? Thank you!

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.