progress fill on button click [duplicate] - java

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

How to make Float Action Button infobox

I want to add an information box above the floataction button as in the image below. How can I do that? Thank u
Image URL CLICK
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.Fab_Bottom_app_bar"
app:hideOnScroll="true"
android:layout_gravity="bottom"
app:fabCradleMargin="15dp"
app:fabCradleRoundedCornerRadius="60dp"
app:layout_scrollFlags="scroll|enterAlways"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:theme="#style/Theme.Fab_Bottom_app_bar"
android:background="#drawable/dropbutton"
android:layout_height="match_parent"
app:menu="#menu/bottom_nav_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
app:backgroundTint="#2770DC"
app:tint="#fff"
android:src="#drawable/icon_add"
app:layout_anchor="#id/bottomAppBar" />
https://developer.android.com/reference/android/widget/PopupWindow
PopupWindow should serve your purpose
"This class represents a popup window that can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity."
You can pass whatever "contentView" you want to show into its constructor and call the "showAtLocation" method to determine where to show it.

Android - Button covering TextView in RelativeLayout only in version 5.0+

The target I need to achieve: 2 lines of text and 1 straight line in between should always be on top of Button. So in such a case, setting text in Button's attribute is not applicable according to my knowledge. Therefore I use TextView and View aligning on top of Button to achieve it.
Problem: A strange UI appearance I have come across of Android 5.0+ is that when the Button is enabled, it covers TextView and View even it comes before TextView in RelativeLayout xml file. (according to my knowledge, this means that TextView should on top of Button) The following is my xml code:
<RelativeLayout
android:id="#+id/rl_daily_check_in_button_container"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginBottom="4dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/textview_check_in_days_in_row">
<Button
android:id="#+id/button_daily_check_in"
android:layout_width="140dp"
android:layout_height="140dp"
android:background="#drawable/daily_checkin_button" />
<TextView
android:id="#+id/textview_check_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/view_line"
android:layout_marginBottom="4dp"
android:text="#string/title_not_yet_daily_check_in"
android:textColor="#color/text_gray"
android:textStyle="bold"
android:textSize="36sp" />
<View
android:id="#+id/view_line"
android:layout_width="94dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/textview_check_in_points"
android:layout_marginBottom="6dp"
android:background="#color/text_gray" />
<TextView
android:id="#+id/textview_check_in_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/points_can_get_daily_check_in_placeholder"
android:textColor="#color/text_gray"
android:textSize="14sp" />
</RelativeLayout>
But when the app is in Android 5.0-, say 4.4.2, the UI is exactly what I expect. I have tried to set android:elevation="xxdp" attribute, it success until I set the background of Button programatically. Can anyone explain the reason and how the Andoird 5.0+ render its UI? Many Thanks!
Button on Andoird 5.0+:
Button on Android 5.0-:
From Android Lollipop (5.0), the Button has a default StateListAnimator. It has set the default android:elevation and android:translationZ attributes to the Button. Since the Button has default elevation set to it, it appears above the other Views that doesn't have elevation set (Views that has elevation less than the Button, to be precise). i.e. The Views that has higher elevation set to it will appear above the Views that has lower elevation set.
So that's why, when you changed the Button to ImageView, the problem is solved, because ImageView has no default elevation set.

How would I go about moving my blue bar Image to cover all of the gray area?

As the image shows, the blue image here does not completely move to the top. I would like to be able to move this blue bar to be on the border of the black bar above, but the small gray area is there and I cannot move it in the graphical layout.
EDIT: here is the XML
<RelativeLayout 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:background="#F3F3F3" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="124dp"
android:background="#drawable/roundedcorner"
android:ems="10"
tools:ignore="TextFields" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/bluebars" />
</RelativeLayout>
EDIT: My temporary solution I programmatically changed how my image is aligned.
ImageView iv;
iv = (ImageView)findViewById(R.id.imageView1);
iv.getLayoutParams().height = 265;
I call this the temporary solution because this is what I'll work with until I find a better way (I'm a newb to RelativeLayout) and this fix might cause problems on bigger/smaller devices. So it is not recommended, but it'll do until I find a better way.
Put this in Application Tag in your menifest file.
android:theme="#android:style/Theme.Light.NoTitleBar"
And Remove this If you have added in your code:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
Try this in the onCreate() of your activity.
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
This should hide the titlebar as Aleks G mentioned.
Make sure to do this before setContentView()

ImageView backgroud does not change smoothly on button click

