Material Design
El nuevo look de android
¿Por qué todos amamos Material Design?
"Developers can look like great designers"
¿Por qué todos amamos Material Design?
"Developers can look like great designers"
¿Por qué todos amamos Material Design?
"Developers can look like great designers"
¿Por qué todos amamos Material Design?
"Developers can look like great designers"
Material Style
colorPrimaryDark
colorPrimary
colorAccent
navigationBarColor
{
Toolbar
Toolbar
Un mayor control sobre la apariencia del action bar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="@style/ToolbarTheme" />
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
Toolbar
Un mayor control sobre la apariencia del action bar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="@style/ToolbarTheme" />
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
Ripple
<ripple
android:color="@color/accent_dark">
<item>
<shape
android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
CardView
<android.support.v7.widget.CardView
android:layout_width="172dp"
android:layout_height="192dp"
android:orientation="vertical"
app:cardBackgroundColor="@color/primary_dark"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">
RecyclerView
LayoutManager
RecyclerView.Adapter
ItemAnimator
ItemDecorator
RecyclerView - Layout Manager
LinearLayoutManager
GridLayoutManager
RecyclerView - Adapter
public class SearchResultsAdapter extends RecyclerView.Adapter<ViewHolder>{
ArrayList<Model> models;
Context context;
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(context)
.inflate(R.layout.item, parent, false);
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
holder.setData(models.get(position));
}
@Override
public int getItemCount() {
return models.isEmpty() ? 0 : models.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
CircleImageView image;
TextView name, email;
public ViewHolder(View itemView) {
super(itemView);
image = (CircleImageView)itemView.findViewById(R.id.image);
name = (TextView)itemView.findViewById(R.id.name);
email = (TextView)itemView.findViewById(R.id.email);
}
RecyclerView - Adapter
Pablo Dominguez
pablo.dom@gmail.com
onCreateViewHolder()
onBindViewHolder()
RecyclerView - ItemAnimator
Design Library
New
Design
Library
com.android.support:design:22.2.0
Navigation Drawer
{
NavigationView
Header
Item
Navigation Drawer
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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>
Header
Menu
Navigation Drawer
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView ... />
<de.hdodenhof.circleimageview.CircleImageView ... />
<LinearLayout ...>
<TextView .../>
<TextView .../>
</LinearLayout>
</FrameLayout>
Fondo
Imagen
Nombre
Correo
Navigation Drawer
<menu>
<group android:checkableBehavior="single">
<item
android:checked="true"
android:id="@+id/item_nav_explore"
android:icon="@drawable/ic_explore_black_24dp"
android:title="@string/menu_schedule" />
<item
android:id="@+id/item_nav_people"
android:icon="@drawable/ic_people_black_24dp"
android:title="@string/menu_guests" />
<item
android:id="@+id/item_nav_map"
android:icon="@drawable/ic_map_black_24dp"
android:title="@string/menu_map" />
<item
android:id="@+id/item_nav_info"
android:icon="@drawable/ic_info_outline_black_24dp"
android:title="@string/menu_about" />
</group>
</menu>
Tab Layout
TabLayout
ViewPager
Tab Layout
<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="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton ... />
</android.support.design.widget.CoordinatorLayout>
Tab Layout
private void initViewPager() {
viewPager.setAdapter(new DiaryFragmentPagerAdapter(getChildFragmentManager(),
dayFragmentArray);
tabLayout.setupWithViewPager(viewPager);
}
Floating Action Button
FAB
Floating Action Button
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="end|bottom"
android:src="@drawable/ic_search_white_24dp"
app:borderWidth="0dp" />
Text Input Layout
TextInputLayout
Text Input Layout
<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="@string/hint_search_conference" />
</android.support.design.widget.TextInputLayout>
Snackbar
Snackbar
Snackbar
Snackbar.make(itemView, R.string.message_selected_session, Snackbar.LENGTH_LONG)
.setAction(R.string.ok, new View.OnClickListener() {
@Override
public void onClick(View v) {
//Do something
}
}).show();
Coordinator and collapsing layout
Coordinator and collapsing layout
<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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/imageViewbackdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:src="@drawable/logo_2"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="@style/ToolbarTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerViewGuests"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Coordinator and collapsing layout
app:layout_scrollFlags
app:layout_behavior
Asociación entre la vista que será scrolleada y el AppBarLayout
Definición de los cambios que hará cuando haya scrolling
That's it!
silmood
@silmood
Material Design: el nuevo look de android
By Petter Hdz
Material Design: el nuevo look de android
- 1,027