CODEWITHSUNDEEP
androidandroid-custom-view
Navid Abutorab
Navid Abutorab

Reputation: 1787

How to make semi circle (arc) view in layout

I want to make an arc view in my layout , I've tried to use a library but it doesn't works fine , how can I make an arch view like this and attache a button to it for example :

enter image description here

I've tried some codes but they wasn't displaying properly on tablet and different size of screens

Upvotes: 2

Views: 1024

Answers (2)

Faraz Ahmad
Faraz Ahmad

Reputation: 545

If you are developing for API >= 21, then vector path may be a solution.

<?xml version="1.0" encoding="utf-8"?>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500.0"
android:viewportHeight="500.0"
android:width="50dp"
android:height="50dp">

<path
    android:fillColor="@color/colorAccent"
    android:pathData="M0 0 H500 V300 H-500"/>
<path
    android:fillColor="@color/colorAccent"
    android:pathData="M0,300 L500 300, A4,2 0 1,1 0,210 Z"/>

</vector>

What we are doing here is draw two vector paths (maybe possible with one path only, but for demonstration purposes I am going to explain with two paths). enter image description here The first path

<path
    android:fillColor="@color/colorAccent"
    android:pathData="M0 0 H500 V300 H-500 Z"/>

In the first line we setup the color for the shape. Then in the second line actual working starts.

  • M0 0, this moves the cursor to (x,y) = (0,0)
  • H500, this draws a horizontal line from (0,0) to (500,0)
  • V300, this draws a vertical line from (500,0) to (500,300)
  • H-500, this draws a line from (500,300) to (0, 300)
  • Z, this closes the path, i.e. joins the first (0,0) and last (500,300) points together.

So, we end up drawing a nice rectangle shape (try to comment the second path's code to see that rectangle).

More explanation to come (for path 2)...

Upvotes: 1

Monster Brain
Monster Brain

Reputation: 2119

Here's a custom solution I've came up with.

It's basically using

  • view with height of x dp as main box
  • another view with oval shape as background
  • adjusting the oval shape below the rectangular view above, about half it's height

For various screens you have to define the height/margin values in values.xml files though, but works fine I guess.

enter image description here

inside of which can be seen like this

enter image description here

Here's the layout file for this.

Not an elegent solution, but someone might benefit from this I think.

Upvotes: 1

Related Questions