Here’s a quick and fun new control to play with. It’s called the ArcLayout, and if the name isn’t descriptive enough, it allows you to layout your Views in the layout based on arcs, degrees, radii, etc. rather than using existing LinearLayouts, RelativeLayouts, or FrameLayouts.
The control is originally from OgacleJapan and you can find his native Android repository here: https://github.com/ogaclejapan/ArcLayout.
I’ve simply provided a Xamarin Android Binding Project to wrap it which you can find here: https://github.com/SuavePirate/ArcLayout. I haven’t created a nuget package for it yet, since the binding project could use some clean up first. However, here is an easy way to get started using it right away.
- Clone the Xamarin Binding Library (it includes the native project .jar/.aar in it, so you can clone and start right away).
- Copy the project to your solution, and add it as a reference in your Xamarin Android project.
- Start adding it to your layouts!
<com.ogaclejapan.arclayout.ArcLayout
android:id="@id/arc_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:arc_origin="bottom"
app:arc_color="#4D000000"
app:arc_radius="168dp"
app:arc_axisRadius="120dp"
app:arc_freeAngle="false"
app:arc_reverseAngle="false">
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:background="#03A9F4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:background="#00BCD4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="C"
android:textColor="#FFFFFF"
android:background="#009688"
app:arc_origin="center"/>
</com.ogaclejapan.arclayout.ArcLayout>
Now we can dissect the new attributes and properties we get from ArcLayout:
Properties of the ArcLayout
| attr | description |
|---|---|
| arc_origin | Center of the arc on layout. All of patterns that can be specified, see the demo app. |
| arc_color | Arc Shaped color |
| arc_radius | Radius of the layout |
| arc_axisRadius | Radius the axis of the child views |
| arc_freeAngle | If set to true, each child view can set the free angle, default false |
| arc_reverseAngle | If set to true, reverse the order of the child, default false. Note: If arc_freeAngle set to true does not work |
Properties of the ArcLayout Child Views
| arc_origin | Set the origin point of arc_axisRadius as well as layout_gravity, default center |
| arc_angle | If arc_freeAngle set to true, layout the specified angle |
Here’s a good example to get you started including a full circle layout and two semicircles:
arc_layout_full_example.axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.ogaclejapan.arclayout.ArcLayout
android:id="@+id/arc_layout_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:arc_origin="top"
app:arc_color="#321321"
app:arc_radius="168dp"
app:arc_axisRadius="120dp"
app:arc_freeAngle="false"
app:arc_reverseAngle="false">
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:background="#03A9F4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:background="#00BCD4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="C"
android:textColor="#FFFFFF"
android:background="#009688"
app:arc_origin="center"/>
</com.ogaclejapan.arclayout.ArcLayout>
<com.ogaclejapan.arclayout.ArcLayout
android:id="@+id/arc_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:arc_origin="bottom"
app:arc_color="#03a9f4"
app:arc_radius="168dp"
app:arc_axisRadius="120dp"
app:arc_freeAngle="false"
app:arc_reverseAngle="false">
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:background="#03A9F4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:background="#00BCD4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="C"
android:textColor="#FFFFFF"
android:background="#009688"
app:arc_origin="center"/>
</com.ogaclejapan.arclayout.ArcLayout>
<com.ogaclejapan.arclayout.ArcLayout
android:id="@+id/arc_layout_center"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:arc_origin="center"
app:arc_color="#4D123123"
app:arc_radius="50dp"
app:arc_axisRadius="50dp"
app:arc_freeAngle="false"
app:arc_reverseAngle="false">
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="A"
android:textColor="#FFFFFF"
android:background="#03A9F4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="B"
android:textColor="#FFFFFF"
android:background="#00BCD4"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="C"
android:textColor="#FFFFFF"
android:background="#009688"
app:arc_origin="center"/>
<Button
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:text="D"
android:textColor="#FFFFFF"
android:background="#009688"
app:arc_origin="center"/>
</com.ogaclejapan.arclayout.ArcLayout>
</RelativeLayout>
Feel free to contribute to the Xamarin Android Bindings Library repository mentioned above, I’m happy to field pull requests that can help clean it up for a real release.
If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!
Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.
Alex Dunn 