How to add lines between buttons and a circular image?

Question

Can anyone help me how to add lines between buttons and circular image like this:

I have added eight buttons in the activity and one circular image in the middle and now I want to connect the image and the button through a line, but I couldn't.

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

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/tpo"
    app:civ_border_width="2dp"
    app:civ_border_color="#200e0e"/>

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/profile_image"
    android:layout_alignParentTop="true"
    android:layout_alignStart="@+id/profile_image"
    android:layout_marginTop="78dp"
    android:text="Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="12dp"
    android:layout_marginStart="12dp"
    android:text="Button" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="65dp"
    android:text="Button" />

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/button2"
    android:layout_alignRight="@+id/button2"
    android:layout_alignTop="@+id/button3"
    android:text="Button" />

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button2"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginEnd="18dp"
    android:layout_marginRight="18dp"
    android:text="Button" />

<Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button3"
    android:layout_alignLeft="@+id/button5"
    android:layout_alignStart="@+id/button5"
    android:text="Button" />

<Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button"
    android:layout_alignLeft="@+id/button5"
    android:layout_alignStart="@+id/button5"
    android:text="Button" />

<Button
    android:id="@+id/button8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/button"
    android:layout_alignLeft="@+id/button2"
    android:layout_alignStart="@+id/button2"
    android:text="Button" />


</RelativeLayout>

https://stackoverflow.com/a/27633481/421467 – Dr.jacky Feb 18 '18 at 07:11 — Dr.jacky, Feb 18 '18 at 07:11

score 0 · Answer 1 · answered Feb 18 '18 at 06:26

Create an image that has 8 lines coming out from the center (as desired) in software such as GIMP or Photoshop. Set it to be the background image of the parent layout. It seems like a hack but is likely the least complex solution.

If you want to dynamically create the lines it doesn't appear to be simple. Check out some other answers:

Roee · Answer 2 · 2018-02-18T07:24:00.240

I Actually don't like using relative layout but what you can actually do is draw the lines in frame layout and then draw over the lines your current view.

Simple Example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#00ffff"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_gravity="center"
        android:background="#00ffff"/>

    <YourView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </YourView>

</FrameLayout>

Also I would suggest:

Use Linear Layout instead of relative. You wouldn't even need frame layout in that case.
Play with 'z' position using elevation or translation z if you feel like it or having trouble.

How to add lines between buttons and a circular image?

2 Answers2