How to make ScrollView transparent?

How to make ScrollView transparent? - android

I have a ScrollView that contains a ConstraintLayout. The ConstraintLayout has a drawable resource as its background: android:background=#drawable/bg_rounded_corner_pin_bg which sucessfully gives the ConstraintLayout rounded corners. The issue I have is that the ScrollView shows up behind the rounded corners of the ConstraintView and I cannot make the ScrollView transparent:
Here's the layout file:
activity_enterpin.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true"
android:id="#+id/scrollviewPin"
android:background="#00000000" // this is where I need transparency
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:maxWidth="#dimen/layout_maxwidth"
android:padding="#dimen/layout_padding"
android:background="#drawable/bg_rounded_corner_pin_bg">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/title_margintop"
android:gravity="center"
android:text="#string/pinlock_title"
android:textColor="#color/text_title"
android:textSize="#dimen/textsize_title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.isaacmain3.lockscreen.andrognito.pinlockview.IndicatorDots
android:id="#+id/indicator_dots"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dot_margintop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
<TextView
android:id="#+id/attempts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/attempts_margintop"
android:textColor="#color/text_attempts"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/indicator_dots" />
<com.example.isaacmain3.lockscreen.andrognito.pinlockview.PinLockView
android:id="#+id/pinlockView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/lockview_margin"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/attempts"
app:layout_constraintVertical_bias="0.1" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
This is what the result looks like at the moment:
I've played around with the background color in the ScrollView and I am able to successfully change the color to any non-transparent color from the field I commented above. How do I get rid of these corners?
Here's the drawable file that I used to make rounded corners in case that's of any use:
bg_rounded_corner_pin_bg.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimaryDark"/>
<!-- <stroke android:width="2dp"
android:color="#999999"/>-->
<!-- <padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"/>-->
<corners android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
/>
</shape>

Instead of setting the background, use
android:scrollbarThumbVertical="#null"

Define a new theme in styles.xml:
<style name="TransparentActivity" parent="#android:style/Theme.DeviceDefault.Light.NoActionBar">
<item name="android:windowBackground">#drawable/bg_rounded_corner_pin_bg</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Then, in AndroidManifest.xml:
<activity android:name=".<activity_name>"
android:theme="#style/TransparentActivity"/>
Finally, in the activity class:
DisplayMetrics m = new DisplayMetrics();
getDisplay().getMetrics(m);
WindowManager.LayoutParams params = getWindow().getAttributes();
params.width = m.widthPixels*4/5;
params.height = m.heightPixels*3/4;
params.gravity = Gravity.CENTER;
getWindow().setAttributes(params);
super.onCreate(savedInstanceState);
....
Note that there is code before super.onCreate() is called.

Related

Remove custom dialog color outside the rounded corner in android

I'm trying to apply rounded corners to my custom dialog. Dialog shows the rounded corners correctly but the outer space of corner is turned into white.
drawable/dialog_message_background
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="?postCardBackground"/> //light black color
<corners
android:radius="30dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
My layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:background="#drawable/dialog_message_background"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:background="#drawable/dialog_message_background"
android:orientation="vertical"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="250dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/dialogMessageTv"
android:text="Error occured"
android:maxLines="3"
android:textStyle="bold"
android:textColor="?attr/postUserNameColor"
android:textSize="18sp"
android:layout_gravity="center"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginTop="20dp"
android:id="#+id/messageDialogImg"
android:layout_width="70dp"
android:layout_height="70dp" />
<Button
android:id="#+id/messageDialogOkBtn"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp"
android:background="#drawable/dark_purple_btn_back"
android:text="ok"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#color/white"
android:layout_width="150dp"
android:layout_height="40dp" />
</LinearLayout>
</RelativeLayout>
Output window
Help me to remove the white color outside the custom dialog.

You don't need a shape to achieve a Dialog with rounded corners.
You can override the getTheme() method in your DialogFragment:
import androidx.fragment.app.DialogFragment
class RoundedDialog: DialogFragment() {
override fun getTheme() = R.style.RoundedCornersDialog
//....
}
with:
<style name="RoundedCornersDialog" parent="#style/Theme.MaterialComponents.Dialog">
<item name="dialogCornerRadius">16dp</item>
</style>
In Java just use
public class RoundedDialog extends DialogFragment {
#Override
public int getTheme() {
return R.style.RoundedCornersDialog;
}
}

