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
Related
I'm using this library which is pretty awesome for implementing floating action button with customized menu and many other stuffs.
But while using this library I'm facing trouble with changing the color of the FloatingActionButton inside a FloatingActionMenu. I tried putting fab:manu_colorNormal as a property of the FloatingActionButton, but it seems it has no effect and showing the default colour.
Here's the layout I'm using. Note that, I've used xmlns:fab="http://schemas.android.com/apk/res-auto". It was suggested somewhere to check if the xmlns:fab is pointed to apk/res-auto. I set that properly, but yet no luck.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background">
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
fab:menu_colorNormal="#color/fab_close_background"
fab:menu_colorPressed="#color/fab_close_background_pressed"
fab:menu_colorRipple="#color/fab_close_background_ripple">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/menu_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete_white_24dp"
fab:fab_size="mini"
fab:menu_colorNormal="#color/fab_delete_background"
fab:menu_colorPressed="#color/fab_delete_background_pressed"
fab:menu_colorRipple="#color/fab_delete_background_ripple" />
</com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>
Note: I could change the colour of the FloatingActionMenu button successfully. menu_colorNormal works perfectly for the close button in my layout.
Here's how it looks like in my application. Red is the default colour which I'm trying to change. The issue is reported here in Github.
Replace fab:menu_colorNormal to fab:fab_colorNormal in FloatingActionButton
fab:menu_colorNormal is used to set the color of menu icon and
fab:fab_colorNormal is used to set the color of floating action
button.
See the doc here.
Use following code:
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="150dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
fab:menu_icon="#drawable/ic_star"
fab:menu_animationDelayPerItem="0"
fab:menu_colorNormal="#43A047"
fab:menu_colorPressed="#2E7D32"
fab:menu_colorRipple="#1B5E20"
fab:menu_labels_maxLines="2"
fab:menu_labels_ellipsize="end">
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
fab:fab_label="Menu item 1"
fab:fab_colorNormal="#43A047"
fab:fab_colorPressed="#2E7D32"
fab:fab_colorRipple="#1B5E20" />
</com.github.clans.fab.FloatingActionMenu>
I'm trying to add a footer containing an imagebutton, an textview and another imagebutton to my activity (I want to make an app like whatsapp and it should nearly look the same). I have tried many ways, but all didnt work.
I tried to make a footer like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/chatBottom"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:background="#D8D8D8"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/emojiButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:src="#drawable/emoji_button"
android:background="#D8D8D8"
android:padding="10dp"
android:contentDescription="#string/empty"/>
<EditText
android:id="#+id/enterMessage"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:padding="5dp"
android:layout_toLeftOf="#+id/sendMessage"
android:layout_toRightOf="#id/emojiButton"
android:background="#drawable/textfield_multiline_activated_holo_dark"
android:hint="" />
<ImageButton
android:id="#+id/sendMessage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#D8D8D8"
android:contentDescription="#string/empty"
android:padding="10dp"
android:src="#drawable/action_send_message" />
and add it using include in xml or via addView() in java, but nothing worked properly. Most important is that the footer has its on background colour (always when I tried to set a colour to the layout where the footer is in, the whole activity got this colour) and that the textview resizes automatically.
Best regards, Oliver
I am working on an android project and I am making use of jfeinstein sliding menu library, library can be located at https://github.com/jfeinstein10/slidingmenu.
I have got the library working fine and have amended my code to make it work with other components, not just TextViews, such as Switches. I am now trying to add an EditText to the menu so that the user can enter directly in the box without having to switch activities.
I have it so I have a called MenuAdapter which extends ArrayAdapter. This then has a series of constructors which, based on the constructor and what values are passed into, determine which control is added to the sliding menu. The EditText is being added to the sliding menu and the hint is being sent, and when I tap on the edit text the keyboard is displayed but if I type anything, its not shown in the EditText. However, oddly, if I long press on the edit text and click paste, I can view the content that is pasted so its just typing that's not working.
Below is the XML layout, each component is hidden using the visibility set to gone and then is set to be displayed dependent on the constructor that was used.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/row_icon"
android:paddingLeft="25dp"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:visibility="gone" />
<TextView
android:id="#+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Medium Text"
android:textAppearance="#android:style/TextAppearance.Medium"
android:visibility="gone"
android:textColor="#color/White" />
<Switch
android:id="#+id/row_switch"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:visibility="gone"
android:textColor="#color/White"/>
<EditText
android:id="#+id/row_edittext"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:visibility="gone"
android:textColor="#android:color/white" />
</LinearLayout>
Below is the code for how the EditText is being addd to the menu.
case EDITEXT:
EditText editText = (EditText)convertView.findViewById(getItem(position).viewID);
editText.setHint(getItem(position).hint);
editText.setEnabled(true);
editText.setVisibility(View.VISIBLE);
break;
Thanks for any help you can provide.
i want to add a caption which looks like the default text below an app icon to the widget of my app. Is there any common way to achieve this?
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="72dp"
android:layout_height="wrap_content"
android:text="#string/label"
android:drawableTop="#drawable/icon"
/>
Something like this should work. Using the drawableTop/Left/Right attributes will allow you to place an image above the label. A full list of attributes can be found here.
Another thing you could try is:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="72dp"
android:layout_height="wrap_content"
>
<TextView
android:text="#string/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_shape"
android:id="#+id/text"
/>
<ImageView
android:src="#drawable/icon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:layout_above="#id/text"
/>
</RelativeLayout>
I disagree with this answer.
You should not try to do this.
It has been discussed here :
http://stackoverflow.com/questions/2651631/android-home-screen-widget-icon-label-style/2652961#2652961
I am trying to modify the design of Spinner widget. I can change the background, but I can't find a way to change the arrow icon on the right side. Is there a way to do it?
Thanks!
The whole thing is a single 9 patch png image. I've modified the entire look of spinners before by replacing the images. See this page: http://androiddrawableexplorer.appspot.com/
Specifically look at btn_dropdown_normal.9, btn_dropdown_pressed.9, btn_dropdown_selected.9 and btn_dropdown_disabled.9
You just need to provide your own versions of those images.
Also, you can place your "spinner bar" layout in a FrameLayout, together with the real spinner but set to invisible:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="32dip"
>
<Spinner
android:id="#+id/theSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="32dip"
android:background="#drawable/my_background"
android:padding="6dip"
android:clickable="true"
android:onClick="spinnerBarReplacementClicked"
>
<ImageView
android:id="#+id/replacementSelectImg"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/my_drawable"
/>
<TextView
android:id="#+id/replacementSelectText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="4dip"
android:layout_toLeftOf="#id/replacementSelectImg"
android:textColor="#000000"
android:textSize="14sp"
android:ellipsize="marquee"
android:singleLine="true"
/>
</RelativeLayout>
</FrameLayout>
and pass the clicks from your layout to the real spinner
private Spinner mSpinner;
mSpinner = (Spinner) findViewById(R.id.theSpinner);
public void spinnerBarReplacementClicked(View pV){
mSpinner.performClick();
}