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

Made with Slides.com

Material Design: el nuevo look de android

  • 1,156

More from Petter Hdz