[Android] 새로운 Bottom App Bar를 사용해 보았습니다. Material Design
Bottom App Bar??
Bottom App Bar란 구글 I/O 18에서 새로워졌다
Material Design 안에 있는 component이다.
htps : // 마테리아 l. 이오 / 데시 겐 / 코 m 포넨 ts / 아 p rs r 흐 m. html #아나토 my
으로
뭔가 멋지다. .
어떻게 쓰나요?
처음에는 뭔가 build가 어렵습니다.
어쨌든 생각했습니다.
Module:app의 놀림
이처럼
minSDK는 19까지도 괜찮습니다.
compileSdkVersion과 targetSdkVersion은 버전 28로 세트.
build.gradle
compileSdkVersion 28
defaultConfig {
applicationId "com.dreamwalker.bottomappbar"
minSdkVersion 21
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
Module:app 의 dependencies
material design Github에 따르면
If you don't want to switch over to the new androidx and com.google.android.material packages yet, you can use Material Components via the com.android.support:design:28.0.0-alpha3 dependency.
Note: You should not use the com.android.support and com.google.android.material dependencies in your app at the same time.
그래서,
build.gradle
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
//implementation 'com.google.android.material:material:1.0.0-beta01'
implementation 'com.android.support:appcompat-v7:28.0.0-beta01'
implementation 'com.android.support:design:28.0.0-beta01'
}
설정은 이런 식으로 만들었습니다. 다른 것은 추가하지 않았습니다.
Layout을 만들어 보자.
component는 CoordinatorLayout 안에 들어가야 한다.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">
<FrameLayout
android:id="@+id/flContainerHome"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorAccent"
app:fabCradleRoundedCornerRadius="10dp"
app:title="@string/detail"
app:titleTextColor="@android:color/black"
app:navigationIcon="@drawable/ic_menu_black_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_dribble"
app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>
코드하자. 마지막입니다.
onCreate 안에
Main.java
final BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
setSupportActionBar(bottomAppBar);
bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
Toast.makeText(MainActivity.this, "Clicked", Toast.LENGTH_SHORT).show();
}
});
Kotlin이라면.
main.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_home)
initView()
}
private fun initView() {
setSupportActionBar(bottomAppBar)
}
결과
첫 번째
두 번째
끝에
새로운 Material Design은 몇 번일까. .
시도해 보니, 이외에는 어렵지 않았습니다.
여기까지 읽어 주셔서 감사합니다.
다음도 더 도움이 되는 것을 쓰려고 생각합니다.
Dreamwalker
Reference
이 문제에 관하여([Android] 새로운 Bottom App Bar를 사용해 보았습니다. Material Design), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Dreamwalker/items/408315627e98b6e5618e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
새로운 Material Design은 몇 번일까. .
시도해 보니, 이외에는 어렵지 않았습니다.
여기까지 읽어 주셔서 감사합니다.
다음도 더 도움이 되는 것을 쓰려고 생각합니다.
Dreamwalker
Reference
이 문제에 관하여([Android] 새로운 Bottom App Bar를 사용해 보았습니다. Material Design), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Dreamwalker/items/408315627e98b6e5618e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)