in Java
just make style for the dialog
<style name="RoundedCornersDialog" parent="#style/Theme.MaterialComponents.Dialog">
<item name="dialogCornerRadius">16dp</item>
</style>
and then assign it to the dialog
dialog = new Dialog(mContext,R.style.RoundedCornersDialog);

How can I remove the smell line under the EditText?

When the user is click on the line in EditText in Huawei device he get another smell line (under the long line) - see image.
I try to do a lot of thing to fix it and I don't find what should I do.enter image description here
The is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/static_relative_layout"
android:background="#color/app_default_background"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="15dp"
android:layout_marginRight="50dp"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/email_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="#style/TextInputLayoutHintAppearanceError"
app:hintTextAppearance="#style/TextInputLayoutHintAppearanceValid">
<EditText
android:id="#+id/email_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:singleLine="true"
android:theme="#style/EditTextStyleRedLine"
android:textColor="#color/new_dark_grey"/>
</android.support.design.widget.TextInputLayout>
The style "EditTextStyleRedLine" is as follows:
<style name="EditTextStyleRedLine" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/grey</item>
<item name="colorControlActivated">#color/red</item>
</style>

Add a background to your edittext, this will solve your issue.
android: background="#null"

You can personalize the background by creating a new drawable resource file, res > right click drawable > new > drawable resource file. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- Inner Shape -->
<solid
android:color="#color/colorWhite"/>
<!-- OUTLINE -->
<stroke android:width="0dp"
android:color="#FFFFFF"/>
<!-- CORNERS -->
<corners
android:radius="5dp"/>
</shape>
</item>
</selector>
Then you can set
android:background="#drawable/YOUR_DRAWABLE"

Programmatically change LAYOUT color in #drawable xml

I've read through a lot of questions on here about programmatically changing the color of a drawable, but they seem to not relate to actual layouts. When I try this:
RelativeLayout firstWord = (RelativeLayout)getActivity().findViewById(R.id.topBG);
Drawable layoutBG = firstWord.getDrawable();
firstWord = buttonBackground.mutate();
firstWord.setColorFilter(0xFFFF0000,Mode.MULTIPLY);
I get this error:
The method getDrawable() is undefined for the type RelativeLayout
I used a drawable to give my layout rounded corners but part of the app is that the background color changes on every click, so I need to know how to change the color in code.
Before moving to a drawable, I was using:
firstWord.setBackgroundColor(color);
Here is my drawable:
round_corners.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#000000" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners
android:radius="25dp" />
</shape>
And here's my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".VulgarActivity"
android:id="#+id/bottomBG"
android:background="#ffffff"
>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/drop_shadow"
>
</View>
<RelativeLayout
android:id="#+id/topBG"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/round_corners"
>
<TextView
android:id="#+id/leftWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Push"
android:textColor="#ffffff"
android:textSize="50sp"
android:shadowColor="#080808"
android:shadowRadius="10.0"
android:shadowDx="5"
android:shadowDy="5"
/>
</RelativeLayout>
</RelativeLayout>
Thanks in advance for any and all help :)
Just a thought:
I could change the color value in "round_corners.xml" to an #color reference (eg:
android:color="#color/switcher"
and putting this in the 'color' folder in values
<color name="switcher">#000000</color>
Would it be easier to programmatically change the color that way?

can you use these line instead, im getting the background drawable on the second line:
RelativeLayout firstWord = (RelativeLayout)getActivity().findViewById(R.id.topBG);
Drawable layoutBG = firstWord.getBackground();
buttonBackground = buttonBackground.mutate();
buttonBackground.setColorFilter(0xFFFF0000,Mode.MULTIPLY);

Remove vertical padding from horizontal ProgressBar

By default the ProgressBar has a certain padding above and below the bar itself. Is there a way to remove this padding so as to only have the bar in the end?

I use the following as a workaround for this issue.
android:layout_marginBottom="-8dp"
android:layout_marginTop="-4dp"

This is how I used Juozas's answer:
height of my ProgressBar is 4dp. So I created a FrameLayout with height 4dp and set the layout_gravity of ProgressBar to center. It's works like a charm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="4dp">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_gravity="center"
android:indeterminate="true" />
</FrameLayout>
Note: What a FrameLayout does is it clips away anything excess, so if you face the problem where the ProgressBar is still thin, just set the layout_height of the ProgressBar to some large number like 100dp. It'll fully cover the FrameLayout and will only show 4dp of it.

