There are plenty of explanation about how to get buttons to display like standard dialogue buttons - which I follow. I have this in my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
style="?android:attr/buttonBarStyle"
android:showDividers="middle"
android:measureWithLargestChild="true">
<Button
android:id="#+id/button_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_cancel" />
<Button
android:id="#+id/button_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_ok" />
</LinearLayout>
This works perfectly well and produces the visual design I need. However when I touch the buttons, they don't highlight. This is rather annoying, as everything else is exactly as it should be. It seems that the buttonBarButtonStyle doesn't include the state drawables for different states of the button. Is there an easy way to get the highlight back?
Of course, I can just define my own state drawable defining different colours, but I want to use theme colours instead.
You need to apply the background:
android:background="?android:attr/selectableItemBackground"
to achieve the default "button bar" style and behavior.
Related
Please check this screenshot
How to add buttons like this in android. Is there a library for it or what is it called?
Please note that when keyboard is hidden, this button takes up the space for navigation buttons.
Another question: How to change the size of the blue app bar when keyboard appears or hides?
**UPDATE : ** I can implement a similar layout using borderless buttons in frame layout and setting the gravity to bottom. Then I used android:windowSoftInputMode="adjustResize"
in the manifest file to make it work with keyboard hide/unhide. Still these buttons are not taking the space of navigation buttons. Also still need guidance for change app bar size on keyboard appear.
You can use
1- AppIntro
2- AppTour
Well, I would say that the button is not related in any way with they keyboard. I bet it's just a button inside a FrameLayout with the android:layout_gravity="bottom" property set.
It is a borderless button placed in a container(probably LinearLayout)
container itself is called buttonBar
Borderless button
One design that can be useful is a "borderless" button. Borderless
buttons resemble basic buttons except that they have no borders or
background but still change appearance during different states, such
as when clicked.
To create a borderless button, apply the borderlessButtonStyle style
to the button. For example:
<Button
android:id="#+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage"
style="?android:attr/borderlessButtonStyle" />
sample for button bar
<LinearLayout android:id="#+id/footer" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_alignParentBottom="true" style="#android:style/ButtonBar">
<Button android:id="#+id/saveButton" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="#string/menu_done" />
<Button android:id="#+id/cancelButton" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="#string/menu_cancel" />
</LinearLayout>
Effect of everything else collapsing and this button bar being at top op keyboard can be achieved by keeping your entire view except buttonBar in a scroll view.
Use this as a reference. Insert your layout inside ScrollView.
<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:orientation="vertical"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="1"
/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
/>
</LinearLayout>
</LinearLayout>
I am using ?android:attr/buttonBarStyle and ?android:attr/buttonBarButtonStyle for my button bar.
Here is my code:
<LinearLayout
android:id="#+id/label_edit_dialog_buttonbar"
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/label_edit_dialog_name_edittext"
android:layout_marginTop="8dp"
android:orientation="horizontal" >
<Button
android:id="#+id/label_edit_dialog_save_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/save" />
<Button
android:id="#+id/label_edit_dialog_cancel_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/cancel" />
</LinearLayout>
Here is result I get:
I expected to see a Divider between my button bar and other views but I didn't see it. I see top Divider when I am using AlertDialog - I checked AlertDialog xml layout and saw that AlertDialog also use buttonBarStyle. Anyone has any ideas? Thanks!
Here is dev settings: Eclipse + Nexus 4 Simulator + Min API is 14+
The ButtonBarStyle does not (as far as I know) provide dividers. To create such a divider, you will need to add them as Views in your layout (see this question for more).
I searched a lot but I didn't find how to remove the background color from the button which is appearing on the right and left side of button. Can anybody help?
My screen looks like
No matter what I try I am not able to remove the black portion.
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_base"
android:text="#string/base"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
<Button
android:id="#+id/btn_care"
android:text="#string/care"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_daily_prize"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/daily_prize" />
<Button
android:id="#+id/btn_winner"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/winner" />
</LinearLayout>
</LinearLayout>
#Drawable/selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressed"> </item>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:drawable="#drawable/change"></item>
</selector>
this is the image used with name change.9.png
according to your scenario i can surely say that either you are not using a 9-patch image (an image with extension like .9.png ) or the 1 pixel borders of 9-patch at left and top are not drawn in correct manner. thats why the edges and the side border shade get expanded with the button with long width. either you should show what 9-patch button background you have used or try some correct 9-patch and check results for that.
Why don't you use some other control element like TextView instead of buttons? I just saw that TextView has onClickListner and so you can use it as sort-of button, though I have not done it; button is meant to aid you defining your layout, but as this seems to only be a problem for you, just do not use it).
By the way I seriously recommend you to use android styles, as you copy-paste a lot of attributes. If you use Eclipse for development, open your layout xml, select the item you want to extract the style of, press ctrl + 1 and then select extract style. That way you should avoid copy-pasting all these style attributes.
Try removing the android:textColor attribute. These can be misleading and sometimes alter the colour of more than just the text. If the text is supposed to be black then you don't need it.
I hate to be the third person to ask this, but the previous two askings haven't seemed to answer it fully. The android design guidelines detail borderless buttons, but not how to make them. In one of the previous answers, there was a sugestion to use:
style="#android:style/Widget.Holo.Button.Borderless"
This works well for a Holo theme, but I use a lot of Holo.Light as well and
style="#android:style/Widget.Holo.Light.Button.Borderless"
Does not seem to exist. Is there a way to apply a style for such borderless buttons in Holo.Light, or better yet, simply apply a borderless tag without specifying which theme it belongs in, so the app can pick the proper style at runtime?
Holo.ButtonBar seems to fit the bill for what I am looking for, except it provides no user feedback that it's been pressed.
Also, is there a place in the documentation that lists such styles that can be applied and a description of them? No matter how much I google, and search through the docs, I can't find anything. There is just a non-descriptive list if I right click and edit style.
Any help would be appreciated.
Edit: Got a perfect answer from javram, and I wanted to add some XML for anyone interested in adding the partial borders google has adopted.
Fora horizontal divider, this works great
<View
android:id="#+id/horizontal_divider_login"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/holo_blue" />
and this for a vertical one:
<View
android:id="#+id/vertical_divider"
android:layout_width="1dip"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#color/holo_blue" />
Simply add the following style attribute in your Button tag:
style="?android:attr/borderlessButtonStyle"
source: http://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Check out my answer here. In a nutshell the correct solution is to use the following:
android:background="?android:attr/selectableItemBackground"
At the risk of beating a dead horse, here's another (possibly better) option. AppCompat v7 defines a borderless button style. If you're already making use of the AppCompat library, just go with that:
<Button android:text="#string/borderlessButtonText" style="#style/Widget.AppCompat.Button.Borderless" />
This code will remove all background for a button:
android:background="#android:color/transparent"
Just incase anybody is looking for light-weight solution to get the borderless button for the API's that do not support the Holo theme (like I did for a long time), Im posting my solution below:
<View
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#505154"
android:layout_marginLeft="10dp" android:layout_marginRight="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_Reply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#android:color/transparent"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:text="#string/btnReplyText"/>
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp"/>
<Button
android:id="#+id/btn_Delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"
android:text="#string/btnDeleteText" />
<View
android:layout_height="fill_parent"
android:layout_width="1dp"
android:background="#505154"
android:text="#string/btnReplyText"
android:layout_marginBottom="7dp" android:layout_marginTop="7dp" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:text="#string/btnExitText"
android:paddingBottom="15dp" android:paddingTop="15dp"
android:textColor="#5c5966"
android:background="#android:color/transparent"/>
</LinearLayout>
All you have to do is change the colours and text to suit your own background. All the best!
I am trying to add a transparent button bars at the top and bottom of my activity, much like in the Android Gallery App.
I have been looking through the Gallery app source code, but I'm not able to see how they did it. When using some snippits of their code, I am able to produce a button bar, but it is a dark grey color with lighter grey buttons:
<LinearLayout android:id="#+id/gridView_multiSelectBar"
android:orientation="horizontal" android:visibility="gone"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:clickable="false"
android:paddingTop="5dp" android:paddingLeft="4dp"
android:paddingRight="4dp" android:paddingBottom="1dp"
android:background="#android:drawable/bottom_bar"
android:layout_alignParentBottom="true">
<Button android:id="#+id/gridView_multiSelectBar_button_share"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_share" />
<Button android:id="#+id/gridView_multiSelectBar_button_copy"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_copy" />
<Button android:id="#+id/gridView_multiSelectBar_button_delete"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_delete" />
<Button android:id="#+id/gridView_multiSelectBar_button_close"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_close" />
</LinearLayout>
The code implies that they are using Button widgets. The screenshot below almost looks like its using a menu for the bottom, but then I'm not sure how they are drawing the top area.
My app has a black background. I would like these buttons to a thin border to show the boundaries between them, as well as the main content.
Can anyone can point me in the right direction?
Thanks in advance,
Kevin
A similar question was asked and answered in
How to Set Opacity (Alpha) for View in Android.
It is a matter of setting the alpha content of your view. Hope that helps you.
Cheers!!!
nJoshi