I have a Button that is defined in a RelativeLayout as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
I would like to add a ProgressBar behind the Button that occupies the exact same space as the Button, so that when the button is disabled (translucent), you can see the progress bar behind it. How would I do this?
To do this I had to define the button in my main.xml first, followed by the progress bar as follows:
<Button
android:id="#+id/search_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
android:text="#string/search" />
<ProgressBar
android:id="#+id/cooldown_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/search_button"
android:layout_below="#id/current_location"
android:layout_marginBottom="6dp"
android:layout_marginLeft="9dp"
android:layout_marginRight="9dp"
android:layout_marginTop="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/progress_bar" />
Then, once I had initialized all the GUI components, I had to bring the button back in front of the progress bar with:
searchButton.bringToFront();
The end result
Button when enabled:
Button when disabled with progress bar:
put this right before the button inside the relative layout in your xml:
<ProgressBar
android:id="#+id/descriptive_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/current_location"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingBottom="30dp"
android:paddingTop="30dp"
/>
by using all of the same layotu and padding attributes we can make sure the View will be in the same spot and roughly the same size (height could be different because of wrap_content) I think if you put the progress bar first in the layout file then the button should appear on top.
But also you can enforce whatever policy you want with view.setVisibility(visibility-ness)just make sure whenever you make one visible you make the other invisible.
that way in-case I am wrong about how they stack by default based on their position in the file (which I could be, I didn't verify it just now) and in the event you don't want to move the progress bar to bellow the button in the file, you could still achieve the same thing from the users perspective.
Related
I want to align the icons accordingly in my android app in the top bar my top bar has side menu on the left image
It has some empty space after the side menu icon I want to fill that space by arranging the icons accordingly but I don't know how to do that
please help me to avoid that empty space and put the icon in that place
I have also attached image for better view
Thanks
please try to create a custom layout for action bar & inflate it.
You can use setlogo method in toolbar to fill the your desired space
toolbar.setLogo(R.drawable.yourlogo);
or simply set all icon inside your toolbar according to your requirement.
like this
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this help!
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>
Have a look on following screenshot.
In this layout, I'm displaying overlay view (the one with pink color) to disable the log in button click until loading is complete. But the problem is that, though overlay view is appearing above login button but still login button click is called. Any idea whats happening here?
Following is my overlay view xml.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#88ff0000">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/loader_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Just a moment..."
android:textSize="12dp"
android:textColor="#000000"
android:layout_margin="10dp"
android:layout_gravity="center_horizontal"/>
<ProgressBar android:id="#android:id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:progressBarStyleSmall"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="center_horizontal"
android:indeterminateDrawable="#drawable/loading_wheel"/>
</LinearLayout>
</RelativeLayout>
Solved it my self.
Android dispatches events to background widgets if there are not implemented for the overlay events. So simply add on click listener on the overlay view to avoid click on Login button.
I have a button with a symbol of an arrow. Besides, I want to have some margin between the button and the adjacent elements:
<Button
android:id="#+id/TSPrev"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_margin="10dp"
android:background="#android:color/holo_orange_light"
android:text="#string/left"
android:textSize="60sp" />
However, when I do this, the arrow appears like this:
How can I keep the text centered vertically when I have margins? Without them, the button text appears correctly.
Thanks
May be This will Help You :
<Button
android:id="#+id/notification"
style="#style/Wrap"
android:layout_margin="8dp"
android:background="#drawable/red_shape_corner"
android:drawableRight="#drawable/notification_bell"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/str_notification"
android:textColor="#android:color/white" />
You Need to use
// Nothing but Image like Arrow etc.
android:drawableRight="#drawable/notification_bell"
// Here you can put you text
android:text="#string/str_notification"
Try using android:gravity="center".
android:gravity attribute documentation
I'm building a custom dialog box for my Application. While doing so, my OK and Cancel buttons are going right to the bottom of this view i.e. to the bottom edges of the dialog box. How can I pull these up a little so that there is a slight gap between the buttons and the bottom edge of the dialog box.
My XML code is as follows:
<TextView
android:id="#+id/settingsview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="18dp"
android:text="Select Settings" />
<RadioButton
android:id="#+id/onemin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/settingsview"
android:layout_below="#+id/settingsview"
android:layout_marginTop="14dp"
android:text="#string/radio_one" />
<RadioButton
android:id="#+id/twomin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/onemin"
android:layout_below="#+id/onemin"
android:text="#string/radio_two" />
<RadioButton
android:id="#+id/tenmins"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/twomin"
android:layout_below="#+id/twomin"
android:text="#string/radio_three" />
<Button
android:id="#+id/set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/onemin"
android:layout_below="#+id/tenmins"
android:layout_marginRight="54dp"
android:layout_marginTop="30dp"
android:background="#drawable/custom_btn_livid_brown"
android:text="#string/submit_btn" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/set"
android:layout_alignBottom="#+id/set"
android:layout_toRightOf="#+id/twomin"
android:background="#drawable/custom_btn_livid_brown"
android:text="#string/cancel" />
have you tried using gravities? this is my solution when i have trouble with positioning my widgets.
basically, you need some parent "container" where your buttons are in and then position them with changing the gravities within the container for your widgets.
Vogella has a good tutorial for this topic!!
vogella-tutorial
Though you don't provide your full code here.Not sure whether you use above things in a LinearLayout or RelativeLayout.But as you say..
How can I pull these up a little so that there is a slight gap between
the buttons and the bottom edge of the dialog box
So i think android:layout_marginTop="" can do the trick,if you decrease those values.
Use
android:layout_marginTop="10dp" //change this value according to you need
And if you want to move you buttons a little bit left rather than right then change..
android:layout_marginRight="30dp" //change this value according to you need
I show here 2 examples of how can you improve those condition.If you still face problem then post full xml code here so that i can test that in my environment.