TextinputLayout के लेबल और एडिट टेक्स्ट को एंड्रॉइड में कैसे बदलें


120

मैं एंड्रॉइड डिज़ाइन लाइब्रेरी का उपयोग कर रहा हूं TextinputLayout। लेकिन संकेत रंग, लेबल रंग और EditTextअंदर के रंग को अनुकूलित नहीं कर सका TextinputLayout। कृपया मदद कीजिए।


1
यह डिजाइन दिशा निर्देशों के अनुसार सही रंग होना चाहिए?
रघुनंदन

हां, लेकिन मेरे पास थीम के उच्चारण रंग से अलग रंगों के साथ कई editTexts होंगे।
नितेश वर्मा


लेबल रंग बदलने के लिए कृपया यहाँ मेरे उत्तर की जाँच करें
जैन 16

मैं रेखांकन मज़बूती से बदल सकता है दोनों केंद्रित है और कस्टम पृष्ठभूमि drawable में निर्दिष्ट का उपयोग करके विकेन्द्रित राज्य में stackoverflow.com/a/36543554/2413303
EpicPandaForce

जवाबों:


257

नीचे पंक्ति रंग बदलें:

<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">@color/accent</item>
<item name="colorControlHighlight">@color/accent</item>

अधिक जानकारी के लिए इस धागे की जाँच करें

जब यह तैर रहा हो तो संकेत रंग बदलें

<style name="MyHintStyle" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/main_color</item>
</style>

और इसे इस तरह उपयोग करें:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle">

जब यह एक अस्थायी लेबल न हो तो संकेत रंग बदलें:

<android.support.design.widget.TextInputLayout
    ...
    app:hintTextAppearance="@style/MyHintStyle"
    android:textColorHint="#c1c2c4">

@AlbAtNf को धन्यवाद


मैं संकेत रंग बदलने में सक्षम नहीं हूं (जब इसका लेबल नहीं है)। क्या आप मदद करते हैं?
नितेश वर्मा

मैं वास्तव में अपने ऐप के आकार के बारे में चिंतित हूं, इस पर विचार करते हुए, मेरे ऐप पर कितना अतिरिक्त आकार लगाने की उम्मीद है?
नितेश वर्मा

क्षमा करें, आपका प्रश्न नहीं मिला, कृपया अधिक स्पष्ट करें, किस संदर्भ में आकार, ऐप के वजन का ग्राफिक्स आकार (जैसे एपीके 20mb या कुछ से ऊपर है), और पहले आप मेरा उत्तर स्वीकार करते हैं और फिर से आप अपनी स्वीकृति निकालते हैं, क्या मैं पूछ सकता हूं , ऐसा क्यों?
पंकज अरोड़ा

becoz, मैं आपके जवाब के बाद संकेत रंग नहीं बदल सकता। इसका कुछ हिस्सा मेरे लिए काम करता है, लेकिन मैंने जो भी पूछा उसका पूरा हल नहीं है। ऐप के आकार के बारे में, सामग्री एडिटटेक्स्ट जैसे ऐप के आकार में बाहरी लाइब्रेरी को जोड़ना नहीं है?
नितेश वर्मा

4
@NiteshVerma ने संकेत रंग की स्थापना के लिए समाधान पाया, जब यह एक तैरने योग्य नहीं है: बस XML में सेट android:textColorHintकिया TextInputLayoutगया।
अल्बर्ट एन

30

फेडर कज़कोव और अन्य उत्तरों के आधार पर , मैंने एक डिफ़ॉल्ट कॉन्फिगर बनाया।

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Widget.Design.TextInputLayout" parent="AppTheme">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
        <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
        <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
        <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
        <!-- Floating label appearance here -->
        <item name="android:textColor">@color/colorAccent</item>
        <item name="android:textSize">20sp</item>
    </style>

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
        <!-- Error message appearance here -->
        <item name="android:textColor">#ff0000</item>
        <item name="android:textSize">20sp</item>
    </style>

</resources>

activity_layout.xml

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Text hint here"
        android:text="5,2" />

