ایجاد یک EditText همرا با Lable در اندروید

سلام

امروز سورس کد اپ سیگنالُ دانلود کردم داشتم سَرک میکشیدم تو کدها ک چشمم خورد به یه چیزی شبیه این عکس پایین (البته نمونه های زیادی هست)

و تو کدها رو گشتم و پیدا کردم و گفتم شاید بدرد کسی بخوره چون خیلی ساده درست کرده بود

شروع کنیم

1. ابتدا تو مسیر layout یه فایل میسازم به اسم labeled_edit_text (دلخواه) و کد زیرُ تایپ کنید

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>

<merge xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot
    xmlns:tools=&quothttp://schemas.android.com/tools&quot
    android:layout_width=&quotmatch_parent&quot
    android:layout_height=&quotwrap_content&quot>

    <FrameLayout
        android:id=&quot@+id/border&quot
        android:layout_width=&quotmatch_parent&quot
        android:layout_height=&quotmatch_parent&quot
        android:layout_marginTop=&quot9dp&quot
        android:background=&quot@drawable/labeled_edit_text_background_inactive&quot />

    <LinearLayout
        android:id=&quot@+id/text_container&quot
        android:layout_width=&quotmatch_parent&quot
        android:layout_height=&quotwrap_content&quot
        android:orientation=&quotvertical&quot>

        <TextView
            android:id=&quot@+id/label&quot
            style=&quot@style/Signal.Text.Caption&quot
            android:layout_width=&quotwrap_content&quot
            android:layout_height=&quotwrap_content&quot
            android:layout_gravity=&quotend&quot
            android:layout_marginEnd=&quot12dp&quot
            android:background=&quot@android:color/white&quot
            android:paddingStart=&quot4dp&quot
            android:paddingEnd=&quot4dp&quot
            android:textColor=&quot@color/core_ultramarine&quot
            tools:text=&quotProfile Name&quot />

    </LinearLayout>

</merge>`

2. یک کلاس درست میکنیم به اسم LabeledEditText (بازم دلخواه) و کد زیرُ تایپ کنید:

public class LabeledEditText extends FrameLayout implements View.ChangeListener {
    private TextView mLabel;
    private EditText mInput;
    private View mBorder;
    private ViewGroup mTextContainer;

    public LabeledEditText(@NonNull Context context) {
        super(context);
        init(null);
    }

    public LabeledEditText(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    private void init(@Nullable AttributeSet attrs) {
        inflate(getContext(), R.layout.labeled_edit_text, this);

        String labelText = &quot&quot
        int backgroundColor = Color.BLACK;
        int textLayout = R.layout.labeled_edit_text;

        if (attrs != null) {
            TypedArray typedArray = getContext().getTheme()
                    .obtainStyledAttributes(attrs, R.styleable.LabeledEditText, 0, 0);
            labelText = typedArray.getString(R.styleable.LabeledEditText_LE_label);
            backgroundColor = typedArray.getColor(R.styleable.LabeledEditText_LE_background, Color.BLACK);
            textLayout = typedArray.getResourceId(R.styleable.LabeledEditText_LE_textLayout, R.layout.labeled_edit_text);

            typedArray.recycle();
        }

        mLabel = findViewById(R.id.label);
        mBorder = findViewById(R.id.border);
        mTextContainer = findViewById(R.id.text_container);

        inflate(getContext(), textLayout, mTextContainer);
        mInput = findViewById(R.id.input);

        mLabel.setText(labelText);
        mLabel.setBackgroundColor(backgroundColor);
        if (TextUtils.isEmpty(labelText)) {
            mLabel.setVisibility(INVISIBLE);
        }

        mInput.setChangeListener(this);
    }

    public EditText getInput() {
        return mInput;
    }

    public void setText(String text) {
        mInput.setText(text);
    }

    public Editable getText() {
        return mInput.getText();
    }

    @Override
    public void Change(View view, boolean b) {
        mBorder.setBackgroundResource(b ? R.drawable.labeled_edit_text_background_active :
                R.drawable.labeled_edit_text_background_inactive);
    }

    @Override
    public void setEnabled(boolean enabled) {
        super.setEnabled(enabled);
        mInput.setEnabled(enabled);
    }
}`

3. یه فایل به اسم attrs میسازیم در مسیر values و کدهای زیرُ تایپ میکنیم:

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>
<resources>
    <declare-styleable name=&quotLabeledEditText&quot>
        <attr name=&quotLE_label&quot format=&quotstring&quot />
        <attr name=&quotLE_background&quot format=&quotcolor&quot />
        <attr name=&quotLE_textLayout&quot format=&quotreference&quot />
    </declare-styleable>
</resources>`

4. در فایل colors هم رنگهای زیرُ تایپ کنید:

<color name=&quotcore_grey_25&quot>#b9b9b9</color>
<color name=&quotcore_ultramarine&quot>#2c6bed</color>
<color name=&quottransparent&quot>#00FFFFFF</color>`

5. در فایل styles:

<style name=&quotSignal.Text.Caption&quot parent=&quotBase.TextAppearance.AppCompat.Caption&quot>
    <item name=&quotandroid:textSize&quot>12sp</item>
    <item name=&quotandroid:lineSpacingExtra&quot>2sp</item>
    <item name=&quotandroid:fontFamily&quot>sans-serif</item>
</style>`

6.در مسیر layout یه فایل دیگه بسازید به اسم name_text و کدهای زیرُ تایپ کنید:

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>
<EditText
    xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot
    xmlns:tools=&quothttp://schemas.android.com/tools&quot
    android:id=&quot@+id/input&quot
    android:layout_width=&quotmatch_parent&quot
    android:layout_height=&quotwrap_content&quot
    android:paddingTop=&quot7dp&quot
    android:paddingStart=&quot16dp&quot
    android:paddingEnd=&quot16dp&quot
    android:paddingBottom=&quot16dp&quot
    android:background=&quot@color/transparent&quot
    android:singleLine=&quottrue&quot
    android:saveEnabled=&quotfalse&quot
    android:hint=&quotنام&quot
    tools:text=&quotامیر بختیاری&quot />`

در نهایت در مسیر drawable فایل هایی با نام labeled_edit_text_background_inactive و labeled_edit_text_background_active بسازید و کدهای زیرُ باز هم تایپ کنید

****************************Active****************************
<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>

<shape
    xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot
    android:shape=&quotrectangle&quot>

    <corners android:radius=&quot4dp&quot />

    <stroke
        android:color=&quot@color/core_ultramarine&quot
        android:width=&quot2dp&quot />

</shape>

****************************inactive****************************

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>

<shape
    xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot
    android:shape=&quotrectangle&quot>

    <corners android:radius=&quot4dp&quot />

    <stroke
        android:color=&quot@color/core_grey_25&quot
        android:width=&quot1dp&quot />

</shape>`

برای استفاده هم:

<ir.amirbakhtiari.customview.LabeledEditText
    android:id=&quot@+id/name&quot
    android:layout_width=&quotmatch_parent&quot
    android:layout_height=&quotwrap_content&quot
    android:layout_marginStart=&quot10dp&quot
    android:layout_marginTop=&quot10dp&quot
    android:layout_marginEnd=&quot10dp&quot
    app:LE_background=&quot@android:color/white&quot
    app:LE_label=&quotنام&quot
    app:LE_textLayout=&quot@layout/name_text&quot />`