I created an expandable menu which contains a chip group. When this menu is opened or closed there is an "undo" chip and a "redo" chip that are translated up or down when the menu opens or closes. I did this to save space, and avoid having a crowded UI.
The problem is when the menu is closed, the undo and redo chips cannot be clicked. I suspect the other chips are blocking them even though they seem to be hidden. What can I do about this?
MainActivity.java:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import com.google.android.material.card.MaterialCardView;
import com.google.android.material.chip.ChipGroup;
public class MainActivity extends AppCompatActivity {
private boolean menuIsOpen = true;
private Button openCloseButton;
private MaterialCardView menuCard;
private ChipGroup undoRedoGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
openCloseButton = findViewById(R.id.b_menu_openclose);
menuCard = findViewById(R.id.menu_card);
undoRedoGroup = findViewById(R.id.cg_undoredo);
openCloseButton.setScaleX(-1.0f);
}
public void onClick_Undo(View view) {
Log.i("MainActivity", "Undo clicked");
}
public void onClick_Redo(View view) {
Log.i("MainActivity", "Redo clicked");
}
public void onClick_Chip(View view) {
Log.i("MainActivity", "Chip# clicked");
}
public void onClick_OpenClose(View view) {
if(menuIsOpen) closeMenu();
else openMenu();
menuIsOpen = !menuIsOpen;
}
public void openMenu() {
menuCard.animate().alpha(1f);
menuCard.animate().scaleX(1.0f);
menuCard.animate().translationX(0f);
undoRedoGroup.animate().translationY(0f);
openCloseButton.animate().scaleX(-1.0f);
}
public void closeMenu() {
menuCard.animate().alpha(0f);
menuCard.animate().scaleX(0f);
menuCard.animate().translationX(500f);
undoRedoGroup.animate().translationY(-140f);
openCloseButton.animate().scaleX(1.0f);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.google.android.material.card.MaterialCardView
android:id="@+id/menu_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="@+id/b_menu_openclose"
app:layout_constraintEnd_toEndOf="@+id/b_menu_openclose"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/b_menu_openclose"
app:strokeColor="#000000"
app:strokeWidth="2dp">
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Chip"
android:text="Chip1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Chip"
android:text="Chip2" />
<com.google.android.material.chip.Chip
android:id="@+id/chip3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Chip"
android:text="Chip3" />
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Chip"
android:text="Chip4" />
</com.google.android.material.chip.ChipGroup>
</com.google.android.material.card.MaterialCardView>
<Button
android:id="@+id/b_menu_openclose"
android:layout_width="60dp"
android:layout_height="60dp"
android:onClick="onClick_OpenClose"
app:icon="?attr/actionModeCloseDrawable"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<com.google.android.material.chip.ChipGroup
android:id="@+id/cg_undoredo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<com.google.android.material.chip.Chip
android:id="@+id/chip_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Undo"
android:text="Undo" />
<com.google.android.material.chip.Chip
android:id="@+id/chip_redo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick_Redo"
android:text="Redo" />
</com.google.android.material.chip.ChipGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
If you would like to test this code, I just used an Empty Activity template and API level 32. Also, if there is a better way to create this collapsible menu I would love to hear it.
I've finally found a good solution, setting the visibility of the buttons in front to "GONE":
undoRedoGroup.setVisibility(View.GONE);
This allows the buttons behind them to be clicked, regardless of the position of either buttons.