Square layout with relatively placed buttons - Android

Question

sorry for my maybe stupid question, but I am a beginner. I have "relative" square layout and I need insert buttons into this square layout, which relatively changed size and position. These parameters would depend on the dimensions of the square layout. On the first picture is an attempt of square layout, where I would like to put the buttons. On the second picture is demonstrated might look like result. Sry for my english :)

Thank you for your comments.

first second

This is my squarelayout.java

package com.example.squarelayout;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

public class SquareView extends View {
  public SquareView(Context context) {
    super(context);
  }

  public SquareView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public SquareView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
    setMeasuredDimension(size, size);
  }
}

This is my activity_main.xml

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

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="top"
    android:orientation="horizontal"
    android:weightSum="100">


      <com.example.squarelayout.SquareView
          android:layout_width="0dp"
          android:layout_height="fill_parent"
          android:layout_weight="100"
          android:background="#f00"
          android:orientation="horizontal" />

  </LinearLayout>

</FrameLayout>

Try to use RelativeLayout as the surface that your buttons wants to move . So that you can change positions easily by setting margin top and left . — Krish, Jan 06 '15 at 18:46
Agree with Krish change to RelativeLayout and then just drag and drop an button widget thats all:) — BiggDawgg, Jan 06 '15 at 19:11
When I use RelativeLayout the "red square" dissepears. I forgot to say that the picture no.2 is a photomontage. — Tomáš Liczka, Jan 06 '15 at 19:11

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Change your SquareView class to extend RelativeLayout instead of View.

If you change your activity_main.xml like below, removing the LinearLayout and setting the width and height of the SquareView to fill_parent then it won't make the square disappear:

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

          <com.example.transparentcircle.SquareView
          android:id="@+id/squareview"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#f00">

              <Button
                  android:id="@+id/button1"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_marginLeft="160dp"
                  android:layout_marginTop="40dp"
                  android:text="B"/>

              <Button
                  android:id="@+id/button2"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_marginLeft="120dp"
                  android:layout_marginTop="100dp"
                  android:text="B"/>

          </com.example.transparentcircle.SquareView>

</FrameLayout>

Buttons can be added to the SquareView in the xml as above or created programmatically.

You can also set the margins in code, based on the size of the SquareView. However, you can't do this directly in onCreate() in your main activity but need wait until after the layout is finished being set up. See this question for an example of how to do that.

Also, see this question for how to set the margins in code.

Square layout with relatively placed buttons - Android

1 Answers1