MaterialTextField icon indicating copy to clipboard operation
MaterialTextField copied to clipboard

Set Background Color removes Card Corner

Open harmeetsingh-work opened this issue 7 years ago • 7 comments

By default MTF color is always Pink, it is not taking color accent value, and if changing the color using mtf attribute, then the card corners are not there. :(

<com.github.florent37.materialtextfield.MaterialTextField
        android:id="@+id/mtf_edit_txt_name"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        app:mtf_image="@drawable/ic_tag"
        app:mtf_backgroundColor="@color/colorAccent"
        app:mtf_labelColor="@color/edit_text">

        <EditText
            android:id="@+id/edit_txt_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Name"
            android:textColor="#c3ffffff" />
    </com.github.florent37.materialtextfield.MaterialTextField>

harmeetsingh-work avatar Mar 23 '18 17:03 harmeetsingh-work

you can edit the color of the card by heading to a drawable file called card.xml To go to this file, give any view a background and set the value to this card resource android:background="@drawable/card" after that, you can hold ctrl then left click on card to go to the resource file You can edit it as you want this is the code in the file `

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>
`

MohamedMedhat1998 avatar Sep 25 '18 12:09 MohamedMedhat1998

you can edit the color of the card by heading to a drawable file called card.xml To go to this file, give any view a background and set the value to this card resource android:background="@drawable/card" after that, you can hold ctrl then left click on card to go to the resource file You can edit it as you want this is the code in the file `

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

`

Thank you for your reply. I tried to change " " to white color but it keeps going back to the pink color. Any idea why?

Halimeh-manaf avatar Apr 21 '19 15:04 Halimeh-manaf

you can edit the color of the card by heading to a drawable file called card.xml To go to this file, give any view a background and set the value to this card resource android:background="@drawable/card" after that, you can hold ctrl then left click on card to go to the resource file You can edit it as you want this is the code in the file `

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

`

Thank you for your reply. I tried to change " " to white color but it keeps going back to the pink color. Any idea why?

Can you add your code snippet please so that I can see what you mean exactly?

MohamedMedhat1998 avatar Apr 21 '19 15:04 MohamedMedhat1998

Thanks for your quick response. Here is the " card.xml" code .. I keep changing to: solid android:color="#FFFFFF"/> but it keeps getting back to this pink color " f6eef1 "

`

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

`

Also, here is the XML activity code: ` <LinearLayout 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:gravity="center" android:orientation="vertical"

tools:context="com.example.step.MainActivity">
<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="go_to_steps"
    android:text="Login"
    />

</LinearLayout>`

Halimeh-manaf avatar Apr 21 '19 15:04 Halimeh-manaf

Thanks for your quick response. Here is the " card.xml" code .. I keep changing to: solid android:color="#FFFFFF"/> but it keeps getting back to this pink color " f6eef1 "

`

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

`

Also, here is the XML activity code: ` <LinearLayout 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:gravity="center" android:orientation="vertical"

tools:context="com.example.step.MainActivity">
<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="go_to_steps"
    android:text="Login"
    />

`

After editing the card.xml you should use it as a background for the EditText inside the MaterialTextField like this

<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        **android:background="@drawable/card"**
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>

MohamedMedhat1998 avatar Apr 21 '19 16:04 MohamedMedhat1998

Thanks for your quick response. Here is the " card.xml" code .. I keep changing to: solid android:color="#FFFFFF"/> but it keeps getting back to this pink color " f6eef1 " `

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

Also, here is the XML activity code: <LinearLayout 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:gravity="center" android:orientation="vertical"

tools:context="com.example.step.MainActivity">
<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="go_to_steps"
    android:text="Login"
    />

`

After editing the card.xml you should use it as a background for the EditText inside the MaterialTextField like this

<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        **android:background="@drawable/card"**
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>

I tried include it as you said and still. The moment I run the application, it goes back to pink.

Halimeh-manaf avatar Apr 21 '19 16:04 Halimeh-manaf

Thanks for your quick response. Here is the " card.xml" code .. I keep changing to: solid android:color="#FFFFFF"/> but it keeps getting back to this pink color " f6eef1 " `

<solid android:color="#f6eef1"/>

<stroke
    android:width="1dp"
    android:color="#EEEEEE"/>

<padding
    android:bottom="@dimen/mtf_corner_radius"
    android:left="@dimen/mtf_corner_radius"
    android:right="@dimen/mtf_corner_radius"
    android:top="@dimen/mtf_corner_radius"/>

<corners android:radius="@dimen/mtf_corner_radius"/>

Also, here is the XML activity code: <LinearLayout 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:gravity="center" android:orientation="vertical"

tools:context="com.example.step.MainActivity">
<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="go_to_steps"
    android:text="Login"
    />

`

After editing the card.xml you should use it as a background for the EditText inside the MaterialTextField like this

<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:mtf_labelColor="@android:color/white"
    app:mtf_image="@drawable/ic_mail_black_24dp"
    app:mtf_backgroundColor="@android:color/background_light"
    >

    <EditText
        **android:background="@drawable/card"**
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textColorHint="#666"
        android:textSize="15sp"
        android:id="@+id/password"/>

</com.github.florent37.materialtextfield.MaterialTextField>

I think I found out what is the problem. The card.xml is generated in the cache folder ( .gradle\caches\transforms-2\files-2.1\795effe27e728f2f816467819e16aa8f\res\drawable ) .. which is a " READ ONLY " file. Thus, you can't change it to any other color. I tried to change the permission from Windows manually, doesn't work. I will test it on Mac to see if there is a difference.

Halimeh-manaf avatar Apr 22 '19 12:04 Halimeh-manaf