RelativeLayout or TableLayout Android 3 buttons

Question

I want to do something simple, 3 buttons in 1 column, responsive, like on screen.

Should I create it on RelativeLayout like in my code, or TableLayout would be better idea?

How to link RelativeLayout to the top and to the bottom, to be sure that last button never go out of the bottom of screen?

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity"
android:background="@color/green"
>
<ImageButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="NAGRAJ"
    android:id="@+id/nagraj"
    android:src="@drawable/button_sos"
    android:scaleType="fitStart"
    android:layout_alignParentTop="true"
    android:adjustViewBounds="true"
    android:background="@null"
    android:layout_marginBottom="25px"
    android:tag="nagraj"
    />

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="112"
    android:id="@+id/zadzwon"
    android:layout_below="@+id/nagraj"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:src="@drawable/button_112"
    android:scaleType="fitStart"
    android:background="@null"
    android:adjustViewBounds="true"
    android:layout_marginBottom="25px"/>

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ZDJECIE"
    android:id="@+id/foto"
    android:layout_below="@+id/zadzwon"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:src="@drawable/button_foto"
    android:scaleType="fitStart"
    android:background="@null"
    android:adjustViewBounds="true"
    /> 
</RelativeLayout>

How to link RelativeLayout to the top and to the bottom, to be sure that last button never go out of the bottom of screen?: Use alignParentBottom=true with the last Imagebutton...only problem is for different device height the space for the middle Imagebutton will vary. — Shadow Droid, Oct 26 '15 at 15:59
@ShadowDroid I want to be sure that every button will be the same size, and no edge will of button will be out of screen, how to do this task? — klijakub, Oct 26 '15 at 16:06
If you want to make sure that every button should be of same size then go for linear layout with vertical orientation as mentioned in answers — Shadow Droid, Oct 26 '15 at 16:27

score 1 · Answer 1 · edited May 23 '17 at 12:15

Have you tried using LinearLayout vertically and adding layout_weight parameters? This will always keep buttons in the same spacing, regardless the screen size. I think this might be helpful: https://stackoverflow.com/a/4517358/4890826

Edit: New Google Percent Support Library might be also helpful - especially in responsive design - http://www.androidauthority.com/using-the-android-percent-support-library-630715/

score 1 · Answer 2 · answered Oct 26 '15 at 16:24

You should not use either RelativeLayout or TableLayout for this. You should use a LinearLayout with layout_weight.

The layout_weight parameter basically means that if 2 (or more) layouts have the same value, they get the same amount of screen space. In the code below, all 3 buttons have the same layout_weight (1 in this example), so they each get exactly 1/3 of the space available, without going outside the screen.

This code below should give you what you need.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context=".MainActivity"
    android:background="@color/green"
    android:orientation="vertical">

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="NAGRAJ"
        android:id="@+id/nagraj"
        android:src="@drawable/button_sos"
        android:background="@null"
        android:layout_marginBottom="14dp"
        android:tag="nagraj"/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="112"
        android:id="@+id/zadzwon"
        android:src="@drawable/button_112"
        android:background="@null"
        android:layout_marginBottom="14dp"/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="ZDJECIE"
        android:id="@+id/foto"
        android:src="@drawable/button_foto"
        android:background="@null"/>

</LinearLayout>

score 1 · Accepted Answer · answered Oct 26 '15 at 16:57

Use both RelativeLayout and LinearLayout like this

RelativeLayout

   LinearLayout (orientation:vertical && weightsum = 3)

      ImageView (weightsum = 1)

      ImageView (weightsum = 1)

      ImageView (weightsum = 1)

   LinearLayout

   Button (align to the bot of the above LinearLayout and android:layout_alignParentBottom="true")

RelativeLayout

RelativeLayout or TableLayout Android 3 buttons

3 Answers3