</android.support.design.widget.TextInputLayout>

ध्यान केंद्रित:

ध्यान केंद्रित

बिना फोकस:

बिना फोकस के

त्रुटि संदेश:

यहां छवि विवरण दर्ज करें


9
"फ़ोकस फ़ोकस" उदाहरण के लिए गुलाबी रंग पाने के लिए मुझे क्या करना चाहिए?
जॉन स्मिथ

इस शैली का उपयोग कैसे करें?
हनजला

23

साथ सामग्री घटक पुस्तकालय आप उपयोग कर सकते हैं com.google.android.material.textfield.TextInputLayout

आप रंग बदलने के लिए एक कस्टम शैली लागू कर सकते हैं।

संकेत रंग बदलने के लिए आपको इन विशेषताओं का उपयोग करना होगा:
hintTextColorऔर android:textColorHint

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>

    <!-- The color of the label in all other text field states (such as resting and disabled) -->
    <item name="android:textColorHint">@color/selector_hint_text_color</item>
</style>

आप के लिए एक चयनकर्ता का उपयोग करना चाहिए android:textColorHint। कुछ इस तरह:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

नीचे की रेखा के रंग को बदलने के लिए आपको विशेषता का उपयोग करना होगा boxStrokeColor:।

<style name="Custom_textinputlayout_filledbox" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
    ....
    <item name="boxStrokeColor">@color/selector_stroke_color</item>
</style>

इस मामले में भी आपको एक चयनकर्ता का उपयोग करना चाहिए। कुछ इस तरह:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

यहां छवि विवरण दर्ज करें यहां छवि विवरण दर्ज करें

आप इन विशेषताओं को अपने लेआउट में भी लागू कर सकते हैं:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/selector_stroke_color"
    app:hintTextColor="?attr/colorPrimary"
    android:textColorHint="@color/selector_hint_text_color"
    ...>

1
TextinputLayout के अंदर EditText के अंडरलाइन रंग को कैसे बदलें? मेरा मतलब है अनफोकस्ड स्टेट। यह धूसर रंग की है
इवगेरी वोरोबी

@EvgeniiVorobei यह उत्तर में वर्णित है। यह द्वारा परिभाषित किया गया है boxStrokeColorselector_stroke_colorविशेष रूप से अंतिम पंक्ति में उदाहरण में:<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
गेब्रियल मैरियोटी

बहुत बहुत धन्यवाद! मैं इसका पता नहीं लगा सका।
०i:

मेरी समस्या यह है कि मैं चाहता हूं कि हिंट का रंग ग्रे हो और एक बार एडिटेक्स भर जाने के बाद मैं चाहता हूं कि यह नारंगी हो या न हो अगर इसका ध्यान केंद्रित किया जाए या नहीं। जब मैं इसका ध्यान केंद्रित करने में सक्षम हूं। लेकिन जब यह नहीं है तो ऐसा करने में सक्षम नहीं है। तो आप इसके साथ मेरी मदद करें
@GabrieleMariotti

19

इस विशेषता को Edittext टैग में जोड़ें और आनंद लें:

 android:backgroundTint="@color/colorWhite"

5
प्रभाव: एपीआई स्तर 21 और उसके बाद के उपकरणों पर लाइन का रंग बदलता है
कोई कहीं

17

इस ब्लॉग पोस्ट के द्वारा EditTextऔर AutoCompleteTextViewलिपटे के विभिन्न स्टाइलिंग पहलुओं का वर्णन किया गया है TextInputLayout

For EditTextand AppCompat lib 22.1.0+ आप कुछ थीम से संबंधित सेटिंग्स के साथ थीम विशेषता सेट कर सकते हैं:

<style name="StyledTilEditTextTheme">
   <item name="android:imeOptions">actionNext</item>
   <item name="android:singleLine">true</item>
   <item name="colorControlNormal">@color/greyLight</item>
   <item name="colorControlActivated">@color/blue</item>
   <item name="android:textColorPrimary">@color/blue</item>
   <item name="android:textSize">@dimen/styledtil_edit_text_size</item>
