Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to achieve like this image. Please help
I've tried to make something similar to what you want :
1 - First add XML of the SeekBar as follows :
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:max="100"
android:maxHeight="4.0dp"
android:progress="60"/>
2 - Create 2 Drawable files progress_bg.xml & custom_thumb.xml :
progress_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 android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#e0e0e0"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#e0e0e0"/>
</shape>
</scale>
</item>
<item android:id="#android:id/progress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#2574ff"/>
</shape>
</scale>
</item>
</layer-list>
custom_thumb.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1.5dp"
android:color="#2574ff" />
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<solid android:color="#fff" />
<size android:width="25dp" android:height="25dp"/>
</shape>
3 - Now the Java code, we need to change the progressDrawable as well as changing the thumb of SeekBar dynamically each time the SeekBar change their value :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SeekBar seekBar = findViewById(R.id.seekBar);
seekBar.setThumb(getCurrentThumb(seekBar.getProgress()));
seekBar.setProgressDrawable(ResourceUtils.getDrawable(R.drawable.progress_bg));
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
seekBar.setThumb(getCurrentThumb(seekBar.getProgress()));
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
I tried to convert thumb Drawable to Bitmap, so I can write a text on it, here's what I've done :
public Drawable getCurrentThumb(int currentProgress) {
Bitmap writableBitmap = ImageUtils.drawable2Bitmap(ResourceUtils.getDrawable(R.drawable.custom_thumb));
writableBitmap = addText(writableBitmap, currentProgress);
return ImageUtils.bitmap2Drawable(writableBitmap);
}
Add text to Bitmap :
public Bitmap addText(Bitmap src, int currentProgress) {
Bitmap.Config bitmapConfig = src.getConfig();
if (bitmapConfig == null) bitmapConfig = Bitmap.Config.ARGB_8888;
Bitmap bitmap = src.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL);
paint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(35);
Rect rectangle = new Rect();
paint.getTextBounds(
String.valueOf(currentProgress),
0, // start
String.valueOf(currentProgress).length(),
rectangle
);
canvas.drawText(
String.valueOf(currentProgress),
canvas.getWidth() / 2.0f,
canvas.getHeight() / 2.0f + Math.abs(rectangle.height()) / 2.0f, // y
paint // Paint
);
return bitmap;
}
The used library :
implementation 'com.blankj:utilcodex:1.29.0'
Related
Anyone know how to make this type of custom shape drawable view in android.
Create an XML file and place it in drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="100dp">
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="100dp" />
<solid android:color="#F40D20" />
</shape>
</item>
<item android:left="100dp">
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="100dp" />
<solid android:color="#FFFFFFFF" />
</shape>
</item>
<item android:top="100dp">
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="100dp" />
<solid android:color="#FFFFFFFF" />
<corners android:topLeftRadius="30dp" />
</shape>
</item>
<item android:bottom="100dp">
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="100dp" />
<solid android:color="#F40D20" />
<corners android:bottomRightRadius="30dp" />
</shape>
</item>
</layer-list>
Restult:
Change the Radius to looke exactly as you want.
It depends on how you want this view to scale, but how about this?
public class WeirdView extends View {
private Paint red;
private Paint white;
public WeirdView(Context context) {
super(context);
initDrawingComponents();
}
private void initDrawingComponents() {
red = new Paint(Paint.ANTI_ALIAS_FLAG);
red.setColor(0xFFFF0000);
white = new Paint(Paint.ANTI_ALIAS_FLAG);
white.setColor(0xFFFFFFFF);
}
#Override
protected void onDraw(Canvas canvas) {
float width = getWidth();
float height = getHeight();
float horizontalLinePos = height * 0.25f;
float leftCircleRadius = height * 0.25f;
float rightCircleRadius = width * 0.15f;
float rightCircleBorderDist = width * 0.12f;
canvas.drawRect(0, 0, leftCircleRadius, horizontalLinePos + leftCircleRadius, red);
canvas.drawCircle(leftCircleRadius, horizontalLinePos + leftCircleRadius, leftCircleRadius, white);
canvas.drawRect(0, 0, width - rightCircleBorderDist, horizontalLinePos, red);
canvas.drawCircle(width - rightCircleBorderDist, horizontalLinePos - rightCircleRadius, rightCircleRadius, red);
}
}
This looks pretty much like the image you posted here.
I created an Android gradient drawable where the top and bottom are black and the center is transparent:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:startColor="#android:color/black"
android:centerColor="#android:color/transparent"
android:endColor="#android:color/black"
android:angle="90"/>
</shape>
The rendered gradient looks like this:
As you can see, the black parts spread to most of the screen. I want the black to show only on a small portion of the top and bottom. Is there a way I can make the transparent center larger, or make the top and bottom black stripes smaller?
I tried playing around with some of the other XML attributes mentioned in the linked GradientDrawable documentation, yet none of them seem to make and difference.
For an XML only solution, you can create a layer-list with two separate gradient objects.
The following code creates two overlapping gradient objects and uses centerY with centerColor to offset the black section. Here, the centerY attributes are set to 0.9 and 0.1, so the black color is restricted to the top and bottom 10% of the view height.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="90"
android:centerColor="#android:color/transparent"
android:centerY="0.9"
android:endColor="#android:color/black"
android:startColor="#android:color/transparent" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:centerColor="#android:color/transparent"
android:centerY="0.1"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black" />
</shape>
</item>
</layer-list>
For API level 23 or higher, the following solution will also work, using android:height. This solution can work even if you don't know the total height of your view, as long as you know how large you want the gradient to be.
This code creates two separate gradients, each with a height of 60sp, and then uses android:gravity to float the gradients to the top and bottom of the view.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="60sp"
android:gravity="top">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#android:color/black"
android:startColor="#android:color/transparent" />
</shape>
</item>
<item
android:height="65sp"
android:gravity="bottom">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black" />
</shape>
</item>
</layer-list>
Thank you #Luksprog for the code help, and #thenaoh for the start of the idea.
The above solutions work and it is nice that they are pure XML. If your gradient is showing with stripes, you may want to try a programmatic solution, like shown in #lelloman's answer, to create a smoother gradient.
Here is how it could be done with a custom Drawable. You can tune the LinearGradient as you want, and then set it as the view's background with view.setBackground(new CustomDrawable());.
public class CustomDrawable extends Drawable {
private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int[] colors;
private float[] positions;
public CustomDrawable() {
paint.setStyle(Paint.Style.FILL);
this.colors = new int[]{0xff000000, 0xffaaaaaa, 0xffffffff, 0xffaaaaaa, 0xff000000};
this.positions = new float[]{.0f, .2f, .5f, .8f, 1.f};
}
#Override
public void setBounds(int left, int top, int right, int bottom) {
super.setBounds(left, top, right, bottom);
LinearGradient linearGradient = new LinearGradient(left, top,left, bottom, colors, positions, Shader.TileMode.CLAMP);
paint.setShader(linearGradient);
}
#Override
public void draw(#NonNull Canvas canvas) {
canvas.drawRect(getBounds(), paint);
}
#Override
public void setAlpha(#IntRange(from = 0, to = 255) int alpha) {
paint.setAlpha(alpha);
}
#Override
public void setColorFilter(#Nullable ColorFilter colorFilter) {
paint.setColorFilter(colorFilter);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSPARENT;
}
}
There is a solution, assuming that you know in advance the height of your view (let's say here 60dp):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="40dp">
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:angle="90"
android:startColor="#FFFFFF"
android:endColor="#000000"/>
</shape>
</item>
<item
android:top="20dp"
android:bottom="20dp"
android:gravity="center_vertical">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</item>
<item
android:top="40dp"
android:gravity="bottom">
<shape android:shape="rectangle">
<gradient
android:type="linear"
android:angle="90"
android:startColor="#000000"
android:endColor="#FFFFFF"/>
</shape>
</item>
</layer-list>
But if you don't know the height in advance, another solution would be to make your own custom view, like this:
public class MyView extends ImageView
{
private Paint paint = null;
public MyView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
paint.setShader(getLinearGradient(0, getHeight()));
canvas.drawPaint(paint);
}
private LinearGradient getLinearGradient(float y0, float y1)
{
// colors :
int[] listeColors = new int[3];
listeColors[0] = 0xFF000000;
listeColors[1] = 0xFFFFFFFF;
listeColors[2] = 0xFFFFFFFF;
// positions :
float[] listPositions = new float[3];
listPositions[0] = 0;
listPositions[1] = 0.25F;
listPositions[2] = 1;
// gradient :
return new LinearGradient(0, y0, 0, y0 + (y1 - y0) / 2, listeColors, listPositions, Shader.TileMode.MIRROR);
}
}
Hope it helps.
I want to add shadow around circular imageView.
Here is my code.
I want to make like this image
This is my .xml file
check this image.
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#355482" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#+id/layoutTop"
android:background="#drawable/loading" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="113dp"
android:text="Profile"
android:textColor="#355482"
android:textSize="20dp"
android:textStyle="bold" />
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="132dp"
android:adjustViewBounds="true"
android:background="#drawable/round_image"
android:src="#drawable/ic_launcher" />
this is round_image.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffffff" />
<corners android:radius="2dp"/>
<size
android:height="80dp"
android:width="80dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
I try some code for shadow effect but it's not working.
Hope this will help you:)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/gray"/>
<!--shadow Color-->
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="3dp">
<shape android:shape="oval">
<solid android:color="#color/lightgrey"/>//Background Color
</shape>
</item>
</layer-list>
Change the background Color and Shadow color as you want..
It is way simpler than you think. Your ImageView needs to appear rounded based on an oval background, as it is squared by default. Then you need to include elevation, and it will show as you expected. You cannot set the oval background transparent as it won't allow for
shadow elevation.
this is drawable/white_oval.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
Now in your imageview, I am skipping here how you include your image
<ImageView
android:id="#+id/alert_icon"
android:layout_width="#dimen/alert_icon"
android:layout_height="#dimen/alert_icon"
android:contentDescription="#string/your_shadow_rulez"
android:background="#drawable/white_oval"
android:elevation="#dimen/elevation_fab" />
of course make sure your image view both width and height match. The bigger the elevation the larger the shadow
see how simple and nice this looks
Create a circle_shadow.xml file and use this code it work good for me. Make changes the radius according to your requirement.
circle_shadow.xml
<!-- Drop Shadow -->
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background Color (white) -->
<item>
<shape android:shape="oval">
<solid android:color="#android:color/white" />
<corners android:radius="3dp" />
</shape>
</item>
Before answering I want to give some advice. You just have to put title of your question in Google. I tried to search like circular imageview with shadow android:
Without use of Library:
Change android:color="#BDBDBD" in shape tag.
Your round_image.xml will be like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#BDBDBD" />
<corners android:radius="2dp"/>
<size
android:height="80dp"
android:width="80dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Using Library:
Have you tried this CircularImageView
You can use this library or if you don't want to use then get some code from this library inner res folder.
Thank you.
Here, I share my best practice to show a shadow effect to a circular image/resource with some details.
The above example image's icon is 56dp x 56dp and is cropped with a zoomed view so it may not look attractive but the results will show good on an actual device under the naked eye.
The above example is delivered by using:
Some amount of elevation, to let shadow.
Provide margin to the view almost double of elevation to fit the shadow.
Ensure the parent view provides the space almost double of elevation to fit the shadow.
Create and use an OutlineProvider to create the shadow.
Now here we begin with the code.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/margin_14dp"> // Point no. 3
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/img"
android:layout_width="#dimen/margin_56dp"
android:layout_height="#dimen/margin_56dp"
android:layout_margin="#dimen/margin_14dp" // Point no. 2
android:elevation="#dimen/margin_8dp" // Point no. 1
android:src="#drawable/ic_bell" />
</FrameLayout>
Let's proceed to point no. 4, here is the OutlineProvider class for a Circular Outline.
import android.graphics.Outline;
import android.view.View;
import android.view.ViewOutlineProvider;
public class CircularOutlineProvider extends ViewOutlineProvider {
#Override
public void getOutline(View view, Outline outline) {
outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), (view.getWidth() / 2F));
}
}
We left to use the OutlineProvider in our Java/Kotlin class to do the magic at runtime.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
findViewById(R.id.img).setOutlineProvider(new CircularOutlineProvider());
End of Magic Session!
For more experience and enhance details, please read the official article.
Add this xml code in your drawable layout and add it in your background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:shape="oval">
<gradient
android:startColor="#FF000000"
android:endColor="#00000000"
android:gradientRadius="31dp"
android:type="radial"
/>
</shape>
</item>
<item android:top="4dp" android:left="4dp" android:right="4dp" android:bottom="4dp">
<shape android:shape="oval">
<size android:width="55dp"
android:height="55dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
</item>
</selector>
This Class is Custom Circular Imageview with shadow, Stroke,saturation and using this Custom Circular ImageView you can make your image in Circular Shape with Radius. Guys for Circular Shadow ImageView No need Github this class is enough. Adding CircularImageView to your root layout dynamically.
*Adding Circular ImageView to your layout dynamically*
RelativeLayout rootLayout= (RelativeLayout) findViewById(R.id.rootLayout);
rootLayout.addView(new CircularImageView(this,200,200,imageBitmap));
public CircularImageView(Context context, int width, int height, Bitmap bitmap) {
super(context);
this.context = context;
this.width = width;
this.height = height;
------> here "bitmap" is the square shape(width* width) scaled bitmap ..
this.bitmap = bitmap;
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint3=new Paint();
paint3.setStyle(Paint.Style.STROKE);
paint3.setColor(Color.WHITE);
paint3.setAntiAlias(true);
paintBorder = new Paint();
imagePaint= new Paint();
paintBorder.setColor(Color.WHITE);
paintBorder.setAntiAlias(true);
this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
this.bitmap2 = Bitmap.createScaledBitmap(bitmap, (bitmap.getWidth() - 40), (bitmap.getHeight() - 40), true);
imagePaint.setAntiAlias(true);
invalidate();
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Shader b;
if (bitmap3 != null)
b = new BitmapShader(bitmap3, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
else
b = new BitmapShader(bitmap2, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
imagePaint.setShader(b);
canvas.drawBitmap(maskedBitmap(), 20, 20, null);
}
private Bitmap maskedBitmap()
{
Bitmap l1 = Bitmap.createBitmap(width,width, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(l1);
paintBorder.setShadowLayer(radius, x, y, Color.parseColor("#454645"));
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
final RectF rect = new RectF();
rect.set(20, 20, bitmap2.getWidth(), bitmap2.getHeight());
canvas.drawRoundRect(rect, corner_radius, corner_radius, paintBorder);
canvas.drawRoundRect(rect, corner_radius, corner_radius, imagePaint);
if (strokeWidth!=0.0f)
{
paint3.setStrokeWidth(strokeWidth);
canvas.drawRoundRect(rect, corner_radius, corner_radius, paint3);
}
paint.setXfermode(null);
return l1;
}
------> use seekbar here, here you have to pass "0 -- 250" here corner radius will change ..
public void setCornerRadius(int corner_radius)
{
this.corner_radius = corner_radius;
invalidate();
}
-------->use seekbar here, here you have to pass "0 -- 10.0f" here shadow radius will change
public void setShadow(float radius)
{
this.radius = radius;
invalidate();
}
----> use seekbar here, here you have to pass "0 -- 10.0f" here stroke size will change
public void setStroke(float stroke)
{
this.strokeWidth = stroke;
invalidate();
}
private Bitmap updateSat(Bitmap src, float settingSat)
{
int w = src.getWidth();
int h = src.getHeight();
Bitmap bitmapResult =
Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvasResult = new Canvas(bitmapResult);
Paint paint = new Paint();
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.setSaturation(settingSat);
ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
paint.setColorFilter(filter);
canvasResult.drawBitmap(src, 0, 0, paint);
return bitmapResult;
}
--------> use seekbar here, here you have to pass "0 -- 2.0f" here saturation will change
public void setSaturation(float sat)
{
System.out.println("qqqqqqqqqq "+sat);
bitmap3=updateSat(bitmap2, sat);
invalidate();
}
}
--------> Seekbar to change radius
radius_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
text_radius.setText(""+progress);
circularImageView.setCornerRadius(progress);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change shadow
shadow_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
float f= 4+progress/10.0f;
text_shadow.setText(""+progress);
circularImageView.setShadow(f);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change saturation
saturation_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
int progressSat = saturation_seekbar.getProgress();
float sat = (float) ((progressSat*4 / 100.0f)-1.0f);
circularImageView.setSaturation(sat);
text_saturation.setText(""+progressSat);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// Seekbar to change stroke
stroke_seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
#Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
{
if (progress==0)
{
float f=(progress*10.0f/100.0f);
circularImageView.setStroke(f);
}
else
{
float f=(progress*10.0f/100.0f);
circularImageView.setStroke(f);
}
text_stroke.setText(""+progress);
}
#Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
#Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
//radius seekbar in xml file
<SeekBar
android:layout_width="match_parent"
android:layout_gravity="center"
android:progress="50"
android:max="250"
android:id="#+id/radius_seekbar"
android:layout_height="wrap_content" />
//saturation seekbar in xml file
<SeekBar
android:layout_width="match_parent"
android:layout_gravity="center"
android:progress="50"
android:max="100"
android:id="#+id/saturation_seekbar"
android:layout_height="wrap_content" />
//shadow seekbar in xml file
<SeekBar
android:layout_width="match_parent"
android:layout_gravity="center"
android:progress="0"
android:max="100"
android:id="#+id/shadow_seekbar"
android:layout_height="wrap_content" />
//stroke seekbar in xml file
<SeekBar
android:layout_width="match_parent"
android:layout_gravity="center"
android:progress="0"
android:max="100"
android:id="#+id/stroke _seekbar"
android:layout_height="wrap_content" />
I'm trying to draw a border on a HorizontalScrollView programmatically, and fill the inside with a diferent colour. I've tried different aproaches, with no success. I can only draw one thing at a time... Here's the last code i've tried.
private void applyViewBorder(View layout, String borderColor,
String fillColor, int borderWidth) {
if (fillColor == null || borderColor == null)
return;
RectShape rect = new RectShape();
ShapeDrawable rectShapeDrawable = new ShapeDrawable(rect);
Paint paint = rectShapeDrawable.getPaint();
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(borderWidth);
paint.setColor(Color.parseColor(borderColor));
if (android.os.Build.VERSION.SDK_INT < 16) {
layout.setBackgroundDrawable(rectShapeDrawable);
} else {
layout.setBackground(rectShapeDrawable);
}
paint.setStyle(Style.FILL);
paint.setColor(Color.parseColor(fillColor));
if (android.os.Build.VERSION.SDK_INT < 16) {
layout.setBackgroundDrawable(rectShapeDrawable);
} else {
layout.setBackground(rectShapeDrawable);
}
}
I've already searched in stack overflow, with no success too...
Thanks in advance. :)
what you can try is
Create XML called border.xml in project drawable folder as below :
<?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="#FF0000" />
</shape>
</item>
<item android:left="5dp" android:right="5dp" android:top="5dp" >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
and than
yourshorizontalscrollview.setBackgroundDrawable(getResources().getDrawable(R.drawable.border));
or use this one :
yourshorizontalscrollview.setBackground(getResources().getDrawable(R.drawable.border));
I have a button in my activity and it has a background image also.I have added selector attributes,and it is working for set_pressed and set_focused.But rounded corners are not coming at default state of button, for that i have inserted a background image also.pls help me ...
activity_sam.xml
<?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="#f27d0f"/>
<corners android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape >
<solid android:color="#f27d0f"/>
<corners android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="false"
android:state_enabled="true"
android:drawable="#drawable/sam_logo" >
<shape >
<corners android:radius="7dp"/>
</shape>
</item>
</selector>
add Layout same size of button
provide background image and set rounder corner xml as background to Button ..if it work accept answer.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_right_left_coner"
android:text="#string/hello_world" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#android:color/black" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="10dip"
android:bottomRightRadius="10dip"
android:topLeftRadius="10dip"
android:topRightRadius="10dip" />
</shape>
Add this below last item.
<item>
<shape>
<corners android:radius="7dp"/>
</shape>
</item>
It will work as default style for button.
Add another item to show the default state as like this :
<shape>
<corners android:radius="7dp"/>
</shape>
If you want to show the rounded corner programmatically do the following :
public Drawable getRoundedBitmap(Bitmap bitmap, float Rnd_px) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff151515;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = Rnd_px;
paint.setAlpha(50);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
Drawable image = new BitmapDrawable(output);
return image;
}
The above code will crop the edges of the image. If you want to show a rounded layer over the image view. Please do the following.
<?xml version="1.0" encoding="UTF-8"?>
<solid android:color="#FFFFFF" />
<stroke
android:width="3dp"
android:color="#0000CC" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
<padding
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp" />
I would rather try something like this in code(not checked yet):
public class MyDrawable extends PaintDrawable {
BitmapShader mShader;
Rect mRect = new Rect();
public MyDrawable(BitmapDrawable bitmapDrawable) {
super();
final BitmapShader mShader = new BitmapShader(bitmapDrawable.getBitmap(), bitmapDrawable.getTileModeX() == null ? Shader.TileMode.CLAMP : bitmapDrawable.getTileModeX(), bitmapDrawable.getTileModeY() == null ? Shader.TileMode.CLAMP : bitmapDrawable.getTileModeY());
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setFilterBitmap(true);
mPaint.setDither(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setShader(mShader);
}
#Override
public void draw(Canvas canvas) {
int saveCount = canvas.getSaveCount();
canvas.save();
getPadding(mRect);
canvas.translate(mRect.left, mRect.top);
getShape().draw(canvas, mPaint);
canvas.translate(-mRect.left, -mRect.top);
canvas.restoreToCount(saveCount);
}
}
thanks to this You can use MyDrawable.setCornerRadii(float[] radiuses), and thanks to this draw image in rect with 4 diffrent radiuses(top-left,top-right,bottom-left,bottom-roght)