I want to create a custom button.
This button should have a gradient and a two pixel border, but the inner and outer edge should be in a different color (example: inner is red and outer is yellow).
My question: how do I program the double border (like in the image)?!
Image:
I tried with an XML file with two strokes, but it doesn't work.
I could do this with a 9png file, but I want to do it with pure coding.
btn_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<padding android:left="3.5px"
android:top="3.5px"
android:right="3.5px"
android:bottom="3.5px"/>
<solid android:color="#d4e23a"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<padding android:left="4.5px"
android:top="4.5px"
android:right="4.5px"
android:bottom="4.5px"/>
<solid android:color="#d4413a"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<gradient android:startColor="#37c325"
android:endColor="#2573c3"
android:angle="-90"/>
</shape>
</item>
</layer-list>
set the above xml as button background.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:background="#drawable/btn_bg"
android:gravity="center"
android:padding="10dp"
android:textStyle="bold"
>
</Button>
Result:
If you want to go by plain Java code then you need to create a class which extends the button, write all your logic in
public void onDraw(Canvas iCanvas).
I have pasted small code snippet from one of my project. Give it a try. thought I have not created the gradient, I have used plain colors.
public class MyButton extends Button {
private Paint m_paint1 = new Paint();
private Paint m_paint2 = new Paint();
private int m_color1 = 0XFF92C84D; // LIKE AN OLIVE GREEN..
private int m_color2 = 0XFFFF0000; // LIKE AN OLIVE GREEN..
private RectF innerRect1, innerRect2;
public MyButton(Context context) {
super(context);
setBackgroundColor(Color.BLACK);
}
public void onDraw(Canvas iCanvas) {
// draw the button background
m_paint1.setColor(m_color1);
m_paint2.setColor(m_color2);
innerRect1 = new RectF(5, 5, getWidth() - 5, getHeight() - 5);
innerRect2 = new RectF(10, 10, getWidth() - 10, getHeight() - 10);
iCanvas.drawRoundRect(innerRect1, 0, 0, m_paint1);
iCanvas.drawRoundRect(innerRect2, 0, 0, m_paint2);
}
public static RelativeLayout.LayoutParams GetRelativeParam(int iLeft,
int iTop, int iWidth, int iHeight) {
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
iHeight, iWidth);
params.leftMargin = iLeft;
params.topMargin = iTop;
return params;
}
}
and
RelativeLayout relLay = new RelativeLayout(this);
MyButton m_button = new MyButton(this);
setContentView(relLay);
relLay.addView(m_button, MyButton.GetRelativeParam(0, 0, 100, 500));
Put the button inside a layout that you will create just for it. So set to the layout the outest background color that you want.
Related
I am trying to change the width of ImageView from top and bottom separately. I want the width from top left-right to 100dp and from bottom left-right to 50dp. See the attached image for an idea:
I tried to do find a solution online but I did not find anything yet. I tried with the Android Scale library but I could not achieve the required result with it.
ScaleAnimation fade_in = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000); // animation duration in milliseconds
fade_in.setFillAfter(true); // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
IV.startAnimation(fade_in);
Please guide me which library is capable of doing it or how it can be achieved?
you can create a custom shape ImageView using this library
You have to create an XML file for your background image view and shape the Trapezius.
you have not to use any library.
attention: I used color for solid and etc because of you (copy and paste it to your The XML file and watch it ).
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<padding android:top="35dp"/>
<size android:width="200dp" android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<item>
<shape android:shape="line">
<size android:width="100dp"/>
<stroke android:width="4dp" android:color="#123456" />
</shape>
</item>
<item
android:right="-200dp"
android:left="200dp"
android:top="-200dp"
android:bottom="-200dp">
<rotate android:fromDegrees="45">
<shape android:shape="rectangle">
<padding android:top="-35dp"/>
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="200dp"
android:left="-200dp"
android:top="-200dp"
android:bottom="-200dp">
<rotate android:fromDegrees="-45">
<shape android:shape="rectangle">
<padding android:top="-35dp"/>
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
I think you can create your custom Imageview
and with custom Imageview you can scale it with animation and animate path using ValueAnimator as per your requirment.
public class CustomImage extends AppCompatImageView {
private Path path;
public CustomImage(Context context) {
super(context);
init();
}
public CustomImage(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomImage(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
path = new Path();
}
#Override
protected void onDraw(Canvas canvas) {
float h = getMeasuredHeight();
float w = getMeasuredWidth();
path.moveTo(0, 0);
path.lineTo(w, 0);
path.lineTo(w * 0.8f, h);
path.lineTo(w * 0.2f, h);
path.lineTo(0, 0);
path.close();
canvas.clipPath(path);
super.onDraw(canvas);
}
}
I want to show small dots on screen while pressing a button, something like pin code...
switch (view.getId()){
case R.id.buttonNum1:
editor.putString("PinNumbers",getString(R.string.numberOne));
int x = 10;
int y = 30;
int r = 100;
Paint mPaint = new Paint();
mPaint.setColor(Color.BLACK);
Canvas mCanvas = new Canvas();
mCanvas.drawCircle(x,y,r,mPaint);
break;
You can achive by creating ripple effect
create one drawable name like pin_button_ripple in drawable-v21 folder and add bellow code
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorPrimary" />
</shape>
</item>
</ripple>
Now in Layout file set it as a background of button and define click listener in activity
<Button
android:id="#+id/btnPinButton"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#drawable/pin_button_ripple"
android:padding="20dp"
android:text="10"/>
You will see the ripple effect in circle shape like we enter Pin
number or password via keyboard and showing that effect
I have xml gradient drawable resource file here:
file: fg_graidient
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:type="linear"
android:centerX="0%"
android:startColor="#00020321"
android:centerColor="#F2000000"
android:endColor="#B2020321"
android:angle="45"/>
</shape>
I can the imageview foreground like below:
<ImageView
android:id="#+id/backimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:foreground="#drawable/fg_graidient"
/>
But I want to set this drawable foreground for imageview programmatically. Is it possible?
Create programmatically gradient shapes
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
#Override
public Shader resize(int width, int height) {
LinearGradient lg = new LinearGradient(0, 0, width, height,
new int[]{Color.GREEN, Color.GREEN, Color.WHITE, Color.WHITE},
new float[]{0,0.5f,.55f,1}, Shader.TileMode.REPEAT);
return lg;
}
};
PaintDrawable p=new PaintDrawable();
p.setShape(new RectShape());
p.setShaderFactory(sf);
use
Button btn= (Button)findViewById(R.id.btn);
btn.setBackgroundDrawable((Drawable)p);
Try this snipet:
ImageView img = (ImageView)findViewById(R.id.backimg);
img.setImageResource(R.drawable.fg_graidient);
I'm trying to draw drawable consisting of circle and rectangle. It's working fine while api is set to 23. I noticed that following attributes of 'item' have been added in newest api: height, gravity, weight. Is it possible to get the effect in older sdk?
Drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="5dp"
android:gravity="center_vertical"
android:left="5dp">
<shape android:shape="rectangle">
<size
android:width="50dp"
android:height="5dp" />
<solid android:color="#125572" />
</shape>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="center_vertical">
<shape android:shape="oval">
<solid android:color="#125572" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
Image using api 23:
Image using api 22:
I know this question is quite old but I solved this problem and maybe it is useful for someone even now.
For the solution I created two classes.
One class called MyLayerDrawable that extends LayerDrawable. The important thing to keep in mind about this class is that you can get the top and the left insets for each layer.
public class MyLayerDrawable extends LayerDrawable{
private List<Layer> layers;
//some code here
public static class Layer{
private Drawable drawable;
private int topInset;
private int leftInset;
public Layer(Drawable drawable,int topInset,int leftInset){
this.leftInset=leftInset;
this.drawable=drawable;
this.topInset=topInset;
}
public Drawable getDrawable(){
return drawable;
}
public int getTopInset(){
return topInset;
}
public int getLeftInset(){return leftInset;}
}
The second class I created is called MyImageViewPatch that owns an ImageView.
The only public method of this class is setImageMyLayerDrawable(MyLayerDrawable layerDrawable). This method delegates setting the image drawable to the ImageView that it owns:
public void setImageMyLayerDrawable(MyLayerDrawable layerDrawable){
imageView.setImageDrawable(layerDrawable);
}
But before calling the setImageDrawable method an observer object has been added to the ImageView in the MyImageViewPatch constructor. This observer is called before drawing the Drawable in the ImageView:
imageView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
MyLayerDrawable layerDrawable=(MyLayerDrawable)imageView.getDrawable();
int numberOfLayers=layerDrawable.getNumberOfLayers();
Drawable drawable;
Rect bounds;
for(int i=0;i<numberOfLayers;i++){//for each layer
drawable=layerDrawable.getDrawable(i);
bounds=drawable.getBounds();
bounds.top=layerDrawable.getLayer(i).getTopInset();
bounds.left=layerDrawable.getLayer(i).getLeftInset();
if(drawable.getIntrinsicHeight()<bounds.height()){
bounds.bottom=drawable.getIntrinsicHeight()+layerDrawable.getLayer(i).getTopInset();
}
if(drawable.getIntrinsicWidth()<bounds.width()){
bounds.right=drawable.getIntrinsicWidth()+layerDrawable.getLayer(i).getLeftInset();
}
}
return true;
}
});
As you can see before drawing the MyLayerDrawable the bounds for each Layer are adjusted based on the left and top insets; this is the key part to get the drawables drawn in the correct size instead of stretched.
Here is the shapes xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="5dp"
android:gravity="center_vertical"
android:left="5dp"
android:top="8dp">
<shape android:shape="rectangle">
<size
android:width="50dp"
android:height="5dp" />
<solid android:color="#125572" />
</shape>
</item>
<item
android:width="20dp"
android:height="20dp">
<shape android:shape="oval">
<solid android:color="#125572" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
To centre the rectangle vertically I used android:top="8dp" instead of android:gravity="center_vertical".
Here is the code for the Main Activity:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView iv=(ImageView)findViewById(R.id.imageView);
MyLayerDrawable myLayerDrawable=MyLayerDrawable.Builder.build(getApplicationContext(),R.drawable.layer_d_example);
MyImageViewPatch myImageViewPatch=new MyImageViewPatch(iv);
myImageViewPatch.setImageMyLayerDrawable(myLayerDrawable);
}
}
I have the complete code in github. You may check it out: https://github.com/marcosbses/my_layout_drawable.git
I am trying to fill linear layout programmatically like this
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT
);
params.setMargins(dpToPx(6), 0, 0, 0);
kac.setLayoutParams(params);
LinearLay.addView(kac);
and I want to add (after every TextView (like kac)) a horizontal line like this one I have in my xml
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#B3B3B3"
android:padding="10dp"
/>
View v = new View(this);
v.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
5
));
v.setBackgroundColor(Color.parseColor("#B3B3B3"));
LinearLay.addView(v);
I recommend creating a drawable containing the line and setting it as a background to your textview. You would avoid unnecessary views.
Sample drawable could be:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#LINE_COLOR"/>
<padding
android:bottom="1dp"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#BACKGROUND_COLOR"/>
</shape>
</item>
</layer-list>
And you can set it by
textView.setBackgroundResource(R.drawable.resource)
edit* example:
#Override
protected void onDraw(Canvas canvas)
{
//this would draw the textview normally
super.onDraw(canvas);
//this would add the line that you wanted to add at the bottom of your view
//but you would want to create your rect and paint outside of the draw call
//after onmeasure/onlayout is called so you have proper dimensions
canvas.drawRect(new Rect(0, this.getHeight()-1, this.getWidth(), this.getHeight()), mPaint);
}
if i understand that you are just looking to draw a line after every textview, your best bet is probably to just extend TextView with a custom class, overriding the onDraw method, adding a paint call to draw the line yourself
you just need to set style (background) to your TextViews, making Views to in this case is a waste