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);
}
}
Related
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 want to change color of underline in Edittext and i follow some tutorials to do this.
I create this xml file:
<?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="#00FFFFFF" />
<padding android:bottom="2dp" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
But i only do the underline not all rectangle, similiar as default line but white inside of blue and solid background transpartet.
How can i do this?
Thanks
You can change it programatically too:
public static void changeEditTextUnderlineColor(EditText editText) {
int color = Color.parse("#[putColorHere]")
Drawable drawable = editText.getBackground();
drawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
editText.setBackground(drawable);
} else {
editText.setCompoundDrawables(null, null, drawable, null);
}
}
you can change Edit color Underline in EditText specifying it in styles.xml. In your app theme styles.xml add the following.
<item name="android:textColorSecondary">#color/primary_text_color</item>
I have a drawable circle
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:type="radial"
android:startColor="#FFFFFF"
android:endColor="#EEEEEE"
android:gradientRadius="90"
/>
<size android:width="50dp" android:height="50dp"/>
<stroke android:width="2dp" android:color="#999999"/>
</shape>
And I'm trying to change the stroke of this circle on code side, like so:
public void onStrokeNeedsToChange(int newStroke)
{
GradientDrawable gradientDrawable = (GradientDrawable)mButton.getBackground();
gradientDrawable.setStroke(newStroke, Color.RED);
}
However, when I change the size of the stroke it is being clipped as if the whole drawable button is inside of a square.
Does anybody know how to increase the size of the stroke without it clipping?
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
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.