Android seekbar customize - java

I am trying to customize and android seekbar (using API 17) so that the whole progress bar line is blue.
I have created the following XML in res/drawable:
draw_seekbar_settings.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape
android:shape="line">
<stroke
android:color="#color/progressFxBar"
android:width="2dp"
/>
</shape>
</clip>
</item>
</selector>
and
<SeekBar
android:id="#+id/t_seekbar"
android:layout_width="220dp"
android:layout_height="35dp"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="50"
android:progressDrawable="#drawable/draw_seekbar_settings"
The problem is only half the progress bar is blue, the other half doesn't have any colour whatsoever.
I would like to get this image
Instead I am getting this

change the draw_seekbar_settings.xml as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape
android:shape="line">
<stroke
android:color="#color/progressFxBar"
android:width="2dp"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<!-- if you want to change the progress edit following -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

Related

How Can I add line(view) below each of the item name in bottom navigation view?

I want to add a line below each name of the items. How can I do this with bottom navigation view? The image has an orange line below the item name. So It should be visible for the selected item only. I have done with the Linear layout. I need to do with the bottom navigation view.
Please check with this image. I did with selector functions for this
attribute app:itemBackground="#drawable/selector"
For do this:
Create 2 drawables, 1 whit and 1 without the under line
Whit line:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:right="20dp"
android:left="20dp">
<shape>
<stroke
android:width="4dp"
android:color="#color/bottom_sheet_divider" />
<solid android:color="#color/transparent" />
</shape>
</item>
<item
android:bottom="4dp">
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
without line:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
<item android:top="-41dp" android:right="-41dp" android:left="-41dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="4dp"
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Create a drawable whit drawable checked state
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/line_selected" android:state_checked="true"/>
<item android:drawable="#drawable/line_unselected" android:state_checked="false"/>
</selector>
Add this drawable on the BottomNavigationView
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
---> app:itemBackground="#drawable/item_line"
app:menu="#menu/bottom_navigation_menu" />

Change Colors States of Button using a Generic Drawable

I have Button that is using a custom drawable to make rounded corners. But I would like to change the background colors for the different states, focused, pressed etc..
I have used the below in onCreate to change the overall background color. But I don't know how to target the state_pressed to change its color too.
Any help?
in onCreate
DrawableCompat.setTint(btnLogin.getBackground(), ContextCompat.getColor(getApplicationContext(), R.color.colorGreen));
Button
<Button
android:id="#+id/btnLogin"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/button_rounded"
android:text="Sign In"
android:textColor="#android:color/white"
android:textStyle="bold" />
button_rounded.xml
<?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">
<corners android:radius="10dip" />
<solid android:color="#5c89c1" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:radius="10dip" />
<solid android:color="#204778" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dip" />
<solid android:color="#204778" />
</shape>
</item>
</selector>
Try this and it work for me:
Drawable drawable = getResources().getDrawable(R.drawable.button_rounded);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), getResources().getColor(R.color.colorGreen));

How to set an image button ( circle ) inside a circular progress bar

I'm new to XML language and have no clue on how to put and ImageButton inside a circular progress bar and also have no clue if that's even possible.
No. If you want to customize ProgressBar you need to set Style and android:progressDrawable
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can create Layer-List Drawable or any other drawable.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
check out this

Change android button colour on click without changing border colour?

I am new to Android and i was setting up my xml file. Is there a way to change the colour of the button with a feel of "click" when the button is clicked and then return to it's original colour WITHOUT changing the colour of the border?
I am using eclipse.
Thank you
First you need to make some xml files in the Drawable folder:
btn_clicked.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
btn_normal.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#00ff00" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
name_btn.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_clicked" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_normal"/>
</selector>
and then use it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button android:layout_width="140dp" android:layout_height="40dp"
android:background="#drawable/cancel_btn" />
</RelativeLayout>
AndroidGeek,
You can specify the effects inside an .XML file under the drawable folder and then linking the file to the Button under the layout folder.
Example:
Inside your activity_main.xml Your Button tag will look like as :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Styled Button"
android:id="#+id/styledButton"
android:background="#drawable/button"/>
Create an XML file [Example: button.xml] under the res/drawable folder to specify the changes that will take place when the button is pressed.
Below is the contents of the button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Changes that the button has to show when it is pressed -->
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<!-- Keep the stroke values same if you want the same border effect, irrespective you press / un-press the button
In case ih you want to change the border thickness, while the button is being clicked,
then increase the "android:width" value -->
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<!-- Default appearance when the button is displayed -->
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Hope this helps.
This should work irrespective of the IDE. Eclipse and Android Studio.

Adding a background image, to a background xml layout

I'm using an xml file in drawable to make my buttons in my app 'pretty'.
^ Like that.
It works fine, however I want to add a tick or cross to the buttons (to mark completed or not) - I'm not too sure if it's possible.
Here is my xml for the buttons:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
I'm setting the Background element on the button to use the above like #drawable/bluebuttons
Any help will be really appreciated
If you are using button then you can use Button's property in XML file.
android:drawableRight="#drawable/ANY_DRAWABLE_IMAGE"
In my case it was like this:
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
...
android:drawableRight="#drawable/ic_tick" />
Or in your code, you can put like this:
// PUT ZERO FOR NO DRAWABLE
textView1.setCompoundDrawablesWithIntrinsicBounds(LEFT_DRAWABLE, TOP_DRAWABLE,RIGHT_DRAWABLE, BOTTOM_DRAWABLE);
Hope this will help you.
If you are interested in setting image on button dynamically from Activity then you can use this :
Drawable iconTick= getApplicationContext().getResources().getDrawable(R.drawable.icon_tick);
mBtnTaks1.setCompoundDrawablesWithIntrinsicBounds(iconTick, null, null, null); // left,top,right,bottom
Thanks.

Categories

Resources