If someone still needs help can try this:
<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
android:indeterminate="true"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/guideline" />
Here, the progress bar is inside the ConstraintLayout, and the constraintTop_toTopOf and constraintBottom_toTopOf attributes must be applied to the same element (in this case, it is guideline).
*** COMPLETE SOLUTION:***
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="48dp">
<View
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

I ended up using a custom library to solve this issue. Most of the other solutions work but the results are not consistent across various devices.
MaterialProgressBar
Consistent appearance on Android 4.0+.
Correct tinting across platforms.
Able to remove the intrinsic padding of framework ProgressBar.
Able to hide the track of framework horizontal ProgressBar.
Used as a drop-in replacement for framework ProgressBar.
To add as a gradle dependency:
compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'
To add a ProgressBar with no intrinsic padding to your layout:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="wrap_content"
android:layout_height="4dp"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
app:mpb_useIntrinsicPadding="false"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />
app:mpb_useIntrinsicPadding="false" does the trick. For more details see the GitHub page.

To remove the vertial padding of ProgressBar, you can do by
fix the height of ProgressBar
Use scaleY="value" (value = height/4) (4 is default height of progress bar)
Example contains 1 wrap_content ProgressBar, 1 8dp ProgressBar, 1 100dp ProgressBar
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
...
android:layout_height="8dp"
android:scaleY="2" />

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/progress_loading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:indeterminate="true"
app:indicatorColor="#color/colorAccent"
app:layout_constraintTop_toBottomOf="#+id/app_bar_pdfview"/>
I am using this new progress bar using this
implementation 'com.google.android.material:material:1.3.0'
trackThickness: the thickness of the indicator and track.
indicatorColor: the color(s) of the indicator.
trackColor: the color of the track.
trackCornerRadius: the radius of the rounded corner of the indicator
and track.
indeterminateAnimationType: the type of indeterminate animation.
indicatorDirectionLinear: the sweeping direction of the indicator.

It's possible to draw vertically centered ProgressBar inside a parent that would clip away the padding. Since ProgressBar cannot draw itself bigger than parent, we must create a big parent to place inside a clipping view.
<FrameLayout
android:id="#+id/clippedProgressBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="4dp"
tools:ignore="UselessParent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_gravity="center_vertical">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:indeterminate="true"/>
</FrameLayout>
</FrameLayout>

A complete solution to this problem would be as follows. Just in case if someone needs code fragments, this is what I did.
Copied all the 8 indeterminate horizontal progressbar drawables
Edited the drawables using some image manipulator and remove unnecessary paddings
Copied the drawable XML named progress_indeterminate_horizontal_holo.xml from android platform
Copied the style Widget.ProgressBar.Horizontal and its parents
Set the style and min_height manually in the layout
Here is the progress_indeterminate_horizontal_holo.xml
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/progressbar_indeterminate_holo1" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo2" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo3" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo4" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo5" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo6" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo7" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate_holo8" android:duration="50" />
</animation-list>
Style resources copied to my local styles file.
<style name="Widget">
<item name="android:textAppearance">#android:attr/textAppearance</item>
</style>
<style name="Widget.ProgressBar">
<item name="android:indeterminateOnly">true</item>
<item name="android:indeterminateBehavior">repeat</item>
<item name="android:indeterminateDuration">3500</item>
</style>
<style name="Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:indeterminateDrawable">#drawable/progress_indeterminate_horizontal_holo</item>
</style>
And finally, set min height to 4dp in my local layout file.
<ProgressBar
android:id="#+id/pb_loading"
style="#style/Widget.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:indeterminate="true"
android:minHeight="4dp"
android:minWidth="48dp"
android:progressDrawable="#drawable/progress_indeterminate_horizontal_holo" />

I met the same problem while using progressbar with Horizontal style.
The root cause is that the default 9-patch drawable for progress bar:
(progress_bg_holo_dark.9.png) has some vertical transparent pixels as padding.
The final Solution that worked for me: customize the progress drawable, my sample code as follow:
custom_horizontal_progressbar_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#33ffffff" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#ff9800" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#E91E63" />
</shape>
</clip>
</item>
</layer-list>
layout snippet:
<ProgressBar
android:id="#+id/song_progress_normal"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_alignParentBottom="true"
android:progressDrawable="#drawable/custom_horizontal_progressbar_drawable"
android:progress="0"/>

