Seekbar Progress Drawable Resizing different in API 22 vs API 23 - java

I'm using this library for VerticalSeekBars in my Android application. In my app, I'm laying multiple vertical seekbars horizontally (like about 10-15?) using LinearLayout and layout_weight properites. In addition, I'm using a thumb that is supposed to be bigger than the progress (essentially laying on top of the progress) and a custom drawable for the progress as such:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:height="10dp"
android:gravity="center_vertical">
<shape android:shape="rectangle">
<corners android:radius="500dp"/>
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>
On API 23 (which I believe is Marshmallow?), everything lines up correctly and resizing properly across different screen sizes. Awesome. However, on API 22 and below, the progress drawable doesn't adjust itself; instead, it increases it size to have the seekbar thumb fit inside the progress. I've tried to resize the drawable in my code but that still doesn't do anything either. I have drawn it out to show what I mean:
How do I get API 22/below to match the same behavior API 23 is achieving with the seekbar?
Here's an example of my VerticalSeekBar setup:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.5">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
android:layout_width="0dp"
android:layout_height="0dp"
android:max="100"
android:progress="50"
app:seekBarRotation="CW270"
android:progressDrawable="#drawable/custom_track"
android:splitTrack="false"/>
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="0.5">
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
android:layout_width="0dp"
android:layout_height="0dp"
android:max="100"
android:progress="50"
app:seekBarRotation="CW270"
android:progressDrawable="#drawable/custom_track"
android:splitTrack="false"/>
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>
</LinearLayout>
Thanks!

Set maxHeight like this:
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
...
android:maxHeight="2dp"
.../>

Related

How do I fit the border to the LinearLayout

how do I fit the border exactly to its contents (through xml)
here's my border:
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<stroke android:color="#000000" android:width="2dp"/>
<padding android:top="100dp"/>
</shape>
</item>
and my layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="400dp"
android:layout_height="150dp"
android:orientation="horizontal"
android:background="#drawable/border"
android:layout_marginTop="20dp"
android:layout_marginLeft="6dp"
android:gravity="center"
android:paddingTop="25dp">
here's a picture:
It looks like you are trying to implement RecyclerView and your layout is the ViewHolder.xml for the element.
I would suggest setting the viewHolder's width to match_parentand height to wrap_content instead of specifying fixed pixel values to achieve what you want.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/border"
android:layout_marginTop="20dp"
android:layout_marginLeft="6dp"
android:gravity="center"
android:paddingTop="25dp">
I would remove the padding property from your Border asset, rather suggest to manage the spacing through the ViewHolders layout.

How to draw angled rectangle as background for ViewPager android

I want to implement a ViewPager having angled rectangle as background as shown in the image. I have tried to get it done by setting xml as background. But it only displays properly if we give image in that xml itself and if I try to manage it runtime then it is not taking that angled background.
This is the drawable I have attached to custom viewpager layout
<item android:top="300dp"
android:bottom="-300dp"
android:left="0dp"
android:right="-300dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#color/white"/>
</shape>
</rotate>
AND this is the custom viewpager layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/custom_imageview">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/rl_image"
android:layout_marginLeft="20dp"
android:layout_marginTop="-60dp">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/fashion1"
app:civ_border_color="#FFF"
app:civ_border_width="1dp" />
</RelativeLayout>
</RelativeLayout>
This is how it should display
Can anyone please tell me how to do it?
If you need to learn how to create a diagonal cut you could have a look at this tutorial:
https://medium.com/#adinugroho/create-diagonal-cut-view-in-android-5a376eca6a1c
If you need a library to do it for you then have a look at this library:
https://github.com/florent37/DiagonalLayout
This is how it should display
checked this link.
based on above link i guess as page swipes you want change background.
solution :
use constraint_layout or frame_layout.
add view pager as match_parent in height and width.
angle view use it and view on top of view_pager.
suggestion : use constraint layout.
note : above solution will not change view_pager dimensions (dont change it since view is complex, if you change behaviour unpredictable). Only you end up with place custom view on top of pager.

setElevation does not show shadow

