How to create an EditText inside toolbar

In this post, we will create an EditText inside Toolbar.

We will create EditText inside toolbar because we use it as an URL search bar later.

To create an EditText inside Toolbar, we use support design library.

Add this dependency in your app level gradle file,

 dependencies {  
   implementation fileTree(dir: 'libs', include: ['*.jar'])  
   implementation 'com.android.support:appcompat-v7:28.0.0'  
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'  
   implementation 'com.android.support:design:28.0.0'  
   testImplementation 'junit:junit:4.12'  
   androidTestImplementation 'com.android.support.test:runner:1.0.2'  
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'  
 }  

Then create AppBarLayout in your XML file

 <android.support.design.widget.AppBarLayout  
     android:id="@+id/appbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  

Then create EditText inside toolbar and setup that EditText

 <android.support.v7.widget.Toolbar  
   android:id="@+id/toolbar"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   app:title=""  
   app:layout_scrollFlags="scroll|enterAlways|snap"  
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
   
   app:layout_constraintTop_toTopOf="@id/progressbar">  
   
   <EditText  
     android:id="@+id/toolbartext"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:maxLines="1"  
     android:inputType="text"  
     android:imeOptions="actionSearch"  
     android:layout_marginLeft="2dp"  
     android:background="@drawable/rounded_corner"/>  
   
 </android.support.v7.widget.Toolbar>  

Use toolbar, EditText and progress bar inside AppBarLayout

 <android.support.design.widget.AppBarLayout  
     android:id="@+id/appbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
   
 <android.support.v7.widget.Toolbar  
   android:id="@+id/toolbar"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   app:title=""  
   app:layout_scrollFlags="scroll|enterAlways|snap"  
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
   
   app:layout_constraintTop_toTopOf="@id/progressbar">  
   
   <EditText  
     android:id="@+id/toolbartext"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:maxLines="1"  
     android:inputType="text"  
     android:imeOptions="actionSearch"  
     android:layout_marginLeft="2dp"  />  
   
 </android.support.v7.widget.Toolbar>  
   
   <ProgressBar  
     android:id="@+id/progressbar"  
     android:layout_width="match_parent"  
     android:layout_height="3dp"  
     android:indeterminate="true"  
     android:scaleY="5.0"  
     style="@style/Widget.AppCompat.ProgressBar.Horizontal"  
     app:layout_constraintBottom_toBottomOf="@id/toolbar"  
     app:layout_constraintBottom_toTopOf="@id/webview"/>  
   
   </android.support.design.widget.AppBarLayout>  

If your WebView hide behind toolbar, then setup margin-top in your WebView as 51dp.
Toolbar height is 48dp and your progressbar height is 3dp,
So, 48dp + 3dp = 51dp

Follow us for more posts like this, 
Subscribe Harpreet studio on Youtube  
Like Harpreet Studio on Facebook  
Follow me on Instagram