I am writing a simple app that changes the application background randomly on button click.
I have a arraylist that contains 5 id's of images that the application should use:
ArrayList<Integer> imageID = new ArrayList<Integer>();
imageID.add(R.drawable.frame_blue);
imageID.add(R.drawable.frame_green);
imageID.add(R.drawable.frame_lilac);
imageID.add(R.drawable.frame_pink);
imageID.add(R.drawable.frame_yellow);
I have two buttons in my layout xml file for next and previous. Both should change Application background when clicked.
I change the image background from this arraylist:
iM.setBackgroundResource(imageID.get(r.nextInt(5)));
and my layout xml looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="76dp"
android:onClick="previous"
android:text="Previous" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:onClick="next"
android:text="Next" />
</RelativeLayout>
All works fine on button click's, ImageView background change as I expect, but the problem is the background is not changing smoothly.
It hangs some time. May be the main ui thread will be block for 1 or 2 second and this look like application hangs.
Hangs mean: Some time button remain clicked for a few seconds.
I tried asynctask did not have success. Is there a way to make it change smoothly?
you need to use caching in order to save time and not inflate every time the images
like this : Drawable image_frame_green = getResources().getDrawable(
R.drawable.frame_green);
Have you tried to preload all drawables in cache and then instead of setting the background resource, set the background drawable as background directly.

Hiding the sliding drawer handle

I am building a view in my Android application using a sliding drawer widget. I have implemented my own custom handles (just a row of menu buttons which then changes the content of the drawer and then activates the openAmination). I have managed to disable the standard handle provided with the slidingdrawer but I want to completely remove it.
None of the standard visibility stuff in xml or java works in hiding/removing the handle:
<SlidingDrawer android:layout_width="fill_parent"
android:id="#+id/slidingDrawer1"
android:layout_height="fill_parent"
android:handle="#+id/handle"
android:content="#+id/content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:allowSingleTap="false"
>
<Button android:layout_width="wrap_content"
android:text="Close"
android:layout_height="wrap_content"
android:id="#+id/handle"
android:visibility="gone" //DOES NOT WORK
</Button>
<LinearLayout android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
</LinearLayout>
</SlidingDrawer>
I also tried importing the view in java and doing the same but also does not work.
View h = findViewById(R.id.handle);
h.setVisibility(View.GONE);
I have then tried extending the slidingDrawer class and making my own but it still requires a handle!. Is there anyway I have a sliding drawer without a default handle?
-----SOLUTION----
draw = (SlidingDrawer)findViewById(R.id.slidingDrawer1);
//Close the draw if opened when the user touches elsewhere on the screen
draw.setOnTouchListener(new OnTouchListener(){
#Override
public boolean onTouch(View v, MotionEvent event) {
if(draw.isOpened())
((SlidingDrawer)v).animateOpen();
return false;
}});
//Open the draw by external button
((Button) findViewById(R.id.quiz_button)).setOnClickListener(
new Button.OnClickListener(){
#Override
public void onClick(View arg0) {
draw.animateOpen();
} });
An the XML for the sliding draw view was:
<SlidingDrawer android:layout_width="fill_parent" android:allowSingleTap="false" android:id="#+id/slidingDrawer1" android:content="#+id/content" android:handle="#+id/handle" android:layout_height="fill_parent" android:layout_alignParentTop="true" android:layout_alignParentLeft="true">
<Button android:layout_height="wrap_content" android:layout_width="0px" android:visibility="invisible" android:text="Close" android:id="#+id/handle"></Button>
<LinearLayout android:id="#+id/content" android:gravity="center" android:background="#4FFFFF44" android:layout_width="fill_parent" android:layout_height="76dp"></LinearLayout>
</SlidingDrawer>
Many Thanks
Sam
I tried for many hours and failed to get rid of the handle, the best I could do wass move it far away from the view window. If you have already extended the slidingdrawer class it should be easy.
In the onLayout method find the line
handle.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
and change it to
handle.layout(10000, 10000, 10000, 10000);
Basically its just setting its position to way of screen.
I found a better way to fix the problem.
Do not hide a handle itself, but it's content. I had an ImageView as a handle, but I changed it to a LinearLayout holding an ImageView.
<LinearLayout
android:id="#id/handle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/handleImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/sliding_drawer_handle" />
</LinearLayout>
Now handleImage.setVisibility(View.INVISIBLE) works fine in onAnimationEnd.
Hope that helped :)
I have the same problem, I don't want to show the handle because I have a personal button that shows the SlidingDrawer at the click. So, I solve it setting the handle height to 0dp.
This is my handle code:
<ImageButton
android:id="#+id/cash_menuGruop_handle"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_contetn"
android:layout_height="0dp"/>
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/handle"
android:visibility="gone" //DOES NOT WORK
</Button>
use height and width 0dp
,for open and close use handle.performclick();
it is working for me

Categories

Resources