I can not draw the shadow with setElevation.I do not want to use a drawing to do this. Here is the code:
This is the parent.
Page.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/background">
<LinearLayout
android:id="#+id/pp_cont_new_list"
android:background="#color/background"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:paddingTop="5dp">
</LinearLayout>
</LinearLayout>
Here I build a simple layout.
PersonalPage.Java
final LinearLayout ROOT = (LinearLayout) findViewById( R.Id.pp_cont_new_list);
final LinearLayout LL = new LinearLayout(context); //Container
LL.setLayoutParams (new LinearLayout.LayoutParams(
Generic.PARAM_MP, //eq. match_parent
(int) context.getResources ().getDimension (R.dimen.bt_preview_list_height)
));
LL.setBackgroundResource (R.drawable.background_new_list);
LL.setElevation (5f);
LL.setClickable (true);
ROOT.addView( LL );
/*
* other code inner the container
*/
this background
background_new_list.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#color/background"/>
</shape>
</item>
<item>
<ripple android:color="#color/textColorAlpha"/>
</item>
</layer-list>
I would like an explanation of my error.
And I would also like to know what to use for pre-LOLLIPOP.
set elevation just doesnot work for pre-lolipop
You can create a custom button image that has a shadow and set it as button background..or any view's background to give shadow effect
use ViewCompat.setElevation(your_view(in your case LL), elevation_amount);
but for devices pre-Lollipop this will not have effect,
for pre-Lollipop cases you might use:
android:background="#android:drawable/dialog_holo_light_frame"
This is working if you don't mind doing things in xml. I tried it out. I did not have background color value that you are using so I used a different color for parent layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E8E8E8"
android:paddingBottom="20dp"
android:clipToPadding="false"
android:translationZ="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/background_new_list"
android:clipToPadding="false"
android:elevation="25dp"
android:orientation="vertical"
/>
Note: I am using a higher elevation value just to make it easier to check if it's working. you can adjust it to what you need.

Remove padding in horizontal progress bar

In our application we need an indeterminate progress bar, like so:
We can achieve this by setting a negative margin on the ProgressBar, like this:
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:marginTop="-7dp"
android:visibility="#{loading ? View.VISIBLE : View.GONE}" />
BUT because ConstraintLayout does not support negative margins, it will look like this:
OK, the negative margin was a hack. Let's replace it with a different hack, shall we? Let's introduce our custom view CustomProgressBar, which extends ProgressBar and overrides its onDraw method, like this:
#Override
protected void onDraw(Canvas canvas) {
int marginTop = dpToPx(7);
canvas.translate(0, -marginTop);
super.onDraw(canvas);
}
But all of this smells like bad code. There has to be a better solution!
What would you recommend?
Solution that feels less like a hack: Wrap a huge ProgressBar in a smaller FrameLayout. That way the FrameLayout constrains its height, but the ProgressBar still shows in full.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="4dp">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_gravity="center" />
</FrameLayout>
Another way to do this is to use a Guideline and center ProgressBar between the parent top and the guideline.
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:paddingTop="-4dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="horizontal"
app:layout_constraintGuide_begin="4dp" />
I encountered the same problem as well. And like you said, I come across numerous solutions which all seem like a hack that might break something else down the line.
With that said, I came across one solution which is to use this library instead for progress bar.
One thing to note is, it tells you to integrate it by adding:
compile 'me.zhanghai.android.materialprogressbar:library:1.3.0'
However, when I used this, it gave me an error from an Android support library for Floating Action Bar. So I'll recommend you to use this instead:
compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'
A sample code snippet on how I used it:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/reviewProgressBar"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_below="#+id/my_toolbar"
android:indeterminate="false"
app:mpb_progressStyle="horizontal"
app:mpb_useIntrinsicPadding="false"/>
Hope this helps!
A dirty workaround I did was set the height of the ProgressBar closely to the to stroke width like so:
Progress bar:
<ProgressBar
android:id="#+id/pb_loading_progress"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2.1dp"
android:layout_below="#id/tb_browser"
android:max="100"
android:progressDrawable="#drawable/style_browser_progress_drawable"
android:visibility="invisible" />
Progress drawable:
<?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="line">
<stroke
android:width="2dp"
android:color="#color/colorPrimary" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</clip>
</item>
</layer-list>
Which looked like this:
You declared your view without any explicit height so it's height is being picked from the pre-defined style.
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:marginTop="-7dp"
android:visibility="#{loading ? View.VISIBLE : View.GONE}" />
"?android:attr/progressBarStyleHorizontal" will be searched in current theme and is stored in attrs.xml file. Since this defined by the platform it will obtain it's the value from there. As of writing this answer, I'm on android platform 29 and searching "?android:attr/progressBarStyleHorizontal" gives the following results
➜ values
pwd
/Users/vihaanverma/Library/Android/sdk/platforms/android-29/data/res/values
➜ values
grep -rin "progressBarStyleHorizontal" .
./themes_device_defaults.xml:126: <item name="progressBarStyleHorizontal">#style/Widget.DeviceDefault.ProgressBar.Horizontal</item>
./themes_device_defaults.xml:857: <item name="progressBarStyleHorizontal">#style/Widget.DeviceDefault.Light.ProgressBar.Horizontal</item>
./themes.xml:272: <item name="progressBarStyleHorizontal">#style/Widget.ProgressBar.Horizontal</item>
./themes_holo.xml:263: <item name="progressBarStyleHorizontal">#style/Widget.Holo.ProgressBar.Horizontal</item>
./themes_holo.xml:626: <item name="progressBarStyleHorizontal">#style/Widget.Holo.Light.ProgressBar.Horizontal</item>
./public.xml:148: <public type="attr" name="progressBarStyleHorizontal" id="0x01010078" />
./themes_material.xml:258: <item name="progressBarStyleHorizontal">#style/Widget.Material.ProgressBar.Horizontal</item>
./themes_material.xml:635: <item name="progressBarStyleHorizontal">#style/Widget.Material.Light.ProgressBar.Horizontal</item>
./styles_material.xml:1010: <item name="progressBarStyle">?attr/progressBarStyleHorizontal</item>
./attrs.xml:684: <attr name="progressBarStyleHorizontal" format="reference" />
➜ values
Opening one of the files which contain "progressBarStyleHorizontal" you will see minHeight defined in the style and is equal to 16dp.
<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
<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>
</style>
This is the cause of the extra padding you are getting. You can fix it by giving your view height and a scaleY value like below
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:indeterminate="true"
android:scaleY="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Use inside Linearlayout and you will success, the simple way
<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>