One trick is to add negative margins to your progress bar.
Below is an example of the XML code, assuming it's on top of your screen:
<ProgressBar
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-7dp"
android:layout_marginBottom="-7dp"
android:indeterminate="true" />

if someone still searching for a solution -- check this comment
set the minimum height to be 4 dp
android:minHeight="4dp"
-
<ProgressBar
android:id="#+id/web_view_progress_bar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:min="0"
android:progress="5"
android:minHeight="4dp"
android:progressTint="#color/vodafone_red"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:progress="60" />

Subin's answer seems to be the only one (currently) that isn't a fragile hack subject to breakage in future releases of the Android ProgressBar.
But rather than going through the trouble of breaking out the resources, modifying them, and maintaining them indefinitely, I've opted to use the MaterialProgressBar library, which does that for us:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:layout_gravity="bottom"
custom:mpb_progressStyle="horizontal"
custom:mpb_showTrack="false"
custom:mpb_useIntrinsicPadding="false"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal.NoPadding"
/>
In build.gradle:
// Android horizontal ProgressBar doesn't allow removal of top/bottom padding
compile 'me.zhanghai.android.materialprogressbar:library:1.1.6'
That project has a nice demo that shows the differences between it and the built-in ProgressBar.

I use minHeight and maxHeigh. It helps for different Api versions.
<ProgressBar
android:id="#+id/progress_bar"
style="#style/Base.Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp" />
It needs to use both. Api 23 works nice with
android:layout_height="wrap_content"
android:minHeight="0dp"
But lower Api versions increase progress bar height to maxHeight in that case.

Try the following:
<ProgressBar
android:id="#+id/progress_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:progress="25"
android:progressTint="#color/colorWhite"
android:progressBackgroundTint="#color/colorPrimaryLight"
android:layout_width="match_parent"
android:layout_height="4dp" />
... and then configure the progress bar to your needs since it'll initially display a mid-sized bar with a yellow-colored progress tint with a grayish progress background tint. Also, notice that there's no vertical padding.

Use like this, inside Linearlayout
<LinearLayout
android:layout_width="match_parent"
android:background="#efefef"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="gone"
android:layout_marginTop="-7dp"
android:layout_marginBottom="-7dp"
style="#style/Widget.AppCompat.ProgressBar.Horizontal" />
</LinearLayout>

For me this is working. Progress bar is sharp. It fits perfectly. I tried with different heights of frame and progress.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="4dp">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="16dp"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
preview

adding the android:progressDrawable to a layer-list defined in drawable fixed the issue for me. It works by masking the progess bar in a custom drawable
example implementation described at https://stackoverflow.com/a/4454450/1145905

I'm using style="#style/Widget.AppCompat.ProgressBar.Horizontal" and it was fairly easy to get rid of the margins. That style is:
<item name="progressDrawable">#drawable/progress_horizontal_material</item>
<item name="indeterminateDrawable">#drawable/progress_indeterminate_horizontal_material</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
I just overrode the min/max height:
<ProgressBar
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2dp"
android:indeterminate="true"
android:minHeight="2dp"
android:maxHeight="2dp" />

Not necessary to download any new module or even put a FrameLayout around your Progress Bar. These are all just hacks. Only 2 steps:
In your whatever.xml
<ProgressBar
android:id="#+id/workoutSessionGlobalProgress"
android:layout_width="match_parent"
android:layout_height="YOUR_HEIGHT"
android:progressDrawable="#drawable/progress_horizontal"
android:progress="0"
<!-- High value to make ValueAnimator smoother -->
android:max="DURATION * 1000"
android:indeterminate="false"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal"/>
progress_horizontal.xml, Change the values as you please.
Don't like the rounded corners? Remove corner radius
Don't like the colors? Change the colors, etc.
Done!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Generally, these are the steps to change the code of anything you don't like. Just find the source code and figure out what to change. If you follow the ProgressBar source code, you will find a file called progress_horizontal.xml that it references. Basically how I solve all my XML problems.

Just make use of Material ProgressIndicator which has no hidden margin.
<com.google.android.material.progressindicator.ProgressIndicator
android:id="#+id/progressBar"
style="#style/Widget.MaterialComponents.ProgressIndicator.Linear.Indeterminate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indicatorColor="#color/colorPrimary"
app:trackColor="#color/colorAccent" />

