Ich bin neu in Android und Material Design. Könnte mir jemand bitte helfen, auf Websites zu verweisen, die mir dabei helfen, einen Profilbildschirm wie in den Materialrichtlinien von Google zu erstellen?Android Material Design Profilseite
Das Android-Entwickler-Blog ist eine weitere gute Ressource für eine Einführung in den Komponenten in dem Kontakt Beispiel:
http://android-developers.blogspot.co.uk/2015/05/android-design-support-library.html
Es gibt keine perfekten Tutorial, aber dies wäre ein guter Ort sein, Anfang.
Dieses Tutorial, das innerhalb Koordinator Layouts Scrollen auf Förderung konzentriert: ovel.xml https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
Die Statusleiste transparent wird unterstützt auf api Stufe 21 oder höher Ebene
//put below line is your style.xml.
<item name="android:windowTranslucentStatus">true</item>
erstellen Datei im aufklappbaren Ordner und kopieren und hinter dem folgenden 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
schreiben Code unten in Ihre activity_main.xml Datei
<?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>
Entwurf dieses
<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>
unterhalb xml und anschauen zu erreichen, öffnen Sie Ihre Activity.java folgenden Code hinzufügen
toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Ali Connors");
Ich war dabei, wr Ite einen Blog auf diesem Bildschirm Briefing über CoordinatorLayout. Anyways .. Sie können meine voll funktionierenden Code haben .:
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="[email protected]"
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="[email protected]"
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);
}
}
Sie die Quelle von meinem Github Repo herunterladen können:
Was ein undankbarer Kommentar @AbAppletic, sicher wissen, wie, dies zu betrachten Code und finde es selbst heraus !! – CaptRisky
Wenn das, was Sie sagen, wahr ist, dann hat er das Recht, seine Post Link-only zu machen, da „ich sicher auf eine andere Antwort aussehen kann, wenn die Verbindung zusammenbricht!" –
Wie geht das mit Recyclerview und Header? Dieses Beispiel ist ziemlich statisch –
Einführung zu den wichtigsten Prinzipien des Materialdesigns:
http://www.google.com/design/spec/material-design/introduction.html
http://developer.android.com/training/material/get-started.html
http://www.androidhive.info/2015/04/android-getting-started-with-material-design/ http://www.intertech.com/Blog/android-development-tutorial-lollipop-material-design/
Andere gebraucht Ressorces:
https://github.com/chrisbanes/cheesesquare –