Android: give a webview rounded corners?

I'm trying to give my webView rounded corners.
Here is my code:
rounded_webview.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#000"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
And here is my webView:
<WebView
android:id="#+id/webView1"
android:layout_width="293dp"
android:layout_height="142dp"
android:layout_gravity="center_horizontal"
android:padding="5dip"
android:background="#drawable/rounded_webview"/>
But it simply won't work! Corners are not rounded...
This is a little quirk of Webview, it has a default background color of white, drawn in front of any drawables. You'll need to use the following code to make it transparent and show your drawable background:
WebView webview = (WebView)findViewById(R.id.webView1);
webview.setBackgroundColor(0);
The only way is wrap WebView element by other view (FrameLayout for example), and apply rounded corners background on external view.
Example:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dip"
android:paddingBottom="10dip"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:background="#drawable/white_rounded_area"
>
<WebView
android:id="#+id/web_view"
android:layout_width="300dip"
android:layout_height="400dip"
android:layout_gravity="center"
/>
</FrameLayout>
Where paddingTop and paddingBottom equals radius from drawable/white_rounded_area,
paddingLeft and paddingRight equals stroke width drawable/white_rounded_area.
Minus of this approach is top an bottom rounded panels can have different background color with web page inside WebView, especially when page scrolled.
You can use a CardView to contain the webview, and you just need to add the corner radius that you want with with app:cardCornerRadius :
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"> // HERE
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
And that's all
try this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<stroke
android:color="#drawable/black"
android:width="3dp"/>
</shape>
I use an image that looks like a picture frame, where I give the frame the rounded corners. I lay this picture frame over the view I'm trying to give the rounded corners to.
This gets over the problem in iBog's solution of background panels not working nicely.
The trick is to use a RelativeLayout; place your layout inside it.
Below your layout, add another ImageView, setting its background to a suitable masking image frame. This will draw that on top of your other layout.
In my case, I made a 9Patch file which was a grey background, with a transparent rounded rectangle cut out of it.
This creates the perfect mask for your underlying layout.
The XML code could be something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:layout_width="fill_parent">
<!-- ... INSERT ANY VIEW HERE ... -->
<!-- FRAME TO MASK UNDERLYING VIEW -->
<ImageView android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#drawable/grey_frame"
android:layout_alignTop="#+id/mainLayout"
android:layout_alignBottom="#+id/mainLayout" />
</RelativeLayout>
The full details can be found in my original answer here:
Android XML rounded clipped corners
None of the solutions worked for me.
It worked for me. Before loading data you need to set
webView.getSettings().setUseWideViewPort(true);
and applied you're drawable in XML file.
It worked for me.
Wrap the WebView with a FrameLayout, then set background,
clipToOutline and outlineProvider attributes on it
<FrameLayout
android:layout_width="350dp"
android:layout_height="400dp"
android:background="#drawable/rounded_rectangle"
android:clipToOutline="true"
android:outlineProvider="background">
<WebView
android:id="#+id/myWebView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

Categories