I want to create a progress bar in the middle of a standard button, something like this :
In the xml layout, when i click the progressbar, i do see that it's located where i wish it to be, but on realtime, i can't see it, it feels like its hiding below the button.
I've tried :
Changing the view's positioning (button above/below progressbar)
indeterminate
Playing with ProgressBar's style
Nothing seemed to be working.
Here's my xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<Button
android:id="#+id/button_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:elevation="1dp"
android:text="test button" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_id"
android:layout_alignTop="#+id/button_id"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:indeterminateTint="#android:color/holo_blue_dark"
android:visibility="visible" />
</RelativeLayout>
The problem is related with elevation. Add elevation to the ProgressBar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<Button
android:id="#+id/button_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:elevation="1dp"
android:text="test button" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_id"
android:layout_alignTop="#+id/button_id"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:elevation="2dp"
android:indeterminateTint="#android:color/holo_blue_dark"
android:visibility="visible" />
</RelativeLayout>
In the Preview, the ProgressBar is always invisible (at least to me).
The problem is, that you applied an elevation to your button. this changes the z-level of a view. So the ProgressBar really is behind your button, because the ProgressBar does not have an elevation.
Giving the ProgressBar an elevation of 3dp worked for me.
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button_id"
android:layout_alignTop="#+id/button_id"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:elevation="3dp"
android:indeterminateTint="#android:color/holo_blue_dark"
android:visibility="visible" />
EDIT:
You will be better of, using a ProgressDialog.
ProgressDialog dialog = new ProgressDialog(this);
dialog.setMessage("Wait...");
dialog.show();
If you still need to support devices older than 21 (thus can't use android:elevation), try wrapping your button in another dummy layout. I'm using FrameLayout as an example.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit" />
</FrameLayout>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="24dp"
android:layout_gravity="center"
android:indeterminateTint="#android:color/white" />
</FrameLayout>
Related
I have a circular ProgressBar where I want to place an image inside as shown in the screenshot, the circular progress bar have a default padding I guess ,So I need to remove it so both will have the same dimensions :
enter image description here
here is the code for the layout :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/dikritem"
android:orientation="vertical">
<ProgressBar
style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:layout_margin="0dp"
android:paddingStart="#null"
android:paddingTop="#null"
android:paddingEnd="#null"
android:paddingBottom="#null"
android:progress="100"
android:progressDrawable="#drawable/circlebackg"
/>
<ProgressBar
style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:paddingStart="#null"
android:paddingTop="#null"
android:paddingEnd="#null"
android:paddingBottom="#null"
android:progress="80"
android:progressDrawable="#drawable/circle"
/>
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tasbih_circ_back"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:padding="35dp"
android:src="#drawable/adkarbackground"
app:civ_border_color="#color/border"
app:civ_border_width="0dp" />
<Button
android:id="#+id/tasbih_circ_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:padding="40dp"
android:text="1"
android:textSize="60sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/adView">
<Button
android:id="#+id/tasbih_plus"
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_margin="20dp"
android:background="#drawable/adkarbackground"
android:text="+"
android:textSize="40dp" />
<Button
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#drawable/adkarbackground"
android:text="0"
android:textSize="40sp"
/>
<Button
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_margin="20dp"
android:background="#drawable/adkarbackground"
android:text="-"
android:textSize="40dp" />
</LinearLayout>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
ads:adSize="SMART_BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>
</RelativeLayout>
is there any solution to remove the default padding ??
Using the current com.google.android.material.progressindicator.CircularProgressIndicator you can set app:indicatorInset="0dp" allowing you, for instance, to set a full circle as background which borders will match exactly with the progress indicator itself.
if you want to make your view little bigger than
Try Using Negative Padding like or try using scalex and scaley but use values greater than 1 in scale values. It will increase the scale of the view inside.
android:padding="-10dp"
android:scaleX="1.2"
try this in your progress bar code (xml file)
android:adjustViewBounds="true"
android:scaleType="fitXY"
view this link :
Android ImageButton crops on resize
I have 2 views (a button and a slider bar), one above the other, and I am animating the lower one out of frame and I want the other view to also animate down the same amount. My issue is that the spot where the lower view use to be clips out the top view. (See images). Both animations are triggered by a view model property change.
TimeView.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
MyPositionButton.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
Before Animation:
After Animation:
How do I get the lower view to stop clipping the upper one? I have attempted to alter the view's Z and TransitionZ properties to make sure the button is higher then the bar. I have also tried to set the visibility of the bar to Gone on animation completion. Also I have tried to use a TranslateAnimation so that I could have control over the Fill properties. None of these thing have worked.
Here is a look at the axml.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>
After switching on the "Show layout bounds", OP found out that he was animating the Button itself, not the RelativeLayout. After animating RelativeLayout no clipping would happen.
Old answer
Change the places of your RelativeLayouts, so that one with ImageButton is declared below of another with SeekBar. In that case the ImageButton will be drawn over SeekBar.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>
I have an app where I have used ProgressBar in several places.
<ProgressBar
android:id="#+id/pb_loading_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"/>
All the progressbars are not appearing in any activity.
I have tried all solutions by changing the color of the progressbar programmatically and by adding an xml drawable, but its not working.
Below is my styles.xml
<style name="MyAppCompatTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#FFFFFF</item>
<item name="android:colorPrimaryDark">#F1F1F1</item>
<item name="android:colorAccent">#EF5350</item>
</style>
Technically the progressbar should take the colorAccent, but its not appearing at all.
Posting a sample view:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/logo"
android:src="#drawable/app_icon"
android:layout_centerHorizontal="true"
android:layout_marginTop="120dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/logo"
android:textSize="18sp"
android:id="#+id/subtitle"
android:textColor="#color/secondary_text"
android:layout_marginTop="30dp"
android:text="QUICK BROWN FOX"/>
<ProgressBar
android:id="#+id/pb_loading_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"/>
The progressbar is not overlapped by any view in any activity of the app. I dont have any other theme in my styles.xml and I am not overriding the activity theme in the manifest also. Its an application level default theme.
Even if i create a new activity with only a progressbar, it doesnt appear.
It is weird as in all the activity design previews, the progress bar appears properly but on running the app it doesnt.
Please let me know if some other info is required.
I was too facing same problem, may its there but hiding because of other views. what i did in your case would minor change in xml file
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/pb_loading_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/logo"
android:src="#drawable/app_icon"
android:layout_centerHorizontal="true"
android:layout_marginTop="120dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/logo"
android:textSize="18sp"
android:id="#+id/subtitle"
android:textColor="#color/secondary_text"
android:layout_marginTop="30dp"
android:text="QUICK BROWN FOX"/>
exactly nothing but progress bar on top of other, this work for me i don't know why.
I encountered a problem with the display layout.
Relativelayout #+id/media is not visible when you put visible. He remains under Relativelayout #+id/media2,is selectable from dpad but remains under the other.
if the parts and put media2 first and second media. When media is visible, but can not be selectable dpad.
there is a certain order to make the media though is written first be above the media2?
Thank you
layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/app_video_box"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/media"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal|center"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:animateLayoutChanges="true"
android:background="#e72a2a"
android:id="#+id/relativeLayout">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button"
android:layout_toEndOf="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:id="#+id/button3"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:layout_toEndOf="#+id/button2" />
</RelativeLayout>
<SeekBar
android:id="#+id/app_video_seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:layout_above="#+id/relativeLayout"
android:layout_alignLeft="#+id/relativeLayout"
android:layout_alignStart="#+id/relativeLayout"
android:layout_alignRight="#+id/relativeLayout"
android:layout_alignEnd="#+id/relativeLayout" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/media2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<tcking.github.com.giraffeplayer.IjkVideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</RelativeLayout>
It seems like you're trying to control the focus on different items on screen. You can use XML tags specifically for this:
android:nextFocusForward="#+id/media2"
android:nextFocusDown="#+id/media2"
You can look at the docs for keyboard navigation to learn more.
In Android TV, only ui elements gets selected only if they are focusable.
Achieve this either through xml attributes or by code.
view.setFocusable(true)
or
android:focusable="true".
And set rules for each ui elements to whom the focus to be transferred.
android:nextFocus{direction}="view_id".
where direction could be down, top, right or left.
focusable items
I have a layout in which a button is aligned at the bottom of the RelativeLayout as in below code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="250dp"
android:background="#color/background_material_light"
android:layout_height="match_parent">
<View
android:layout_alignParentLeft="true"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<RelativeLayout
android:id="#+id/rlHeaderFilter"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material">
<View
android:id="#+id/separator"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/strokeColor"/>
<TextView
android:background="#color/actionbar_background"
android:id="#+id/tvFilterText"
style="#style/textStyleHeading2"
android:layout_toRightOf="#+id/separator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textColor="#color/white"
android:text="Filter Search" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:src="#drawable/refresh"
android:id="#+id/resetLeadsFilter"
android:contentDescription="#string/emptyString"
android:layout_centerVertical="true"
android:padding="6dp"/>
</RelativeLayout>
<TextView
android:layout_below="#+id/rlHeaderFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetFromFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget From"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_below="#+id/tvBudgetFromFilter"
android:layout_marginTop="10dp"
android:id="#+id/tvBudgetToFilter"
style="#style/textSpinnerStyleHeading"
android:layout_margin="8dp"
android:hint="Budget To"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_below="#+id/tvBudgetToFilter"
android:id="#+id/sourceLayout"
layout="#layout/source_layout" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statusLayout"
android:layout_margin="8dp"
android:layout_below="#+id/sourceLayout"
layout="#layout/status_layout" />
<Button
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_marginTop="10dp"
android:textColor="#color/white"
android:background="#color/actionbar_background"
android:text="SEARCH"
android:id="#+id/bFilterLeads"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
I can see the button at the bottom of the layout as shown in the screenshot .It displays like this in pre Lollipop devices(below < 5.0 devices) :
But in Lollipop the button at the bottom does not appear as shown in following screenshot :
I am not able to get the reason for that Please help me out . Thanks in advance .
I have solved my problem ! In fact, the LinearLayout was behind the navigationBar. To fix it, just add this line to the Activity (after setContentView();)
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
I'm not sure why the layout behaves differently between Lollipop/pre-Lollipop (unless there's some other piece that's not shown). I will point out though that I don't think layoutGravity is valid for views within a RelativeLayout -- that's something you'd use with a LinearLayout. I'd first remove that property and see how it behaves on pre-Lollipop, and then see about correcting the layout once that's done. It could be that layoutGravity is causing some sort of incorrect behavior pre-Lollipop.