Android Design Library - TDC 2015

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!