I customize my seekbar like below:
<SeekBar android:id="#+id/progress_seekbar" android:background="#drawable/play_progress_bg"
android:layout_centerHorizontal="true" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginBottom="-9dp"
android:layout_above="#id/playwidget" android:progressDrawable="#drawable/progress_seekbar_style"
android:thumb="#drawable/thumb_progress" />
in my progress_seekbar_style.xml file, I specified it like this:
<?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:drawable="#drawable/play_progress_01" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/play_progress_02" />
<item android:id="#android:id/progress" android:drawable="#drawable/play_progress_03"/>
</layer-list>
I want to use this seekbar customization for different screen size; but when it display on the large screen like 600x1024, the seekbar will repeat the picture which I set in "#android:id/background,secondaryProgress/progress " , not stretch my pictures. and I need it automatically stretch my picture to fill parent width. that is what I want, but it just repeat the picture.
can you help? thanks.
Try using nine-patch images. Nine-patch is stretched if you use it for background (even for progress or seek bar).
For testing just rename your image from img.png to img.9.png
Related
I would like to add arrows as dividers between my listview items. I've gotten pretty far, but my arrow is stretched and there is no option to set the divider width. Here is what I have so far...
In my styles.xml:
<style name="dividedListStyle" parent="#android:style/Widget.ListView">
<item name="android:cacheColorHint">#android:color/transparent</item>
<item name="android:divider">#drawable/baseline_expand_more_black_24</item>
<item name="android:dividerHeight">50dp</item>
</style>
Then in my layout file:
<ListView
android:id="#+id/checklist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/menu"
android:layout_alignParentTop="true"
style="#style/dividedListStyle">
</ListView>
This is what the divider looks like:
This is what I need:
The ListView divider is stretched to full width of the ListView and your selected height (<item name="android:dividerHeight">50dp</item>). That's why your image is stretched.
To avoid it and keep the size/ratio unchanged, there are such ways:
Use 9-patch drawable. You may use a default Android 9-patch editor to convert your arrow to 9-patch (you still need some basic knowledge about how 9-patch works)
Make your arrow drawable a part of the drawable or a layer-list drawable:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="#drawable/baseline_expand_more_black_24">
</bitmap>
Can't really understand why this is happening. There are lines under all my custom rating bars
Rating Bar
Here is the drawable I am using
<?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:drawable="#drawable/star_disabled" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/star_disabled" />
<item android:id="#android:id/progress" android:drawable="#drawable/star_enabled" />
Here is the XML
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ratings_bar"
android:stepSize="1"
android:rating="3"
android:progressDrawable="#drawable/ratingbar"
android:numStars="5" />
Does any have a clue on how to fix this? Really not sure what is wrong. The image obviously does contain long streaky marks
I have faced this in the past. Use a layout_margin in the RatingBar. Also, I suspect that the images that you are for the stars may not have any margin themselves and the stars are touching the border of the image. Try to use a slightly smaller star image, with a little white margin (not transparent) in the image itself, to avoid this problem
I'm trying to create a custom RatingBar for one of my apps. I've followed this tutorial: http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/
The problem is that my RatingBar has always the same size and it's always filled. I try to show different ratings (0,1,2,3,4...) but the rating bar it's the same in all the cases...
I have the ratingBar:
<RatingBar
android:id="#+id/ratingBar"
style="#style/MyRatingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"/>
My Style:
<style name="MyRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_list</item>
<item name="android:minHeight">57dip</item>
<item name="android:maxHeight">57dip</item>
</style>
The layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background"
android:drawable="#color/white_text" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#color/white_text" />
<item android:id="#android:id/progress"
android:drawable="#color/red_circle" />
Thank you.
In your <RatingBar> use:
android:numStars to define how many red_circle are used for the full scale of the bar.
android:rating to set the default rating level.
android:stepSize to define the step size of your RatingBar.
<Edit>
I don't believe RatingBar is designed to work using a straight fill color as the progress drawable, which is what you have currently. A color has no dimensions, so drawing 2, 3 or 4 of them has no meaning.
It is designed to work with an image file like the default star png files.
Change your layer-list so the progress drawable points to a Bitmap, or 9Patch, and it works fine. <RatingBar> extends ProgressBar, which uses 9Patchs for the progress drawable.
I'd like to create and edittext box with a custom offset background like this:
How should I go about doing this?
I'd go with a LinearLayout containing your border as the background drawable, same padding for top, left and right and higher padding at bottom.
Then, setting a custom, stateful 9-patch drawable for your EditText based on your background.
In fact, if you make your background 9-patched, you can use it both in your LinearLayout and your EditText.
Also, you don't have to make your EditText drawable stateful; but I strongly advise you to do so, so the user can actually get visual feedback from your EditText.
Sample code:
layout/your_layout.xml
...
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_border"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="10dip"
android:paddingBottom="30dip">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_border_statelist" />
</LinearLayout>
...
drawable/bg_border_statelist.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/bg_border_selected" />
<item android:state_focused="true"
android:drawable="#drawable/bg_border_selected" />
<item android:drawable="#drawable/bg_border" />
</selector>
Assuming your background image is 9-patch and called bg_border.9.png, and the respective 9-patch version is called bg_border_selected.9.png.
Cheers!
So what I am trying to do is display background for list row element. I've created row layout and applied style :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout1" android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#style/product1" >
I've set style as:
<style name="product1">
<item name="android:background">#drawable/product1</item>
</style>
and product1.xml as :
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/prod1"
android:antialias="true"
android:dither="true"
android:filter="false"
android:gravity="right"
android:scaleType="fitXY" />
where prod1.9.png is a nine patch set to be scalable top and left (so I want to have my image in right lower corner)
But the problem I am facing now is that icon is displayed in the corner while 9patch is not scaled left and up.
If instead of using style I put android:background=#drawable/prod1 then it scales but every row get ridiculously big. Any ideas?
I haven't verified this with your code, but the first thing that comes to mind is (assuming using 'android:background' instead of the style), instead of this on the row layout:
android:layout_height="fill_parent"
set a fixed height:
android:layout_height="30dp"
It's not as flexible, but it might suit your needs.