How can I achieve the view like below image? I want to make the view from xml using Roatation

Question

Please help I already do like the view like screenshot 2 but having a problem to achieve like screenshot 1.Is it possible to do?

View with rotation with feel the screen.

Thanks in advance.

  <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/accent_material_dark"
android:orientation="vertical">

<View
    android:id="@+id/header"
    android:layout_width="wrap_content"
    android:layout_height="120dp"
    android:background="#FFFFFF" />

<View
    android:id="@+id/body"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/header"
    android:rotation="165"
    android:background="@color/accent_material_dark" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/header"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_action_search"
    android:layout_marginBottom="-32dp"
    android:layout_marginRight="20dp">

</android.support.design.widget.FloatingActionButton>

   </RelativeLayout>

Answer 1

I should say that what you're trying to accomplish would be best achieved with a background drawable with the shape you want, rather than trying to rotate views to look like this. It's simply a lot of work and views to achieve something that a basic knowledge in microsoft paint would achieve as well.

That being said, to get your desired result, you just need to apply the pivot points of the view you're rotating to the top left corner (0, 0), and rotate only 15 degrees in the opposite direction"

<View
    android:id="@+id/body"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/header"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:rotation="-15"
    android:background="@color/accent_material_dark" />

You might also need to make the view a bit longer, since the rotation will mean the view doesn't extend to the edge of the screen (due to pythagorean's theorem). You could do this by applying a large dp value for the view's width, or by setting the view's scaleX property to 1.5, or something similar.