Android Material Design profile page [closed]

匿名 (未验证) 提交于 2019-12-03 02:44:02

问题:

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:

https://github.com/chintansoni202/Material-Profile



回答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/




回答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> 


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!