I've been searching any solution for hours, but couldn't find one. So here's my problem, as i've seen it's really common problem:
Thumb in seekbar, is not getting centered... I've made this custom seekbar by 9patch.
It's been said that i'm supposed to set its minHeight and maxHeight to same size in many responses in stackoverflow. But even though i set them, it still shows up like this...
It is really disturbing, is there any way to work around this?
And here is xml:
<SeekBar
android:id="#+id/seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/padding_small"
android:max="100"
android:progress="60"
android:maxHeight="#dimen/playerSeekBarHeight"
android:minHeight="#dimen/playerSeekBarHeight"
android:progressDrawable="#drawable/progress_bar_player"
android:thumb="#drawable/player_sound_thumb"
android:paddingLeft="6dp"
android:paddingRight="6dp" />
Thanks in advance.
Couldn't find a way to solve this, still don't know what is the issue. Why is setting minHeight and maxHeight to same size fix for everyone but not in my case? Anyway, so i put some empty pixels into thumb image and it works.
But i would appreciate any more effective way to handle with this situation.
Yes the min height max height didn't work for me either. My issue was when I decided to create a layout for higher res screens. When i made each row in my screen larger I though I could just "match_parent" the height and it would be all good. But no I had the problem above.
I solved it by going back to "wrap_content" for the height, removing the minHeight and maxHeight tags and then using layout_marginTop to move it down to centre in the horizontal linearLayout.
I was using the default seekbar.
Hope this helps someone!
Try This
seekbar_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<clip >
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
android:src="#drawable/progress_bar_player">
</bitmap>
</clip>
</item>
seekbar_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/whitepatch">
</nine-patch>
</item>
<item android:id="#android:id/secondaryProgress">
<clip >
<shape >
<gradient
android:angle="270"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:startColor="#80028ac8">
</gradient>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg">
</item>
xml
<SeekBar
android:id="#+id/seekbar_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="420dip"
android:layout_height="wrap_content"
android:layout_marginLeft="0dip"
android:layout_marginTop="12dip"
android:maxHeight="9dp"
android:minHeight="9dp"
android:progressDrawable="#drawable/seekbar_progress"
android:thumb="#drawable/player_sound_thumb" />
From this Link Custom Seek BAr
In my case too setting min height and max height did not work.
I did it by playing with the minHeight and maxHeight values. Setting minHeight greater than maxHeight by nearly 2 times or more did the trick for me. Try setting different values for the both. Should workout...
Related
How can I set the scrollbar track thinner than the thumb in RecyclerView without using custom scrollView
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:fadeScrollbars="false"
android:scrollbarSize="4dp"
android:scrollbarThumbVertical="#drawable/scroll_view_gradient"
android:scrollbarTrackVertical="#color/scroll_bar_track"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
I did this on my own, it looks 'nice' & it acts 'somewhat nice', but some things aren't tested enough, should be somewhat helpful at least. Can check it on this link as well. Also, this first is just visually, if you want to customize the length of the thumb, then you need to create a custom view and manipulate the offset. Since it isn't a part of the question(and this answer), I didn't write it, it can be found in the link above if someone does need it.
bottom, left, right & top are insets, you can think of them as paddings, they don't affect the layout size, but you should keep the top & bottom insets on track and thumb on the same size(for vertical recyclerviews, horizontal ones should use left & right).
Also manipulates the thickness of thumb and track, and stroke width places transparent pixels, so that track seems smaller than it actually is. Kudos to #Razvan S.
scrollbar_track.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape>
<solid android:color="#color/scroll_bar_color" />
<stroke
android:width="3dp"
android:color="#android:color/transparent" />
<size android:width="4dp"
android:height="4dp" />
</shape>
</item>
</layer-list>
This doesn't need width & height properties, because recyclerview calculates the length automatically, and track width sets the thumb width.
thumb_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<solid android:color="#color/scroll_bar_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
styles.xml
<style name="scrollbar_style">
<item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
<item name="android:scrollbars">vertical</item>
<item name="android:fadeScrollbars">false</item>
<item name="android:scrollbarThumbVertical">#drawable/thumb_shape</item>
<item name="android:scrollbarTrackVertical">#drawable/scrollbar_track</item>
</style>
recyclerview tag in your layout: style="#style/scrollbar_style"
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/scrollbar_style" />
Now comes the 2nd part, if you want to manipulate the length of the thumb, you need to calculate the offset on your own. I did that by creating a Custom RecyclerView which implements ScrollingView, and calculated manually everything.
Hope this helped you, it did the job for me.
Also for those of you wondering, I used layer-list because it worked as I wanted it, if I switched to something else I didn't get the desired behavior. It's probably a bit flawed, and there might be a better solution somewhere out there, but I did this by trial&error until I produced something I could work with.
I want to create vertically repeating background for whole app that is adjusted to width of phone.
My bitmap is:
resources/drawable/repeating_bitmap.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/app_bg_003_phone"
android:gravity="fill_horizontal"
android:tileModeY="repeat" />
My style is:
resources/values/style.xml
<style name="AppTheme" parent="BaseTheme">
<item name="android:windowBackground">#drawable/repeating_bitmap</item>
</style>
And my problem is here:
As you can see, instead of whole image only the edge is stretched, Weird.
How can i achieve horizontally stretched and vertically repeated background?
I have used proper flags on bitmap... (android:gravity="fill_horizontal" android:tileModeY="repeat")
If this could help this im attaching original image that im repeating (mdpi)
I want to use repeating bitmap to save up on memory. Also this is only jpeg pattern that is available for me at the moment.
Update
Now i know why only edge is streched: From documentation:
https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable
"Gravity is ignored when the tile mode is enabled. Default value is "disabled"."
That means when i got tileModeY="repeat", then tileModeX by default as i enabled tile mode overall, must be tileModeX="clamp" which is:
"clamp Replicates the edge color."
Any ideas how i can use tileMode and gravity at the same time? I tried to insert this bitmap into another view where gravity would be "fill_horizontal". Sadly without success.
I found a pretty fancy way of achieving this:
Remove the tileMode attribute from the "bitmap"
Create a "layer-list" root tag in the XML
Add an "item" tag around the "bitmap" with top and height attributes (set the height to that of the image)
Copy&paste this "item" as many times as you think you need it to fill the display
Enter the proper top value for each of the "item" tags
Here is an example where the image for the background is 116 pixel high. Therefore each of the following tags has a top value increased by this height.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="116dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="232dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="348dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="464dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="580dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
</layer-list>
I would like to add padding or space to the logo on both the sides and the code is added here.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item>
<bitmap android:gravity="center" android:src="#drawable/logo" />
</item>
</layer-list>
I had the same problem, I tried to add padding to the item but it didn't change anything.
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="center"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
The problem was gravity="center", with it the padding were not applied.
Try using android: gravity = "clip_horizontal"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/splash_color" />
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="clip_horizontal"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
</layer-list>
Use
android:bottom=""
android:left=""
android:right=""
android:top=""
Try this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<bitmap
android:gravity="center"
android:src="#drawable/logo" />
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/ns_theme" />
<item
android:drawable="#drawable/ic_logo"
android:left="#dimen/_16sdp"
android:right="#dimen/_16sdp" />
</layer-list>
The problem is probably that your logo is too big (The image file you are using has a pixel width that exceeds the pixel density of the device you are running it on).
Whether or not that is the case, it would probably be better to approach the problem considering the possibility that it could be run on ANY Android device with ANY screen size.
Considering that, there are several options better than simply adding padding in xml... For example, you could:
1) Wrap the image inside another view object that you can control the size and postion of as Bhavik Makwana suggested.
2) Just simply re-edit/resample your image to match the width of your target device and include the white space you desire in the image itself.
3) Design full splash screens that match the entire screen exactly (which combine foreground and background into one image), for example one with 1080 x 1920 resolution, and others for other screen sizes. That way you can control exactly how you want it to look, and the resolution will be 1-1 with no anti-aliasing or resampling.
4) Use this "9-patch" image approach to define an absolute width and height for your logo, but allow stretching of the white space around it to accommodate different screen sizes.
or, finally, the best way:
5) Use a constraint layout with guidelines in order to define the width of your logo in terms of percentage of parent width rather than absolute value.
Some other advice: Unless you are using technique #2 above, make sure you are using a logo.png file like this:
... NOT like this:
KaBOOYOW!
-Boober.
try this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap android:src="#drawable/logo"
android:gravity="center" />
</item>
</layer-list>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_height="match_parent"
android:layout_width="match_parent">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:gravity="center"
android:background="#mipmap/logo" />
</layer-list>
I'm using Xamarin Android in Visual Studio and trying to do a simple task of displaying two rectangles, one above the other. When I use a measure size of "px" everything works as expected, but when I use "dp", the second rectangle does not get rendered. Here's my xml file with the rectangles:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" >
<shape android:shape="rectangle">
<solid android:color="#6EF562" />
</shape>
</item>
<item android:top="57dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
Note the "dp" above. That code does not work. But if changed to "px", it works as expected.
Here's the source of my Main.axml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E6EDF0"
android:paddingTop="50dp">
<Button
android:id="#+id/MyButton"
android:layout_width="178.1dp"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:layout_gravity="center"
android:padding="5dp"
android:layout_margin="5dp"
android:textColor="#000000"
android:background="#drawable/splitColors" />
Obviously, I want to use "dp" rather than pixels "px" for scaling reasons taking into different device form factors, but I can't get this to work.
The height of the button, is set at wrap_content. And in your drawable you specify you want to draw the black bottom part at 57dp. So if you're button smaller than 57dp it will never show. That's why it does the job at pixels, because 57px isn't that high. So if you want to use DP make sure your button is at least as high as the value you give <item android:top="57dp">
I'm playing a bit with Android developing some sample applications and came across issue I can't get over with. I'd like to change width of "bar" of SeekBar view.
What I want could be better seen on screenshot provided
http://i.stack.imgur.com/XczAf.png
Could some please be so kind and help me out?
Thanks a lot in advance
You can use thumb drawable for to change hight and and thumb image
Use below line in seekbar xml file
android:thumb="#drawable/seekbar_thumb_draw"
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumb="#drawable/seekbar_thumb_draw" />
//seekbar_thumb_draw.xml
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape>
<size
android:height="40dp"
android:width="40dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/seekbar_thumb_image"/>
seekbar_thumb_image is image for thumb that u want
Photshop the exact size that you want. Then save it in your drawables folder. Then reference it in the xml code for your seekbar.
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="wrap_contentt"
android:layout_height="wrap_content"
android:thumb="#drawable/seek_thumb_verywidebar" />