</style>

<style name="StyledTilEditText">
    <item name="android:theme">@style/StyledTilEditTextTheme</item>
    <item name="android:paddingTop">4dp</item>
</style>

और उन्हें लागू करें EditText:

<EditText
    android:id="@+id/etEditText"
    style="@style/StyledTilEditText"

के लिए AutoCompleteTextViewचीजें अधिक में यह लपेटकर क्योंकि जटिल हो जाते हैं TextInputLayoutऔर इस विषय चल लेबल व्यवहार टूट जाता है को लागू करने। आपको इसे कोड में ठीक करना होगा:

private void setStyleForTextForAutoComplete(int color) {
    Drawable wrappedDrawable =     DrawableCompat.wrap(autoCompleteTextView.getBackground());
    DrawableCompat.setTint(wrappedDrawable, color);
    autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}

और इसमें Activity.onCreate:

setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
    if(hasFocus) {
        setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
    } else {
        if(autoCompleteTextView.getText().length() == 0) {  
              setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
        }
    }
});

8

आप बदलना चाहते हैं बार / रेखा का रंग और संकेत पाठ रंग का TextInputLayout(क्या उच्चारण रंग सामान्य रूप से है), तो सिर्फ इस शैली बनाने:

<style name="MyStyle">
    <item name="colorAccent">@color/your_color</item>
</style>

फिर इसे अपने विषय केTextInputLayout रूप में लागू करें :

<android.support.design.widget.TextInputLayout
    ...
    app:theme="@style/MyStyle" />

यह मूल रूप से एक विषय (शैली नहीं) को एक दृश्य (पूरी गतिविधि के विपरीत) निर्धारित करता है ।


आपका मिन एसडीके 21 होना चाहिए
अज़ीज़ोंन खोलमटोव

5
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
</style>

आप लेआउट के लिए इस शैली को ओवरराइड कर सकते हैं

और आप आंतरिक EditText- आइटम शैली को भी बदल सकते हैं।


इस शैली का उपयोग कैसे करें? क्या किसी भी जगह पर सभी ऐप की शैली को ओवरराइड करने का कोई तरीका है?
हंजला

5
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlNormal">@color/actionBar_background</item>
    <item name="colorControlActivated">@color/actionBar_background</item>
    <item name="colorControlHighlight">@color/actionBar_background</item>
    <item name="colorAccent">@color/actionBar_background</item>
    <item name="android:textColorHint">@color/actionBar_background</item>
</style>

इस शैली को TextInputLayout पर लागू करें


2
TextInputLayout को शैली लागू करने के लिए सिर्फ एक त्वरित नोट:android:theme="@style/EditScreenTextInputLayoutStyle"
jackycflau

5

A TextinputLayout, एक दृश्य नहीं है, बल्कि एक है Layout, जैसा कि दिमित्रीस त्सोगोरिस ने अपने ब्लॉग पोस्ट में यहां बताया है । इसलिए, आपको एक की आवश्यकता नहीं है Style, जो Viewsकेवल के लिए है, लेकिन एक का उपयोग करें Theme। ब्लॉग पोस्ट के बाद, मैं निम्नलिखित समाधान के साथ समाप्त हुआ:

अपने styles.xmlसाथ शुरू करो

<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <!-- reference our hint & error styles -->
        <item name="android:textColor">@color/your_colour_here</item>
        <item name="android:textColorHint">@color/your_colour_here</item>
        <item name="colorControlNormal">@color/your_colour_here</item>
        <item name="colorControlActivated">@color/your_colour_here</item>
        <item name="colorControlHighlight">@color/your_colour_here</item>
</style>

और अपने लेआउट में जोड़ें

<com.google.android.material.textfield.TextInputLayout
                android:theme="@style/TextInputLayoutAppearance"
...

1
विजेट का उपयोग करें। सामग्री.कॉमपर्स.टेक्स्टइंटरप्लॉयआउट। माता
सुदीप सौधुखान
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.