CODEWITHSUNDEEP
androidandroid-layoutmaterial-design
Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 317

How to make material design toolbar having different height at right and left?

i want to make a toolbar like shown in the image. i have search a lot but could not find any clue how to make toolbar having different height at right and left.

i would be thankful if someone give any idea or refer any blog.

I want a toolbar at an angle as shown in image below.

enter image description here

Upvotes: 0

Views: 190

Answers (1)

raj
raj

Reputation: 2088

You can use layerlist to give left heigh and right height to buttons

this is a working example

Here is the shape file called arrow_shape.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#5EB888" />
        <corners android:radius="0dp"/>
    </shape>
</item>

<item
    android:top="-40dp"
    android:bottom="65dp"
    android:right="-30dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<item
    android:top="65dp"
    android:bottom="-40dp"
    android:right="-30dp">
    <rotate
        android:fromDegrees="-45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

</layer-list>

Then use it as button's background, for example

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/arrow_shape"/>

Here is the screenshot:

enter image description here

More info on Layer-List you can find here.

Upvotes: 1

Related Questions