I'm new to android and material design. Could some one please help me point to any websites that help me build a profile screen as below as per Google's material design guidelines?
问题:
回答1:
I was about to write a blog on this screen briefing about CoordinatorLayout
. Anyways.. You can have my fully working code.:
activity_scrolling.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.letsnurture.ln_202.coordinatorlayoutpart1.ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="218dp" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:src="@drawable/google_thumb" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_star_black_24dp" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" /> </android.support.design.widget.CoordinatorLayout>
content_scrolling.xml:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="@dimen/activity_horizontal_margin" android:padding="@dimen/activity_horizontal_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.letsnurture.ln_202.coordinatorlayoutpart1.ScrollingActivity" tools:showIn="@layout/activity_scrolling"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_phone_black_24dp" /> <TextView android:id="@+id/tvNumber1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem1" android:layout_toRightOf="@id/ivContactItem1" android:text="(123) 456-7890" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber1" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem1" android:layout_toRightOf="@id/ivContactItem1" android:text="Home" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState1" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:checked="true" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_phone_black_24dp" android:visibility="invisible" /> <TextView android:id="@+id/tvNumber2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem2" android:layout_toRightOf="@id/ivContactItem2" android:text="(321) 654-0987" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber2" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem2" android:layout_toRightOf="@id/ivContactItem2" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState2" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:checked="false" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <include layout="@layout/item_divider" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_email_black_24dp" /> <TextView android:id="@+id/tvNumber3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem3" android:layout_toLeftOf="@+id/chkState3" android:layout_toRightOf="@id/ivContactItem3" android:layout_toStartOf="@+id/chkState3" android:ellipsize="end" android:maxLines="1" android:text="chintan@letsnurture.com" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber3" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem3" android:layout_toRightOf="@id/ivContactItem3" android:text="Home" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState3" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:checked="true" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_email_black_24dp" android:visibility="invisible" /> <TextView android:id="@+id/tvNumber4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem4" android:layout_toLeftOf="@+id/chkState4" android:layout_toRightOf="@id/ivContactItem4" android:layout_toStartOf="@+id/chkState4" android:ellipsize="end" android:maxLines="1" android:text="pratik@letsnurture.com" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber4" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem4" android:layout_toRightOf="@id/ivContactItem4" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState4" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <include layout="@layout/item_divider" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_location_on_black_24dp" /> <TextView android:id="@+id/tvNumber5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem5" android:layout_toLeftOf="@+id/chkState5" android:layout_toRightOf="@id/ivContactItem5" android:layout_toStartOf="@+id/chkState5" android:ellipsize="end" android:maxLines="1" android:text="202 Park Street, Los Angeles" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber5" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem5" android:layout_toRightOf="@id/ivContactItem5" android:text="Home" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState5" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:checked="true" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/selectableItemBackground" android:clickable="true" android:padding="@dimen/activity_horizontal_margin"> <ImageView android:id="@+id/ivContactItem6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:src="@drawable/ic_email_black_24dp" android:visibility="invisible" /> <TextView android:id="@+id/tvNumber6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_toEndOf="@id/ivContactItem6" android:layout_toLeftOf="@+id/chkState6" android:layout_toRightOf="@id/ivContactItem6" android:layout_toStartOf="@+id/chkState6" android:ellipsize="end" android:maxLines="1" android:text="221B Baker Street, England" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="#212121" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tvNumber6" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginTop="8dp" android:layout_toEndOf="@id/ivContactItem6" android:layout_toRightOf="@id/ivContactItem6" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="#727272" /> <ToggleButton android:id="@+id/chkState6" android:layout_width="24dp" android:layout_height="24dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginStart="@dimen/activity_horizontal_margin" android:background="@drawable/toggle_selector" android:padding="6dp" android:textOff="" android:textOn="" /> </RelativeLayout> <include layout="@layout/item_divider" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="@dimen/activity_horizontal_margin"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send SMS" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_horizontal_margin" android:text="Call" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_horizontal_margin" android:text="Email" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_horizontal_margin" android:text="Remove Contact" /> </LinearLayout> </LinearLayout> </android.support.v4.widget.NestedScrollView>
item_divider.xml:
<?xml version="1.0" encoding="utf-8"?> <View xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="8dp" android:layout_marginTop="8dp" android:background="#B6B6B6" />
ScrollingActivity.java:
public class ScrollingActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scrolling); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } }
You can download the source from my Github repo:
回答2:
Introduction to the main principles of material design:
http://www.google.com/design/spec/material-design/introduction.html
- Guidelines and for developers:
http://developer.android.com/training/material/get-started.html
- Really good in-depth tutorials on material design:
http://www.androidhive.info/2015/04/android-getting-started-with-material-design/ http://www.intertech.com/Blog/android-development-tutorial-lollipop-material-design/
Other needed Resources:
回答3:
The android developers blog is another good resource for an introduction to the components in the contacts example:
http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html
There is no perfect tutorial but this would be a good place to start.
This tutorial that focuses on handling scrolling within coordinator layouts: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
回答4:
Design To achieve this take look at below xml
<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.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="192dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginBottom="32dp" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/anim_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/scrollableview" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" android:clickable="true" android:src="@drawable/ic_action_add" app:layout_anchor="@+id/appbar" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout>
Then Open your Activity.java add following code
toolbar = (Toolbar) findViewById(R.id.anim_toolbar); setSupportActionBar(toolbar); collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Ali Connors");
回答5:
The Status Bar transparent is supported on api level 21 or higher level
//put below line is your style.xml. <item name="android:windowTranslucentStatus">true</item>
create ovel.xml file in drawable folder and copy and past below code
//code start <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:startColor="#f42b89" android:endColor="#f42b89" android:angle="270"/> </shape> //code end
Write below code in your activity_main.xml file
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"> <!--android:padding="8dp"--> <RelativeLayout android:id="@+id/rv" android:layout_width="match_parent" android:layout_height="450dp" android:background="@android:color/white"> <ImageView android:id="@+id/imgProfilePic" android:layout_width="match_parent" android:layout_height="390dp" android:adjustViewBounds="true" android:scaleType="fitXY" android:src="@drawable/images" /> <ImageView android:id="@+id/imgFloating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginRight="20dp" android:layout_marginBottom="20dp" android:background="@drawable/oval" android:elevation="5dp" android:padding="20dp" android:src="@drawable/right_icon" /> </RelativeLayout> <ListView android:layout_below="@+id/rv" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"></ListView> </RelativeLayout>