How can I make this type of custom EditText UI?









up vote
0
down vote

favorite












I am trying to put borders on edit text and put a label on it. I have tried this one. enter image description here





<stroke
android:width="2dp"
android:color="@color/colorPrimary"/>
<corners android:radius="15dp"/>




But I want the following one. Initially it will look like this. enter image description here



After clicking it will be like this.
enter image description here



Would you please help?










share|improve this question



























    up vote
    0
    down vote

    favorite












    I am trying to put borders on edit text and put a label on it. I have tried this one. enter image description here





    <stroke
    android:width="2dp"
    android:color="@color/colorPrimary"/>
    <corners android:radius="15dp"/>




    But I want the following one. Initially it will look like this. enter image description here



    After clicking it will be like this.
    enter image description here



    Would you please help?










    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I am trying to put borders on edit text and put a label on it. I have tried this one. enter image description here





      <stroke
      android:width="2dp"
      android:color="@color/colorPrimary"/>
      <corners android:radius="15dp"/>




      But I want the following one. Initially it will look like this. enter image description here



      After clicking it will be like this.
      enter image description here



      Would you please help?










      share|improve this question















      I am trying to put borders on edit text and put a label on it. I have tried this one. enter image description here





      <stroke
      android:width="2dp"
      android:color="@color/colorPrimary"/>
      <corners android:radius="15dp"/>




      But I want the following one. Initially it will look like this. enter image description here



      After clicking it will be like this.
      enter image description here



      Would you please help?







      android user-interface android-edittext






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 9 at 19:03









      Kling Klang

      32k156286




      32k156286










      asked Nov 9 at 17:47









      Saiful Islam

      1




      1






















          3 Answers
          3






          active

          oldest

          votes

















          up vote
          1
          down vote













          use the material design Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"



          this link may help you http://qaru.site/questions/1688917/custom-textinputlayout-android






          share|improve this answer



























            up vote
            0
            down vote













            As @ZahoorSaleem said, you can use the MaterialComponents for that.
            You will need to add the design support library to your build file.



            The layout would (simplified) look like this:



            <TextInputLayout 
            android:hint="Label"
            style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <TextInputEditText />
            </TextInputLayout>





            share|improve this answer





























              up vote
              -1
              down vote













              put the below code in drawable and use this attribute in edittext
              android:background="@drawable/nameofdrawablefile"
              <?xml version="1.0" encoding="utf-8"?>
              <shape xmlns:android="http://schemas.android.com/apk/res/android"
              android:shape="rectangle">

              <solid android:color="#CC0505"/>
              <stroke android:width="2dp" android:color="#CC0505" />
              <corners android:radius="5dp" />
              </shape>





              share|improve this answer




















                Your Answer






                StackExchange.ifUsing("editor", function ()
                StackExchange.using("externalEditor", function ()
                StackExchange.using("snippets", function ()
                StackExchange.snippets.init();
                );
                );
                , "code-snippets");

                StackExchange.ready(function()
                var channelOptions =
                tags: "".split(" "),
                id: "1"
                ;
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function()
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled)
                StackExchange.using("snippets", function()
                createEditor();
                );

                else
                createEditor();

                );

                function createEditor()
                StackExchange.prepareEditor(
                heartbeatType: 'answer',
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader:
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                ,
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                );



                );













                 

                draft saved


                draft discarded


















                StackExchange.ready(
                function ()
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53230893%2fhow-can-i-make-this-type-of-custom-edittext-ui%23new-answer', 'question_page');

                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes








                up vote
                1
                down vote













                use the material design Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"



                this link may help you http://qaru.site/questions/1688917/custom-textinputlayout-android






                share|improve this answer
























                  up vote
                  1
                  down vote













                  use the material design Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"



                  this link may help you http://qaru.site/questions/1688917/custom-textinputlayout-android






                  share|improve this answer






















                    up vote
                    1
                    down vote










                    up vote
                    1
                    down vote









                    use the material design Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"



                    this link may help you http://qaru.site/questions/1688917/custom-textinputlayout-android






                    share|improve this answer












                    use the material design Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"



                    this link may help you http://qaru.site/questions/1688917/custom-textinputlayout-android







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 9 at 17:56









                    Zahoor Saleem

                    1997




                    1997






















                        up vote
                        0
                        down vote













                        As @ZahoorSaleem said, you can use the MaterialComponents for that.
                        You will need to add the design support library to your build file.



                        The layout would (simplified) look like this:



                        <TextInputLayout 
                        android:hint="Label"
                        style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                        <TextInputEditText />
                        </TextInputLayout>





                        share|improve this answer


























                          up vote
                          0
                          down vote













                          As @ZahoorSaleem said, you can use the MaterialComponents for that.
                          You will need to add the design support library to your build file.



                          The layout would (simplified) look like this:



                          <TextInputLayout 
                          android:hint="Label"
                          style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                          <TextInputEditText />
                          </TextInputLayout>





                          share|improve this answer
























                            up vote
                            0
                            down vote










                            up vote
                            0
                            down vote









                            As @ZahoorSaleem said, you can use the MaterialComponents for that.
                            You will need to add the design support library to your build file.



                            The layout would (simplified) look like this:



                            <TextInputLayout 
                            android:hint="Label"
                            style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                            <TextInputEditText />
                            </TextInputLayout>





                            share|improve this answer














                            As @ZahoorSaleem said, you can use the MaterialComponents for that.
                            You will need to add the design support library to your build file.



                            The layout would (simplified) look like this:



                            <TextInputLayout 
                            android:hint="Label"
                            style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                            <TextInputEditText />
                            </TextInputLayout>






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Nov 9 at 19:01

























                            answered Nov 9 at 18:54









                            Ridcully

                            18.1k75171




                            18.1k75171




















                                up vote
                                -1
                                down vote













                                put the below code in drawable and use this attribute in edittext
                                android:background="@drawable/nameofdrawablefile"
                                <?xml version="1.0" encoding="utf-8"?>
                                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                                android:shape="rectangle">

                                <solid android:color="#CC0505"/>
                                <stroke android:width="2dp" android:color="#CC0505" />
                                <corners android:radius="5dp" />
                                </shape>





                                share|improve this answer
























                                  up vote
                                  -1
                                  down vote













                                  put the below code in drawable and use this attribute in edittext
                                  android:background="@drawable/nameofdrawablefile"
                                  <?xml version="1.0" encoding="utf-8"?>
                                  <shape xmlns:android="http://schemas.android.com/apk/res/android"
                                  android:shape="rectangle">

                                  <solid android:color="#CC0505"/>
                                  <stroke android:width="2dp" android:color="#CC0505" />
                                  <corners android:radius="5dp" />
                                  </shape>





                                  share|improve this answer






















                                    up vote
                                    -1
                                    down vote










                                    up vote
                                    -1
                                    down vote









                                    put the below code in drawable and use this attribute in edittext
                                    android:background="@drawable/nameofdrawablefile"
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <shape xmlns:android="http://schemas.android.com/apk/res/android"
                                    android:shape="rectangle">

                                    <solid android:color="#CC0505"/>
                                    <stroke android:width="2dp" android:color="#CC0505" />
                                    <corners android:radius="5dp" />
                                    </shape>





                                    share|improve this answer












                                    put the below code in drawable and use this attribute in edittext
                                    android:background="@drawable/nameofdrawablefile"
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <shape xmlns:android="http://schemas.android.com/apk/res/android"
                                    android:shape="rectangle">

                                    <solid android:color="#CC0505"/>
                                    <stroke android:width="2dp" android:color="#CC0505" />
                                    <corners android:radius="5dp" />
                                    </shape>






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Nov 9 at 18:35









                                    Vishal Sharma

                                    1




                                    1



























                                         

                                        draft saved


                                        draft discarded















































                                         


                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function ()
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53230893%2fhow-can-i-make-this-type-of-custom-edittext-ui%23new-answer', 'question_page');

                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                                        Syphilis

                                        Darth Vader #20