когда выбрано, добавьте форму границы для textView и editText, - PullRequest
Новая
       15

когда выбрано, добавьте форму границы для textView и editText,

0 голосов
/ 16 сентября 2018

Я хочу создать форму границы для TextView и EditText и показать ее при выборе вида.

Как на этом рисунке.

example

Ответы [ 4 ]

0 голосов
/ 23 октября 2018

добавьте это в свою папку цветов:

селектор: 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="your_border_color"/>
<item android:color="@android:color/transparent"/>
</selector>

добавьте это в свою папку для рисования:

фон: 

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="back_ground_color" />
<corners android:radius="5dp" />
<stroke
    android:width="3dp"
    android:color="@color/selector" />
</shape>

к вашему тексту редактирования: 

<EditText>
   android:background="@drawable/background"
</EditText>
0 голосов
/ 16 сентября 2018

Вы должны использовать селектор drawable для достижения вашего пользовательского интерфейса.

Сначала создайте background_edit_text_default.xml, который является фоном EditText, когда он не выбран пользователями. 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#333D46" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

Затем создайте background_edit_text_selected.xml, который является фоном EditText, когда он выбран пользователями. 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#EDB90E" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

Затем создайте background_edit_text.xml, который будет использоваться в качестве фона EditText. 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/background_edit_text_default" android:state_focused="false" />
    <item android:drawable="@drawable/background_edit_text_selected" android:state_focused="true" />

</selector>

Наконец, установите background_edit_text.xml в качестве фона вашего EditText в файле макета, например activity_main. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/conteiner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:orientation="vertical">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_edit_text" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_edit_text" />

</LinearLayout>

Вы закончили, и вам не нужно ничего добавлять в код.

0 голосов
/ 22 октября 2018

Попробуйте следующим образом

MainActivity 

public class MainActivity extends AppCompatActivity {

    EditText edtEmail, edtPassword;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        edtEmail = findViewById(R.id.edtEmail);
        edtPassword = findViewById(R.id.edtPassword);

        edtEmail.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus)
                    edtEmail.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.edt_focus_bg));
                else
                    edtEmail.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.edt_unfocus_bg));
            }
        });

        edtPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus)
                    edtPassword.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.edt_focus_bg));
                else
                    edtPassword.setBackground(ContextCompat.getDrawable(MainActivity.this, R.drawable.edt_unfocus_bg));
            }
        });


    }

}

layout.activity_main 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    tools:context=".FirstFragment">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="Email"
        android:textColor="#FFFFFF" />

    <EditText
        android:id="@+id/edtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/edt_focus_bg"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:text="Password"
        android:textColor="#FFFFFF" />


    <EditText
        android:id="@+id/edtPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/edt_unfocus_bg"
        android:imeOptions="actionNext"
        android:inputType="textPassword" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/edt_focus_bg"
        android:gravity="center"
        android:text="Login"
        android:textColor="#fae81e" />


</LinearLayout>

Drawable/ edt_focus_bg 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#fae81e" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

Drawable / edt_unfocus_bg 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#333D46" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

ВЫХОД

https://www.youtube.com/watch?v=OvCqTc_y124

РЕДАКТИРОВАТЬ

, если вы хотите добавить тот же эффект при входе в систему TextView, чем выполнить следующие шаги

  • Создатьtv_text_color.xml в res/color каталоге, например

enter image description here

  • Создание каталога tv_bg.xml в res/drawable, например

Пример кода для tv_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Focused and not pressed -->
    <item android:state_focused="true"
        android:state_pressed="false"
        android:color="#000000" />
    <!-- Focused and pressed -->
    <item android:state_focused="true"
        android:state_pressed="true"
        android:color="#fae81e" />

    <!-- Unfocused and pressed -->
    <item android:state_focused="false"
        android:state_pressed="true"
        android:color="#fae81e" />

    <!-- Default color -->
    <item android:color="#000000" />
</selector>

Пример кода для tv_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/edt_focus_bg" 
        android:state_selected="true"/>
    <item android:drawable="@drawable/edt_focus_bg"
        android:state_pressed="true"/>
    <item android:drawable="@drawable/edt_unfocus_bg"/>

</selector>

Теперь используйте это в TextView 

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginTop="30dp"
    android:layout_marginEnd="10dp"
    android:textColor="@color/tv_text_color"
    android:background="@drawable/tv_bg"
    android:clickable="true"
    android:gravity="center"
    android:text="Login"
    />

ВЫХОД с textview

https://www.youtube.com/watch?v=Iu898vafXEk

РЕДАКТИРОВАТЬ 2

Вы также можете сделать тот же эффект для EditText с помощью селектора

Создать файл edt_selector.xml в каталоге res/drawable, как показано ниже 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/edt_focus_bg"
        android:state_focused="true"/>
    <item android:drawable="@drawable/edt_unfocus_bg"/>

</selector>

Теперь используйте в вашем editext вот так 

<EditText
    android:id="@+id/edtPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="10dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/edt_selector"
    android:imeOptions="actionNext"
    android:inputType="textPassword" />
0 голосов
/ 16 сентября 2018

В Drawable создайте xml файл и используйте этот код: 

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
      android:width="3dp"
      android:color="@color/yellow" />
</shape>

Установите его на фон EditText после того, как создайте еще один с android:width="0dp", и когда пользователь нажмет, вы можетепросто измените их.

Вот код. 

 editText1.setOnClickListener{
      editText1.setBackground(shape1);
      editText2.setBackground(shape0);
    }
    editText2.setOnClickListener{
      editText1.setBackground(shape0);
      editText2.setBackground(shape1);
   }

Вы не можете скопировать и выполнить этот код, но это руководство для вас.!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...