问题
I am currently building a custom button navigation bar for an android app. It contains several clickable section inside (see cod below) and one fab button in the center that should overlap the top side of the navigation bar by half.
I managed to do this by using a negative margin and setting clipChildren to false on every parent element. Visually it looks just like I want it to but the part of the fab button outside of the navigation bar can't be clicked.
How can I achieve that overhanging button that is still clickable?
This is how it should look like:
Here is my test code. Clicks on the fab inside the parent are working, outside not so much.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
android:clipChildren="false">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:orientation="horizontal"
android:clipChildren="false">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:id="@+id/menu1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 2"/>
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center"
android:clipChildren="false">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabMenu"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_check"
android:layout_marginTop="-20dp"
android:layout_alignParentTop="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 2"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 4"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 5"/>
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And the MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d("MainActivity", "Started main activity");
findViewById(R.id.menu1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("MenuListener", "Clicked on menu 1 - working!");
}
});
findViewById(R.id.fabMenu).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("MenuListener", "Clicked on fab - partly working!");
}
});
}
}
回答1:
I am now pretty sure that it is just not possible the way I wanted to do it. I have found another way that works well though: just put the fab button outside of the menu and use something like a relative layout + the negative padding to position it just right. Here is the working layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:layout_centerInParent="true" />
<!-- just placed outside of the menu -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabMenu"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_check"
android:layout_marginTop="-20dp"
android:layout_alignTop="@+id/menu"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/colorPrimary"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:id="@+id/menu">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 2"/>
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:clipChildren="false">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 3"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 4"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_check"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu 5"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
And a picture:
来源：https://stackoverflow.com/questions/43456856/how-to-add-an-overlapping-button-in-android