Extended FAB를 BottomAppBar에 밀어 넣는다.
하고 싶은 일
Extended FAB는 무엇입니까?
Google I/O 2018에서 사용할 수 있는 텍스트가 있는 Floating Action Button.
자세한 내용은 Material I/O에서 찾을 수 있습니다.
BottomAppBar는 무엇입니까?
Material I/O에 규정된 화면 하단의 조작용 인터페이스.
BottomNavigationView 에 FAB가 있는 이미지.
구현 ➀ FAB + BottomAppBar
Material Components for Android를 사용합니다.
@furusin_oriver 님의 기사 참고로 구현.
Build.gradle
dependencies {
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'com.google.android.material:material:1.0.0-alpha1'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}
layout/fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_search"
app:layout_anchor="@id/bottom_app_bar"
app:fabSize="normal"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@android:drawable/ic_menu_upload" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Extended FAB 구현의 과제
FloatingActionButton에는 setText() 별로 좋지 않습니다. 
layout/fragment_main.xml
<com.google.android.material.bottomappbar.BottomAppBar
...
app:fabCradleDiameter="128dp" />
→ 결론 : Material Components씨에게 의지하는 것이 어려운 것이 판명.
구현 ➁ MaterialButton을 확장하여 Extended FAB를 구현합니다.
MaterialButton나 Button를 확장해 Extended FAB를 구현하고 있는 사람이 많은 모양. TJ씨의 기사 등을 참고로
ExtendedFAB (같은 MaterialButton )를 만듭니다. 
layout/fragment_main.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="小説を探す"
android:gravity="center"
app:layout_anchorGravity="top|center"
android:paddingStart="12dp"
android:paddingEnd="20dp"
app:cornerRadius="32dp"
app:iconPadding="12dp"
app:icon="@android:drawable/ic_menu_search"
style="@style/Widget.Design.FloatingActionButton"
app:layout_anchor="@id/bottom_app_bar"
/>
구현 ③ BottomAppBar 를 빠져나갑니다.
BottomAppBar입니다. BottomAppBar의 elevation을 -1dp로 합니다. layout/fragment_main.xml
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 小説を探す "
android:gravity="center"
android:textColor="@color/background"
android:backgroundTint="@color/background"
android:paddingStart="12dp"
android:paddingEnd="10dp"
android:layout_gravity="center"
app:cornerRadius="24dp"
app:iconPadding="12dp"
app:icon="@android:drawable/ic_search_category_default"
android:layout_alignLeft="@id/fab"
android:layout_alignRight="@id/fab"
app:layout_anchor="@id/bottom_app_bar"
app:layout_anchorGravity="top|center"
android:enabled="false"
/>
<com.google.android.material.bottomappbar.BottomAppBar
...
android:elevation="-1dp" />
요약
Reference
이 문제에 관하여(Extended FAB를 BottomAppBar에 밀어 넣는다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nomunomu5678/items/58caedfc41234d40e806텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
