This question already has answers here:
Searchview with back button
(2 answers)
Android SearchView customisation
(4 answers)
Custom search implementation with SearchView
(2 answers)
Android ActionBar Customize Search View
(4 answers)
Closed 4 years ago.
I want to make custom search bar layout in android. I have to attach screenshot of my design what I want to require. Check action bar design. On click action-bar search icon open custom edit-text in toolbar.
I want to make action bar layout like this.
Try this way make sure you have search icon..
<LinearLayout
android:id="#+id/llSearchContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_5sdp"
android:background="#drawable/drawer_gredient"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="#dimen/_10sdp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.80"
android:background="#drawable/edittext_search_box"
android:gravity="center_vertical"
android:paddingBottom="#dimen/_2sdp"
android:paddingLeft="#dimen/_5sdp"
android:paddingRight="#dimen/_5sdp"
android:paddingTop="#dimen/_2sdp">
<ImageView
android:layout_width="#dimen/_24sdp"
android:layout_height="#dimen/_24sdp"
android:padding="#dimen/_5sdp"
android:scaleType="centerCrop"
android:src="#drawable/ic_seach" />
<EditText
android:id="#+id/lsfEtSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_weight="0.80"
android:background="#android:color/transparent"
android:drawablePadding="#dimen/_10sdp"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLength="50"
android:maxLines="1"
android:textSize="#dimen/_14sdp" />
</LinearLayout>
</LinearLayout>
Related
This question already has answers here:
Android Material Button with Icon on top of Text
(2 answers)
Closed 2 years ago.
Using Material design, I need to create a button with text and Image aligned vertically.
<com.google.android.material.button.MaterialButton
android:id="#+id/btn"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="160dp"
android:layout_height="160dp"
android:clickable="true"
android:elevation="4dp"
android:fontFamily="#font/roboto_bold"
android:onClick="myfunction()"
android:text="BUTTON"
android:textColor="#android:color/black"
android:textSize="20dp" />
Use android:drawableBottom="..." or android:drawableTop="..." to align text and an image vertically.
dependencies {
implementation "com.google.android.material:material:1.2.0-alpha01"
}
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableTop="#drawable/ic_android_black_24dp"
android:drawableTint="#color/white"
app:backgroundTint="#429835"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:text="Hello world" />
This question already has answers here:
Is there an official API for centered title on Toolbar like on popular Android apps, in the new material design?
(5 answers)
Closed 3 years ago.
In my case I want to set toolbar title and subtitle in centre. I have already one solution to set custom layout in toolbar. Is that any other solution to set toolbar title and subtitle without using custom layout?
Solution 1:
<android.support.v7.widget.Toolbar
android:id="#+id/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/holo_red_dark">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="abc"
android:textColor="#android:color/white"
android:textSize="20sp"
android:layout_marginRight="?android:attr/actionBarSize"
android:gravity="center"/>
</android.support.v7.widget.Toolbar>
I don't want to use custom layout to set toolbar title and subtitle.I appreciate your effort, in advance.
<android.support.v7.widget.Toolbar
android:id="#+id/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/holo_red_dark">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="abc"
android:textColor="#android:color/white"
android:textSize="20sp"
android:layout_marginRight="?android:attr/actionBarSize"
android:gravity="center"/>
</android.support.v7.widget.Toolbar>
This question already has answers here:
Inserting imageview inside edittext android
(4 answers)
How can I add an image on EditText
(10 answers)
Closed 4 years ago.
I am using the EditText with drawableLeft property and set ImageView in Left side for displaying mobile icon. My Question is how to put Imageview in EditText?
Please help me.
Actually i want like this.
I have tried using linear layout with horizontal. below is xml code.
<LinearLayout
android:weightSum="2"
android:layout_below="#id/welcome"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_weight="1"
android:layout_gravity="center"
android:id="#+id/image_mobile"
android:layout_width="#dimen/_50sdp"
android:layout_height="#dimen/_50sdp"
android:src="#mipmap/ic_launcher" />
<EditText
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_30sdp"
android:layout_toRightOf="#+id/image_mobile"
android:hint="Mobile number"
android:inputType="text" />
</LinearLayout>
But am not able to adjust the image view and edittext.
You should use android:drawableStart
The drawable to be drawn to the start of the text.
DEMO
<EditText
......
android:drawableStart="#drawable/your_icon"
android:drawablePadding="5dp"
/>
This question already has an answer here:
MultiLine EditText in Android with the cursor starting on top [duplicate]
(1 answer)
Closed 6 years ago.
This might look simple and might actually be simple but I need the following screen
I completed it using the following xml
<EditText
android:id="#+id/subject_edt"
style="#android:style/TextAppearance.Medium"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="15dp"
android:inputType="textImeMultiLine"
android:layout_marginRight="15dp"
android:background="#drawable/edt_bg"
android:maxLines="5" />
everything is fine but the problem is, it is appearing as below on focus
the cursor should appear on the top left corner, can any one suggest how ti achieve this ??
Thanks in advance :)
Try to set this android:gravity="top" OR for left you can give android:gravity="top|left" property in your EditText.
Refer this.
<EditText
android:id="#+id/subject_edt"
style="#android:style/TextAppearance.Medium"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="15dp"
android:inputType="textImeMultiLine"
android:gravity="top"
android:layout_marginRight="15dp"
android:background="#drawable/edt_bg"
android:maxLines="5" />
Use android:gravity="top"
<EditText
style="#android:style/TextAppearance.Medium"
android:background="#drawable/edt_bg"
android:gravity="top"
android:id="#+id/subject_edt"
android:inputType="textImeMultiLine"
android:layout_height="100dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_width="match_parent"
android:maxLines="5" />
In an android app, I want to implement a searchView like this
There are some requirements:
the SearchIcon and the text("搜索")are in the middle of the searchView
a voiceIcon is inside the right side of the searchview.
3.the searchView is expanded by default.
I try to use the android searchView component, but i can't move the searchIcon to the middle of the searchView and I dont konw how to add an voiceIcon.
How can I do this,Thanks.
If you chose to follow the use of a SearchView, you will come accross the creation of a searchable item in XML.
To get the microphone logo, you can add this line to your searchable
android:voiceSearchMode="showVoiceSearchButton|launchRecognizer"
This will enable the voice module, and also add the microphone icon to your searchView if you follow the Android tutorial you can find here
http://developer.android.com/guide/topics/search/search-dialog.html
I know that I shuold use custom layout to do this, so I write like this:
<LinearLayout
android:orientation="horizontal"
android:background="#color/orange_yellow"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp">
<RelativeLayout
android:id="#+id/homeSearchView"
android:background="#color/white"
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_weight="5"
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/voiceSearchIconImageView"
android:layout_toStartOf="#+id/voiceSearchIconImageView">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_search"
android:id="#+id/searchIconImageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/search"
android:id="#+id/textView" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_action_voice"
android:id="#+id/voiceSearchIconImageView"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:background="#drawable/ic_action_scan"
android:id="#+id/scanImageButton" />
</LinearLayout>
and it seems work
the next step is to implement the search logic like SearchView component.
you can also replace the mic icon with your custom icon
by adding this to ur search_view in xml
app:voiceIcon="#drawable/ic_mic