<ProgressBar
android:layout_marginTop="-8dp"
android:layout_marginLeft="-8dp"
android:layout_marginRight="-8dp"
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:indeterminate="false"
android:indeterminateTint="#color/white"
android:max="100"
android:paddingStart="8dp"
android:paddingRight="0dp"
android:progressDrawable="#drawable/progress_bg" />

<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/progressBar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:indeterminate="true"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>

set height value you want in java file, most important is setMaxHeight.
progressBar.setMinHeight(heightYouWant);
progressBar.setMaxHeight(heightYouWant);
it work for me!

A simple no-tricks solution which is compatible with any version of Android and doesn't need external libraries is faking ProgressBar with two Views inside LinearLayout. This is what I ended up with. Looks pretty neat and this approach is quite flexible - you can animate it in funky ways, add text etc.
Layout:
<LinearLayout
android:id="#+id/inventory_progress_layout"
android:layout_width="match_parent"
android:layout_height="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/inventory_progress_value"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/inventory_progress_remaining"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Code:
public void setProgressValue(float percentage) {
TextView progressValue = (TextView) findViewById(R.id.inventory_progress_value);
TextView progressRemaining = (TextView) findViewById(R.id.inventory_progress_remaining);
LinearLayout.LayoutParams paramsValue = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
LinearLayout.LayoutParams paramsRemaining = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
paramsValue.weight = (100 - percentage);
paramsRemaining.weight = percentage;
progressValue.setLayoutParams(paramsValue);
progressRemaining.setLayoutParams(paramsRemaining);
}
Result (with some elevation added):

The best solution should be
android:minHeight="0dp"
No workaround and works like a charm.

One simple way to move the Progressbar up that does not require any additional views or fiddling with the margins is to use the attribute android:translationZ
That way you could either use it in the XML
<Progressbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:translateY="-6dp"
/>
or
use it from within a style
<style name="MyTheme.Progressbar.Horizontal" parent="Widget.AppCompat.Progressbar.Horizontal">
<item name="android:translateY">-6dp</item>
</style>
and then reference it in the Layout like this
<Progressbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
style="#style/MyTheme.Progressbar.Horizontal"
/>

Make the size of the progressBar really big (i mean height) and then place it into a frameLayout of the size that you wish your progressBar needs to be.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="10dp">
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:backgroundTint="#android:color/transparent"
android:indeterminate="true"
android:indeterminateTint="#color/white" />
</FrameLayout>

Here's a simple material horizontal progress bar without adding a file, scaling, or changing the dimension
style="#android:style/Widget.ProgressBar.Horizontal"
android:progressTint="Your Progress Color"
android:progressTintMode="src_over"
android:progressBackgroundTint="Your Background Color"
android:backgroundTintMode="src_over"
This works by coloring over the progress or background color presented in Widget.ProgressBar.Horizontal

Android - border for button

How do I add a border to a button? Is it possible to do this without resorting to use of images?

Step 1 : Create file named : my_button_bg.xml
Step 2 : Place this file in res/drawables.xml
Step 3 : Insert below code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
Step 4: Use code "android:background="#drawable/my_button_bg" where needed eg below:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text"
android:background="#drawable/my_button_bg"
/>

• Android Official Solution
Since Android Design Support v28 was introduced, it's easy to create a bordered button using MaterialButton. This class supplies updated Material styles for the button in the constructor. Using app:strokeColor and app:strokeWidth you can create a custom border as following:
1. When you use androidx:
build.gradle
dependencies {
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.0.0'
}
• Bordered Button:
<com.google.android.material.button.MaterialButton
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MATERIAL BUTTON"
android:textSize="15sp"
app:strokeColor="#color/green"
app:strokeWidth="2dp" />
• Unfilled Bordered Button:
<com.google.android.material.button.MaterialButton
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UNFILLED MATERIAL BUTTON"
android:textColor="#color/green"
android:textSize="15sp"
app:backgroundTint="#android:color/transparent"
app:cornerRadius="8dp"
app:rippleColor="#33AAAAAA"
app:strokeColor="#color/green"
app:strokeWidth="2dp" />
2. When you use appcompat:
build.gradle
dependencies {
implementation 'com.android.support:design:28.0.0'
}
style.xml
Ensure your application theme inherits from Theme.MaterialComponents instead of Theme.AppCompat.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
• Bordered Button:
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MATERIAL BUTTON"
android:textSize="15sp"
app:strokeColor="#color/green"
app:strokeWidth="2dp" />
• Unfilled Bordered Button:
<android.support.design.button.MaterialButton
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UNFILLED MATERIAL BUTTON"
android:textColor="#color/green"
android:textSize="15sp"
app:backgroundTint="#android:color/transparent"
app:cornerRadius="8dp"
app:rippleColor="#33AAAAAA"
app:strokeColor="#color/green"
app:strokeWidth="2dp" />
Visual Result

