Change ImageView Width from top and bottom seperate

Question

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 Transform/rotate the Imageview on z-axis. [check this out](https://stackoverflow.com/questions/7705549/animation-to-transition-between-views-with-rotation-on-z-axis-with-depth-percept) — Sahil Arora, Dec 26 '19 at 05:39
This link maybe help you https://devdeeds.com/create-triangle-shape-using-xml-android/ — maniaq, Dec 26 '19 at 06:22

score 1 · Answer 1 · answered Dec 26 '19 at 05:57

1

you can create a custom shape ImageView using this library

answered Dec 26 '19 at 05:57

Niraj

903
8
23

I don't want to create shape because i am changing values at run time – DIGITAL JEDI Dec 26 '19 at 06:00

score 0 · Answer 2 · answered Dec 26 '19 at 05:58

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>

Jaydeep chatrola · Answer 3 · 2019-12-26T07:04:58.337

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);
    }


}

Change ImageView Width from top and bottom seperate

3 Answers3