طراحی پروفایل متریال دیزاین Android Studio

پروفایل متریال اندروید استودیو

پروفایل متریال ، عرض سلام و احترام خدمت کاربران گرامی سایت خانه اندروید در خدمتون هستیم با آموزش متریال دیزاین و بخش طراحی پروفایل برای کاربر در این بخش قصد داریم پروفایل متریال را برای کاربر طراحی کنیم که هم قابلیت ویرایش و هم اینکه بتوانند اطلاعات خود را مشاهده کند.خوب میرم سراغ آموزش اول از همه لازم هست یک اکتیویتی با نام Chnage_UserInforMation ایجاد کنید.

حتما بخوانید :

آموزش های متریال دیزاین

حالا قسمت Xml را باز کنید یا قسمت دیزاین سپس سورس کد های زیر را با سورس کد فعلی خود جا به جا کنید :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/header_cover_image"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/image" />

        <ImageButton
            android:id="@+id/user_profile_photo"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_below="@+id/header_cover_image"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="-60dp"
            android:background="@drawable/profile_circular_border_imageview"
            android:elevation="5dp"
            android:padding="20dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/profile" />

        <RelativeLayout
            android:id="@+id/profile_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/header_cover_image"
            android:background="#ebca0707"
            android:elevation="4dp"
            android:paddingBottom="24dp">

            <TextView
                android:id="@+id/user_profile_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="80dp"
                android:textColor="#fff"
                android:textSize="24sp"
                android:layout_marginLeft="10dp"
                android:text="0930000011111"
                android:textStyle="bold" />
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="76dp"
                android:textColor="#fff"
                android:textSize="24sp"
                android:src="@drawable/ic_local_phone_white_24dp"
                android:layout_toEndOf="@+id/user_profile_name"
                android:textStyle="bold" />
        </RelativeLayout>


        <LinearLayout
            android:id="@+id/liner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/profile_layout"
            android:layout_marginTop="5dp"
            android:orientation="vertical">

            <EditText
                android:id="@+id/Et_name"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="10dp"
                android:hint="نام شما ..."
                />

            <EditText
                android:id="@+id/Ev_family"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_marginBottom="3dp"
                android:layout_marginTop="3dp"
                android:background="#fff"
                android:clickable="true"
                android:elevation="4dp"
                android:padding="10dp"
                android:hint="نام خانوادگی..." />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/profile_layout"
                android:layout_marginTop="5dp"
                android:orientation="horizontal"
                android:background="#fff"
                android:padding="10dp"
                android:clickable="true"
                android:elevation="4dp"
                android:layout_marginBottom="5dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="انتخاب جنسیت : "
                    android:textColor="#000"
                    android:padding="10dp"
                    android:textSize="16sp"
                    android:layout_gravity="center"/>
                <Spinner
                    android:id="@+id/Spinnerjesn"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="10dp"
                    android:gravity="center"
                    android:textAlignment="center"
                    android:layout_gravity="center" >
                </Spinner>
            </LinearLayout>
        </LinearLayout>

        <Button
            android:id="@+id/Btn_save"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_margin="5dp"
            android:layout_marginBottom="3dp"
            android:layout_marginTop="10dp"
            android:background="#ebca0707"
            android:clickable="true"
            android:elevation="4dp"
            android:textSize="18sp"
            android:textColor="#fff"
            android:text="ذخیره و ویرایش اطلاعات"
            android:textAlignment="center"
            android:padding="10dp"
            android:layout_below="@+id/liner"/>
    </RelativeLayout>
</ScrollView>

در بخش Drawable خود فایل با نام profile_circular_border_imageview.xml ایجاد کنید .سپس سورس کد زیر را بنویسید.دقت کنید این یک Shape دایره ای است.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="100dp" />
    <solid android:color="#41ba7a" />
    <stroke
        android:width="3dip"
        android:color="#f9f9f9" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

حالا نوبت به Spinner میرسد که کاربر می تواند جنسیت خود را انتخاب کند.

حال لطفا در بخش java یعنی قسمت Chnage_UserInforMation سورس کد زیر را تایپ کنید:

public class Chnage_UserInforMation extends AppCompatActivity{
   Spinner spinner;
   ArrayList<String> strings=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chaneinformation);
        spinner=findViewById(R.id.Spinnerjesn);
        strings.add("آقا");
        strings.add("خانم");
        ArrayAdapter<String> spinnerArrayAdapter = new ArrayAdapter<>
                (this, android.R.layout.simple_spinner_item,
                        strings);
        spinnerArrayAdapter.setDropDownViewResource(R.layout.spinnerlayout);
        spinner.setAdapter(spinnerArrayAdapter);

    }

}

حالا نوبت به اجرا کردن میرسه که نتیجه نهایی رو ببنید .لطفا دقت کنید فونت های اختصاصی در این برنامه استفاده شده که شما هم می توانید فونت های دلخواه خوتان ایجاد کنید.

نکته اخر : ایکن ها را می توانید از سایت متریال ایکن دانلود کنید.نیازمند vpn

تصاویر متریال و پروفایل دایره ای :

 منبع آموزش : خانه اندروید