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" />
Related
I am trying to create a capsule/pill shaped button in XML. I have defined a drawable and set it as the background of my button, but in the preview, and when I run the app, it's displaying as a blue rectangle, despite the background drawable being a white oval. Does anyone know why that might be happening?
Here's the button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/search_box"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:background="#drawable/button_capsule"
android:text="#string/search"
android:textColor="#color/precipLightBlue"/>
And here's the background drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp" />
<solid android:color="#android:color/white" />
</shape>
To have a capsule/pill shaped button you can use the MaterialButton in the official Material Component library using the app:cornerRadius attribute.
<com.google.android.material.button.MaterialButton
android:layout_width="100dp"
app:cornerRadius="32dp"
..../>
With the version 1.1.0 you can also customize the shape of your component using the app:shapeAppearanceOverlay attribute
<com.google.android.material.button.MaterialButton
....
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.ButtonRounded"
.../>
In the style define:
<style name="ShapeAppearanceOverlay.ButtonRounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>
You can also try to use the ExtendedFloatingActionButton:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/exfab"
android:layout_width="wrap_content"
.... />
You put a shape that you didn't defined. To define an oval you should put the shape="oval" option in the tag. Although i think you want a rectangle with rounded corners as i see in your code.
Also 1000dp radius is a lot, maybe that's making an issue.
Define size too. Because that shape doesn't have any size and may not appear as you are using wrap_content in the button definition
Try this:
<corners android:radius="30dp" />
<solid android:color="#android:color/white" />
<size
android:width="200dp"
android:height="50dp"/>
If you want an oval remove the corners tag and add android:shape="oval" as property of shape tag
Here is the code regarding button drawable background.
Xml code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|top"
android:background="#color/colorLightPurple">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:background="#drawable/button_bg"
android:text="Search"
android:textColor="#color/colorBlue"/>
</LinearLayout>
For button background , please add same drawable file
seems like you're doing everything right. Just a small addition, try adding android:shape="rectangle" in the shape tag.
This is what button_capsule.xml should look like.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#android:color/white" />
</shape>
Hope this works. All the best.
In Material design version 1.2.0 they have fixed this issue and added a property for setting background for Material Button
here is the dependency for the latest version
com.google.android.material:material:1.2.0
and also if u want to remove the space between the drawable top and bottom so that the drawable get the whole width and height use these 2 properties
android:insetTop="0dp"
android:insetBottom="0dp"
if want to explore more about the properties u can refer to the release of library and can check all the properties.
https://github.com/material-components/material-components-android/releases/tag/1.2.0
use this.
<androidx.appcompat.widget.AppCompatButton
.....
/>
I want to build a button with 3 different color in the background like the attached image, and I have no idea how to do that with shapes
Thank you for you help.
Use ImageButton and use above image as background of that button:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/YOUR_BTN_IMG"/>
1st make a xml file in drawable folder with bg1 name and put this code
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#4CAF50"
android:endColor="#2E7D32"
android:startColor="#b5e7b7"
android:type="linear" />
</shape>
than where ever you want it use like
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/bg1"/>
here u change angle,start end and center color as per your requirement
Here's my aching point. I'm new to android developoment and I want to create the splash screen to an app. presently, after searching in this forum, i found methods of implementing the splash screen from a picture but that's not what i want. I want the splash screen to be a color with a varying gradient. Attached to this question is a picture to illustrate what i mean.
Unfortunately, couldn't paste an image due to my low reputation points. Nonetheless, here's a link to an gradient image.
Further explaining, i want the color to be generated by either java or xml code dynamically so that, I won't have to bother about different screen sizes as all I'll have to do is to generate everything for full screen display. What's I'm trying to avoid is using picture assets if possible.
Help Plz. Thanks
create a shape, add it to drawables like : <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#color/gradient_start" <!--this first color -->
android:endColor="#color/gradient_end" <!--this second color -->
android:angle="-270" /> <!--gradient angle -->
</shape>
and then on your splash.xml background, set background to the shape
add
<LinearLayout
android:id="#+id/ranking_order"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/list_grad"
/>
Also gradients and colors may be declared directly into splash.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--<color android:color="#2196F3"/>-->
<shape android:shape="rectangle">
<gradient
android:startColor="#2196F3"
android:endColor="#1976D2"
android:angle="-90"
/>
</shape>
</item>
<item>
<bitmap
android:src="#drawable/logo"
android:gravity="center"
/>
</item>
</layer-list>
This is what I am trying to achieve
The black rectangle is an image asset which i need to move left and right on related touch events/drags
Being relatively new to Android , I am finding this difficult to implement.
So was hoping I could get some tips,guides,examples if there are any.
EDIT:
I Have tried viewflipper but that is not what I need here,
I tried making a slider like a seek bar , but didn't work out.
Some one suggested that I use a framelayout over the main image to slide but I don't know how to do it.
So any help which will help me out here is appreciated
Use SeekBar because it suits your needs completely.
First create a drawable xml file named "rect_border.xml" in res/drawable folder with these contents:
// **EDITED**
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:color="#000000"
android:width="5dp"
/>
// change the width to any value that suits your needs.
// set the height property greater than your image height
<size android:width="50dp" android:height="360px" />
</shape>
Then in your layout:
// **EDITED**
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="300px"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:src="#drawable/your_image"
/>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:thumb="#drawable/rect_border"
android:progressDrawable="#android:color/transparent"
/>
</RelativeLayout>
I tested it and I'm sure it's actually what you want (as described).
So what's the problem about the SeekBar?
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...