View
1.150
Download
0
Category
Preview:
Citation preview
#IORewind
Android Design Support Library
nuuneoi
#IORewind
android.support.design.widget.FloatingActionButton
android:fabSize – normal (56dp), mini (40dp)
android:src – Icon’s resource
android:backgroundTint – Background color (accent
color will be used if not set)
There is some bug on API Level 21+ (Lollipop)
Floating Action Button (FAB)
#IORewind
android.support.design.widget.Snackbar
Just like a Toast
Snackbar.make(rootLayout, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) {
} }) .show();
Snackbar
#IORewind
CoordinatorLayout
building dependencies between sibling views and allowing easy scrolling reactions between components
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">
<!-- Place Views Inside -->
</android.support.design.widget.CoordinatorLayout
#IORewind
AppBarLayout
a container for Toolbar to make it fit in CoordinatorLayout
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<!-- Other views -->
</android.support.design.widget.CoordinatorLayout>
#IORewind
CoordinatorLayout’s Content
You need to apply
app:layout_behavior="@string/appbar_scrolling_view_behavior"
to the content view inside Coordinator or it will be placed at the same position as where Toolbar is
#IORewind
CoordinatorLayout’s Content<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout ...>
... </android.support.design.widget.AppBarLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical“ app:layout_behavior="@string/appbar_scrolling_view_behavior" >
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
#IORewind
TabLayout
You could place tabs easily with TabLayout. Support for both fixed and scrollable. Also works with ViewPager.
<android.support.design.widget.CoordinatorLayout ...>
<android.support.design.widget.AppBarLayout ...>
<android.support.v7.widget.Toolbar .../>
<android.support.design.widget.TabLayout android:id=“@+id/tabLayout” android:layout_width="match_parent“ android:layout_height="match_parent" />
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
#IORewind
TabLayout
tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
To manually add Tab(s)
#IORewind
TabLayout
Parameters:
app:tabMode – fixed (all tabs are shown concurrently) – scrollable (show a subset of tabs)
app:tabGravity – fill (distribute all available space) – center (position tabs in the center of TabLayout)
#IORewind
CollapsingToolbarLayout
Make Toolbar collapsible
#IORewind
CollapsingToolbarLayout
Simply wrap Toolbar with this layout
<android.support.design.widget.AppBarLayout ...>
<android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent“ android:layout_height="match_parent“ app:contentScrim=“?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar app:layout_collapseMode=“pin“ .../>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
#IORewind
CollapsingToolbarLayout
Toolbar’s background is recommended to be removed
You can place another View inside at the same approach as FrameLayout. Also with parallax support.
<android.support.design.widget.CollapsingToolbarLayout ...>
<ImageView app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7“ ...>
<android.support.v7.widget.Toolbar .../>
</android.support.design.widget.CollapsingToolbarLayout>
#IORewind
NavigationView
Implementing Navigation Drawercontents in very easy way
#IORewind
NavigationView
Define XML Layout for Header View
res/layout/nav_header.xml
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="192dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_margin="16dp" android:text="nuuneoi" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</FrameLayout>
#IORewind
NavigationView
Define XML for Menu Itemsres/menu/navigation_drawer_items.xml
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<group android:checkableBehavior="all"> <item android:id="@+id/navigation_item_1" android:icon="@drawable/ic_action_location_found_dark" android:title="Toolbar"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_action_location_found_dark" android:title="FloatActionButton"/> <item android:id="@+id/navigation_item_3" android:icon="@drawable/ic_action_location_found_dark" android:title="NavigationView"/> </group>
</menu>
#IORewind
NavigationView
Place NavigationView as navigation drawer of DrawerLayout
</android.support.v4.widget.DrawerLayout ...>
<android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:itemIconTint="#333" app:itemTextColor="#333" app:menu="@menu/navigation_drawer_items" />
</android.support.v4.widget.DrawerLayout>
#IORewind
NavigationView
Result
#IORewind
TextInputLayout
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" />
</android.support.design.widget.TextInputLayout>
Wrap EditText with this layout to make hint and error text shown as floating labels
#IORewind
Thank YouQ&A
Recommended