IF the progress is near the borders the progress line will be ahead or behind the thumb if padding and thumboffset is set for seekbar(See image):
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:thumbOffset="0dp"
android:thumb="#drawable/meterknob"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:background="#android:color/darker_gray"
/>
I want seekbar always like this!
How can I implement this. Please help me Thanks in advance
EDIT
When I applied Karthika's code . I got like below image. The problem here is it is not touching its background image's borders. I have to start it from the starting of background image.
set
<SeekBar
android:id="#+id/progressplay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:background="#drawable/violetborderbox"
android:thumb="#drawable/playbtn"
android:progressDrawable="#drawable/seekbar_progress"
android:layout_centerVertical="true"
android:paddingLeft="35dp"
android:layout_centerHorizontal="true"
android:paddingRight="35dp"/>
inside your seeekbar
and the drawable file is
<?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="#color/violetbg"
android:dither="true">
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"
/>
</layer-list>
my result was
Related
I want to change background color to my CardView in Android Studio, I want to use selector, but I dont know what I do
This in my code:
<androidx.cardview.widget.CardView
android:id="#+id/card_ordina"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
app:cardBackgroundColor="#color/orange"
app:cardCornerRadius="20dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="40dp"
android:background="#drawable/options"
android:backgroundTint="#F44336"
android:padding="10dp"
android:src="#drawable/carrello"
android:tint="#color/background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:fontFamily="#font/title"
android:text="ORDINA"
android:textColor="#color/background"
android:textSize="18sp" />
</androidx.cardview.widget.CardView>
You need to make a selector and set the following attributes to your CardView.
android:foreground="#drawable/card_foreground"
android:clickable="true"
android:focusable="true"
Here is the code for card_foreground.xml, add it in your project's drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#e0F5AD6E"/>
<corners android:radius="2dp" />
</shape>
</item>
<item android:state_focused="true" android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#0f000000"/>
<corners android:radius="2dp" />
</shape>
</item>
</selector>
You can change the state colors and radius according to your requirements. Now, when you click on the CardView the color will get changed.
I am using android studio, and I try to do some work on UI using some buttons.
I have created a background for some buttons, but when I apply this background on the buttons, the text inside the butons is not centered.
I think the marginof the button remains the same, whereas the applied background creates a smaller square than the marginn of the button. I don't know how to make the margin of the button fit the margin of the square coded in the background xml file.
Here the picture of the problem :
pic1
Here is the code of the background (bg_rectangle_grey.xml) :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
And here is the code of the xml file with the button :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/_15sdp"
android:style="?android:attr/buttonBarStyle">
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
I have looked for answers on google but it was never exactly what I am looking for.
If anyone can help.
Thank you in advance
Just use gravity center in button
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
Please remove android:width="#dimen/_34sdp" android:height="#dimen/_34sdp" from below code and try again.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I am trying to make a button like this
Button Image but I cannot put the icon in front of the text. The button I made now looks like this button image now. So, the main problem is how could I get the icon to be near in front of the text?
This is my button shape code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<solid
android:color="#00A651"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="300dp"
android:height="20dp"
/>
</shape>
This is the code I use to implement button into activity:
<Button
android:id="#+id/problem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/buttonshape"
android:drawableStart="#drawable/ic_rate_review_black_24dp"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:text="#string/button_problem" />
Everything worked as Muhib Pirani suggested. Thanks to him.
Button's code now looks like this:
<Button
android:id="#+id/problem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/buttonshape"
android:drawableStart="#drawable/ic_rate_review_black_24dp"
android:drawablePadding="5dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="#string/button_problem"
android:textColor="#FFFFFF"
android:textSize="15sp" />
The ButtonShape.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"/>
<solid
android:color="#00A651"
/> </shape>
remove size and padding from your buttonXml reduce your radius
and add paddingTop and paddinBottom to your
or you can also use TextView as button have some padding already assigned with it.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="10dp"
/>
<solid
android:color="#00A651"
/>
</shape>
You can use the MaterialButton:
<MaterialButton
style="#style/Widget.MaterialComponents.Button.IconOnly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
with:
<style name="Widget.MaterialComponents.Button.IconOnly">
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:minWidth">12dp</item>
<item name="android:minHeight">12dp</item>
<item name="iconGravity">textStart</item>
</style>
button with rounded corner + icon +text
style="#style/Base.Widget.AppCompat.Button.Borderless"
this work for me no need of much customisation
I have created my own custom styling for a vertical SeekBar, however there is a small gap between the thumb and the progress part of the SeekBar as shown here: http://i.imgur.com/gnGnuPb.png?1
Even more interesting though is that the further you drag the thumb the smaller the gap becomes until about 50% - 60% full when it disappears: http://i.imgur.com/6r0E2kZ.png?1
Everything is done using xml and shapes, no pngs. Any idea what could be causing this? I've tried messing around with the different paddings and thumb offset but I obviously must be missing something.
Below is the xml for the SeekBar, the Progress Drawable and the Thumb Drawable.
<SeekBar
android:layout_width="320dp"
android:layout_height="wrap_content"
android:background="#drawable/volume_shading"
android:id="#+id/volume"
android:rotation="270"
android:progressDrawable="#drawable/blue_slider"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:thumb="#drawable/thumb"
android:thumbOffset="0dp"
android:layout_marginTop="220dp"
android:layout_marginRight="-100dp"
android:layout_alignParentRight="true"/>
<?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/grey_bar" />
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/blue_bar" />
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp"
android:height="40dp" />
<corners android:radius="4dp" />
</shape>
I am trying to make the seekbar below
appear like this
i use the following xml attribute with minheight and maxheight but the thumb is not moving to bottom.
The minHeight and maxHeight only affect the seekbar. How can i achieved desired result i.e. thumb at seekbar bottom.
<SeekBar
android:id="#+id/seekbar_duree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/eight_dp"
android:layout_marginRight="#dimen/eight_dp"
android:background="#color/fulll_transparent"
android:indeterminate="false"
android:max="48500"
android:maxHeight="60dip"
android:minHeight="60dip"
android:indeterminateDrawable="#android:drawable/progress_indeterminate_horizontal"
android:paddingLeft="#dimen/twenty_sp"
android:thumb="#drawable/nine_patch"
android:progressDrawable="#drawable/progress_bar"
/>
:UPDATE: THIS IS MY THUMB. HOW CAN I PUT IT BELOW THE PROGRESS
I use xml-thumb like this with seek_thumb.9.png wich has the same physical size like min/maxHeight value defined on seekbarlayout
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="false">
<item android:state_pressed="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:state_focused="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:drawable="#drawable/seek_thumb_60" />
<item >
<shape android:shape="rectangle" />
</item>
</selector>
seekbar-layout also referencing xml-seekbar
<SeekBar
android:id="#+id/seekbar"
android:layout_width="320dp"
android:layout_height="60dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="10dp"
android:max="30"
android:maxHeight="60dp"
android:minHeight="60dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:progress="15"
android:progressDrawable="#drawable/seekbar"
android:secondaryProgress="0"
android:thumb="#drawable/seek_thumb"
android:thumbOffset="0dp" />
seekbar.xml using *.9.png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+android:id/background">
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_back_60" />
</item>
<item android:id="#+android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape android:shape="rectangle" />
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_front_60" />
</clip>
</item>
</layer-list>