Date post: | 12-Aug-2015 |
Category: |
Technology |
Upload: | concrete-solutions |
View: | 55 times |
Download: | 4 times |
Android Design Library Halyson Lima
Halyson Lima @hlgoncalvesbr
CONTEXTO
ActionBar Sherlock
ActionBar Compat
Observable ScrollView
Coordinator Layout
Support Library
Android Design Library
Dependências dependencies { compile 'com.android.support:design:22.2.0' }
● Navigation Drawer View
● Floating Action Button ● Tab Layout
● Coordinator Layout
● Snackbar ● Text Input Layout
Navigation Drawer View <android.support.v4.widget.DrawerLayout 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" android:fitsSystemWindows="true"> <!– Seu Layout --> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout>
Navigation Drawer View <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_dashboard" android:title="Home" /> <item android:id="@+id/nav_messages" android:icon="@drawable/ic_event" android:title="Messages" /> <item android:id="@+id/nav_friends" android:icon="@drawable/ic_headset" android:title="Friends" /> <item android:id="@+id/nav_discussion" android:icon="@drawable/ic_forum" android:title="Discussion" /> </group>
Navigation Drawer View
<item android:title="Sub items"> <menu> <item android:icon="@drawable/ic_dashboard" android:title="Sub item 1" /> <item android:icon="@drawable/ic_forum" android:title="Sub item 2" /> </menu> </item>
Navigation Drawer View
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { menuItem.setChecked(true); mDrawerLayout.closeDrawers(); return true; } });
Floating Action Button
<android.support.design.widget.FloatingActionButton android:id="@+id/floating_action_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_tdc" android:layout_gravity="bottom|end" app:elevation="6dp" app:pressedTranslationZ="12dp"/>
Floating Action Button
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Ação do clique } });
Tab Layout <android.support.design.widget.TabLayout android:id="@+id/activity_default_tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primary" app:theme="@style/ThemeOverlay.AppCompat" android:visibility="gone" />
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); // Você também pode criar as tabs passando um ViewPager (já com adapter) tabLayout.setupWithViewPager(viewPager);
Tab Layout <android.support.design.widget.TabLayout android:id="@+id/activity_default_tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primary" app:theme="@style/ThemeOverlay.AppCompat" android:visibility="gone" />
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); // Você também pode criar as tabs passando um ViewPager (já com adapter) tabLayout.setupWithViewPager(viewPager);
Coordinator Layout
<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" android:fitsSystemWindows="true"> <android.support.v7.widget.Toolbar android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin"/> </android.support.design.widget.CoordinatorLayout>
Snackbar
Snackbar.make(view, “Mensagem do Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", new View.OnClickListener() { @Override public void onClick(View v) { // Ação de clique da action } }).show(); // Assim como o Toast, não esqueça do .show()!
Text Input Layout
<android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="UserName"/> </android.support.design.widget.TextInputLayout>
● Collapsing Toolbar
● AppBar Layout
● Bug’s
Dúvidas?
● https://github.com/chrisbanes/cheesesquare ● https://speakerdeck.com/halysongoncalves/
tdc2015
Muito Obrigado!