Set custom shape of the Daimajia SliderLayout - android

I am new to Android. I am having problem in setting up the custom shape of SliderLayout. I am using Daimajia Library for this. Can anyone please help.
I am posting the xml below (Shape I required)
<!-- Colored rectangle-->
<item android:top="0dp"
android:bottom="-10dp">
<shape android:shape="rectangle">
<size
android:width="335dp"
android:height="#dimen/dp300" />
<solid android:color="#FF0000" />
</shape>
</item>
<item
android:top="265dp"
android:bottom="-50dp"
android:right="-10dp"
android:left="-10dp">
<rotate
android:fromDegrees="-8">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>

Daimajia SliderLayout is a custom 3rd party library Slider layout.. and as at now it doesn't even show the "Android:background" attribute in it for you to be able make a custom shape and set that custom shape as its background shape...
So honestly, it will remain as a Rectangle for now and cant be curved and changed to a different shape....
Maybe unless you research and use a totally different slider layout library where you can change its shape

finally after 2 hours dealing with this problem i found the answear.
first you need to add [ implementation 'com.jcminarro:RoundKornerLayouts:0.4.0'
] library which help you curve any layer u want : this is an example :
<com.jcminarro.roundkornerlayout.RoundKornerRelativeLayout
android:id="#+id/rtl_slider_advertisment"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="16dp"
app:corner_radius="5dp">
<com.daimajia.slider.library.SliderLayout
android:id="#+id/slider_advertisment"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<com.jcminarro.roundkornerlayout.RoundKornerRelativeLayout
android:background="#drawable/gold_line"
android:layout_width="match_parent"
android:layout_height="200dp"></com.jcminarro.roundkornerlayout.RoundKornerRelativeLayout>
</com.jcminarro.roundkornerlayout.RoundKornerRelativeLayout>

Related

How to set Circular Image View Background black in android?

Image View background reflect only inside the circle not outside the circle.
I tried so many things but not able do that.
Anybody please me.
Thanks!!
Make an .xml file in drawable folder with this content:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#color/black"/>
</shape>
Then set this file as your background.
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<size android:width="50dp"
android:height="50dp"/>
<stroke
android:width="3dp"
android:color="#color/black"/>
<solid android:color="#color/black"/>
</shape>
in ImageView
add this in
android:background="#drawable/circle"
thank you everyone for the help.
This code is working as I want.
thank You!!
I guess you're using CircularImageView custom imageview class to make it circular. That's why background it getting apllied in cicular region only.
To solve it, do something like this,
<LineaLayout
android:width="wrap_content"
android:height="wrap_content"
android:orientation="vertical"
android:background="#color/black"/>
<!-- your circular CircularImageView here..!! -->
</LinearLayout>
Other solution you can do is, Use native ImageView and set its android:src by creating circular bitmap and use android:background black color and i would suggest to go with thise solution as you can avoid nested layouts.
I hope this hepls! Thanks.

How to Make Custom Shaped Layout in Android

I'm making a bottom navigation bar, of custom shape
Like this =>
So I tried using LinearLayout with a FAB on it, as I dont know much about custom shapes,
but my idea not working as, when I scroll my webView bottombar hides, but fab doesn't. Anyways this is a bad method.
So, What I want is to make a custom shaped bottombar,
please help me make it, or just simple guiding would be helpful,
Thank you so much :)
Create a drawable with the below fields
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="4dp"
android:left="20dp"
android:right="20dp"
android:top="15dp">
<shape android:shape="rectangle">
<solid android:color="#ED7D31" /> //Color of youe choice
</shape>
</item>
<item
android:width="50dp"
android:height="50dp"
android:gravity="top|center">
<shape android:shape="oval">
<solid android:color="#ED7D31" />
</shape>
</item>
</layer-list>
and in the XML file add it as a background like below
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:elevation="4dp"
android:background="#drawable/list" /> //Your drawable name here

How Do Create This Type Of Button In Android

How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated
You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.
One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>
1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.
Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.
put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)

Android change color without changing shape

I have created layout similar to this:
<RelativeLayout
android:id="#+id/layout_one"
style="#style/layout_one" >
<RelativeLayout
android:id="#+id/layout_two"
style="#style/layout_two" >
<RelativeLayout
android:id="#+id/layout_three"
style="#style/layout_three" >
</RelativeLayout>
</RelativeLayout>
For layout one I have created a custom drawable with rectangle shape so that the corners would be rounded and blue background color.
But for layout three I need to set white background color but if I do android:background="#FFFFFF" than it changes also the shape and the bottom corners are no longer rounded.
My first thought was to create custom drawable for the layout_three with rounded bottom corners but it wasnt working. Either all the corners were rounded or none.
Need to create something like this in the picture with rounded corners. Any suggestions?
I see that for layout three you use #style/layout_three which is different from #style/layout_one. So why don't you go to your style folder and put item with background white in layout_three style
It should look something like this:
<style name="layout_three">
<item name="android:background">#FFFFFF</item>
<!-- ... other stuff here... -->
</style>
EDIT: Sorry I did not understand your question well, reading that comment now.
There is only one way that comes to my mind right now to help you fix that.
Create an .xml file in your drawable folder and name it layout_three.xml or whatever.
And use this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<padding
android:bottom="10dp" <!-- you can set padding here
or on your layout layout_three -->
android:left="10dp"
android:right="10dp"
android:top="10dp"
/>
<corners android:radius="2dp" /> <!-- change the radius too -->
</item>
</layer-list>
And then you just use #drawable/layout_three instead of #style/layout_three
EDIT2: You can also use this code for the corners if you want only the bottom one to be rounded
<corners
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"/>
You can create a xml drawable with rounded bottom corners for your requirement. Try the below code:
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="7dp"
android:topRightRadius="0dp"
android:topLeftRadius="0dp"
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"/>
</shape>
</item>
I just read that the problem is that the Android layout preview doesn't show the different corner radius so you have to test in on device or emulator to see the difference.

No Marked Color in Seekbar

I want to remove the marked color (yellow in this case) in a seekbar.
Code:
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:max="20"
android:progress="10"
android:secondaryProgress="0"/>
Is there an easy way to do that?
See View dev doc. SeekBar derives from View and you should try to modify either the background using android:background with a Shape Drawable (with solid color) in the xml definitions or programmatically change the color using setBackgroundColor.
To remove the color, you should try to set it to a pure transparent color.
I've not tested, so let us know what happen if it fails.
Update
You could try that:
Define a res/drawable/white_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
Set the SeekBar android:background="#drawable/white_bg"
Give it first a try with a plain white color to see if that's a good start…
Ok, that doesn't work.
Final update
Ok, got it from a project of mine where I have customized a ProgessBar. Since a SeekBar derives from ProgressBar, you'll need to define a res/drawable/seekbar_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#android:color/transparent" />
</shape>
</clip>
</item>
</layer-list>
similarly that the platforms/android-8/data/res/drawable/progress_horizontal.xml file (android-8 is an example) and define theandroid:progressDrawable="#drawable/seekbar_bg" attribute for your SeekBar xml definition.
I assumed there that the #android:id/secondaryProgress item need not to be defined in the Layer List for a SeekBar but it should be verified…
You could as well redefine the thumb symbol selector by declaring a local selector inspired by platforms/android-8/data/res/drawable/seek_thumb.xml.
Interesting, I have learned a lot with this one since I never used a SeekBar, thanks! ;)
My apologies for the trial/error approach and the multiple updates…

Categories

Resources