[Android] 새로운 Bottom App Bar를 사용해 보았습니다. Material Design

Bottom App Bar??



Bottom App Bar란 구글 I/O 18에서 새로워졌다
Material Design 안에 있는 component이다.
  • Link + Material Design Bottom App Bar





  • htps : // 마테리아 l. 이오 / 데시 겐 / 코 m 포넨 ts / 아 p rs r 흐 m. html #아나토 my
    으로

    뭔가 멋지다. .

    어떻게 쓰나요?



    처음에는 뭔가 build가 어렵습니다.
    어쨌든 생각했습니다.
  • Android API 28
  • ...

  • 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

    좋은 웹페이지 즐겨찾기