Create a button_border.xml file in your drawable folder.
res/drawable/button_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFDA8200" />
<stroke
android:width="3dp"
android:color="#FFFF4917" />
</shape>
And add button to your XML activity layout and set background android:background="#drawable/button_border".
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_border"
android:text="Button Border" />

create drawable/button_green.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#003000"
android:centerColor="#006000"
android:endColor="#003000"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="2px" android:color="#007000" />
</shape>
and point it out as #drawable/button_green:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/button_green"
android:text="Button" />

Please look here about creating a shape drawable
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Once you have done this, in the XML for your button set android:background="#drawable/your_button_border"

If your button does not require a transparent background, then you can create an illusion of a border using a Frame Layout. Just adjust the FrameLayout's "padding" attribute to change the thickness of the border.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1sp"
android:background="#000000">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text goes here"
android:background="#color/white"
android:textColor="#color/black"
android:padding="10sp"
/>
</FrameLayout>
I'm not sure if the shape xml files have dynamically-editable border colors. But I do know that with this solution, you can dynamically change the color of the border by setting the FrameLayout background.

In your XML layout:
<Button
android:id="#+id/cancelskill"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_weight="1"
android:background="#drawable/button_border"
android:padding="10dp"
android:text="Cancel"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="20dp" />
In the drawable folder, create a file for the button's border style:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#f43f10" />
</shape>
And in your Activity:
GradientDrawable gd1 = new GradientDrawable();
gd1.setColor(0xFFF43F10); // Changes this drawbale to use a single color instead of a gradient
gd1.setCornerRadius(5);
gd1.setStroke(1, 0xFFF43F10);
cancelskill.setBackgroundDrawable(gd1);
cancelskill.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
cancelskill.setBackgroundColor(Color.parseColor("#ffffff"));
cancelskill.setTextColor(Color.parseColor("#f43f10"));
GradientDrawable gd = new GradientDrawable();
gd.setColor(0xFFFFFFFF); // Changes this drawbale to use a single color instead of a gradient
gd.setCornerRadius(5);
gd.setStroke(1, 0xFFF43F10);
cancelskill.setBackgroundDrawable(gd);
finish();
}
});

I know its about a year late, but you can also create a 9 path image
There's a tool that comes with android SDK which helps in creating such image
See this link: http://developer.android.com/tools/help/draw9patch.html
PS: the image can be infinitely scaled as well

<com.google.android.material.button.MaterialButton
android:id="#+id/addBtn"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="150dp"
android:layout_height="80dp"
android:gravity="center"
android:backgroundTint="#android:color/transparent"
android:textColor="#color/blue"
app:cornerRadius="8dp"
app:strokeColor="#color/blue"
app:strokeWidth="2dp"/>

With the Material components library just use a MaterialButton with the Widget.MaterialComponents.Button.OutlinedButton style.
You can customize color and width with the strokeColor and strokeWidth attributes
<com.google.android.material.button.MaterialButton
....
style="?attr/materialButtonOutlinedStyle"
app:strokeColor="#color/colorPrimary"/>
With Jetpack compose use an OutlinedButton.
Use the border attribute to customize width and color.
OutlinedButton(
onClick = { },
border = BorderStroke(1.dp, Color.Blue),
) {
Text(text = "BORDER")
}

In your drawable folder create a drawable file called gradient_btn
and paste the code below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#7BF8C6"
android:centerColor="#9DECAD"
android:endColor="#7BF8C6"
android:angle="270" />
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
/>
<stroke android:width="3px" android:color="#000000" />
</shape>
Then in your Button code in xml call the file you created:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#drawable/gradient_btn"/>
Output - Will be a button with gradient and border.
Note - You can change the Hexa decimal codes of the buttons as you wish and also you can change the stroke width.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

How to make ScrollView transparent? - android

Instead of setting the background, use android:scrollbarThumbVertical="#null"

Related

Remove custom dialog color outside the rounded corner in android

How can I remove the smell line under the EditText?

Programmatically change LAYOUT color in #drawable xml

Remove vertical padding from horizontal ProgressBar

Android - border for button

Categories

Resources