Some buttons not showing up on RelativeLayout in Android

Question

I use RelativeLayoutto create a layout . In here I design layout like below. And I am using android studio.

This is my layout code,

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/content24"
        android:id="@+id/step19textView"
        android:textSize="18dp"
        android:textAlignment="center"
        android:paddingRight="10dp"
        android:paddingLeft="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:layout_marginTop="32dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
<HorizontallScrollBar>
  <LinearLayout
           Orienteation= "horizontal";>
    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/step19button1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:background="@drawable/button_border"
        android:layout_below="@+id/step19textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="50dp" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/step19button2"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignTop="@+id/step19button1"
        android:layout_toRightOf="@+id/step19button1"
        android:layout_toEndOf="@+id/step19button1"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/step19button3"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button2"
        android:layout_toRightOf="@+id/step19button2"
        android:layout_toEndOf="@+id/step19button2"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/step19button4"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:textColor="@android:color/white"
        android:layout_alignBottom="@+id/step19button3"
        android:layout_toRightOf="@+id/step19button3"
        android:layout_toEndOf="@+id/step19button3"
        android:background="@drawable/button_border_5"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/step19button5"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button4"
        android:layout_toRightOf="@+id/step19button4"
        android:layout_toEndOf="@+id/step19button4"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/step19button6"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button5"
        android:layout_toRightOf="@+id/step19button5"
        android:layout_toEndOf="@+id/step19button5"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/step19button7"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button6"
        android:layout_toRightOf="@+id/step19button6"
        android:layout_toEndOf="@+id/step19button6"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="8"
        android:id="@+id/step19button8"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button7"
        android:layout_toRightOf="@+id/step19button7"
        android:layout_toEndOf="@+id/step19button7"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="39dp"
        android:layout_height="wrap_content"
        android:text="9"
        android:id="@+id/step19button9"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button8"
        android:layout_toRightOf="@+id/step19button8"
        android:layout_toEndOf="@+id/step19button8"
        android:background="@drawable/button_border"/>
    </LinearLayout>
  </HorizontalScrollBar>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText"
        android:paddingLeft="10dp"
        android:layout_below="@+id/step19button1"
        android:layout_alignLeft="@+id/step19button1"
        android:layout_alignStart="@+id/step19button1"
        android:layout_marginTop="20dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText2"
        android:layout_alignTop="@+id/step19editText"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:id="@+id/step19editText3"
        android:paddingRight="10dp"
        android:layout_alignTop="@+id/step19editText2"
        android:layout_alignRight="@+id/step19button9"
        android:layout_alignEnd="@+id/step19button9" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content25"
        android:id="@+id/step19textView2"
        android:textAlignment="textStart"
        android:textSize="18dp"
        android:paddingLeft="10dp"
        android:layout_alignTop="@+id/step19textView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content26"
        android:id="@+id/step19textView4"
        android:textSize="18dp"
        android:textAlignment="center"
        android:layout_alignTop="@+id/step19textView5"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content27"
        android:id="@+id/step19textView5"
        android:textSize="18dp"
        android:textAlignment="textEnd"
        android:paddingRight="10dp"
        android:layout_below="@+id/step19editText3"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="    Next    "
        android:textSize="18dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:id="@+id/step19nextbutton"
        android:layout_marginTop="59dp"
        android:textColor="@android:color/white"
        android:background="@drawable/button_border_5"
        android:layout_below="@+id/step19textView4"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

When I attempt to run this on Samsung Galaxy S Duos 3 (http://www.gsmarena.com/samsung_galaxy_s_duos_3-6662.php), 8 & 9 buttons are not showing though design is look like that.

I want show all buttons look like on the image . Have any ideas about this ?

Thank you.

Manage your margin padding Or use scroll view. It's got out of the boundary from screen. — Shree Krishna, May 19 '16 at 07:02
@Barrier you can manage by add Parent `LinearLayout` for all buttons and give `android:layout_weight="1"` for all buttons — Abhishek Patel, May 19 '16 at 07:08
@4k3R : But there is a problem . In project requirements , I cannot use a scroll view . so what can I do ? — Terance Wijesuriya, May 19 '16 at 07:09
@Barrier I've written an answer, and my personal recommendation using horizontal scroll thing, maybe a horizontal scrollview, or a horizontal recyclerview, etc. — capt.swag, May 19 '16 at 07:14

score 1 · Answer 1 · answered May 19 '16 at 07:13

obviously screen size of nexus 4 is larger than samsung galaxy duos 3 with 0.7". That's why some of your buttons got out of the boundary from screen. So I suggest wrapping them with HorizontalScrollView like

 <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...>
      Here are your buttons
</HorizontalScrollView>

OR

Either use LinearLayout and manage them with weight and weight_sum attributes like as described here.

score 1 · Answer 2 · answered May 19 '16 at 07:13

There are two options to solve this issue.

Using Layout Weights

A sample would be like this

<LinearLayout
    android:orientation = "horizontal"
    android:weightSum = "9">
    <Button
        android:layout_weight="1">
    <Button
        android:layout_weight="2">
    ...
    ...
    <!--Create 9 button with layout_weight = 1 -->
</LinearLayout>

This basically will create a horizontal LinearLayout with 9 buttons of equal sizes. So these buttons will take 1/9th the size of the LinearLayout.

Another method is to make a Horizontal Scrollable View

Horizontal Scrollable View can be HorizontalScrollView, or a RecyclerView which is horizontal, or a ListView which can be horizontal, or making your own ViewGroup (horizontal)

In which case you can set your own width to your buttons, and you can scroll through these buttons.

I would recommend using HorizontalScrollView because we can't be sure of the screen width, and if the device has less screen estate, then the buttons can be squished and won't leave a good UI.

score 1 · Answer 3 · answered May 19 '16 at 07:14

    <LinearLayout
               Orienteation= "horizontal";>
        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
android:layout_weight = 1

            android:text="1"
            android:id="@+id/step19button1"
            android:textSize="13dp"
            android:layout_marginLeft="3dp"
            android:background="@drawable/button_border"
            android:layout_below="@+id/step19textView"
            android:layout_alignParentLeft="true"
            android:layout_weight = 1
            android:layout_alignParentStart="true"
            android:layout_marginTop="50dp" />

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/step19button2"
            android:layout_weight = 1
            android:textSize="13dp"
            android:layout_marginLeft="3dp"
            android:layout_alignTop="@+id/step19button1"
            android:layout_toRightOf="@+id/step19button1"
            android:layout_toEndOf="@+id/step19button1"
            android:background="@drawable/button_border"/>

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="3"
            android:id="@+id/step19button3"
            android:textSize="13dp"
            android:layout_weight = 1
            android:layout_marginLeft="3dp"
            android:layout_alignBottom="@+id/step19button2"
            android:layout_toRightOf="@+id/step19button2"
            android:layout_toEndOf="@+id/step19button2"
            android:background="@drawable/button_border"/>

.... .....

Abhishek Patel · Accepted Answer · 2016-05-19T07:33:21.543

Try this just replace you xml to this

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

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/content24"
    android:id="@+id/step19textView"
    android:textSize="18dp"
    android:textAlignment="center"
    android:paddingRight="10dp"
    android:paddingLeft="10dp"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:layout_marginTop="32dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<LinearLayout
    android:id="@+id/llParent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/step19textView"
    android:layout_marginTop="50dp"
    android:orientation="horizontal">

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/step19button1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:background="@drawable/button_border"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/step19button2"
        android:layout_weight="1"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignTop="@+id/step19button1"
        android:layout_toRightOf="@+id/step19button1"
        android:layout_toEndOf="@+id/step19button1"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:layout_weight="1"
        android:id="@+id/step19button3"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button2"
        android:layout_toRightOf="@+id/step19button2"
        android:layout_toEndOf="@+id/step19button2"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        android:id="@+id/step19button4"
        android:textSize="13dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:textColor="@android:color/white"
        android:layout_alignBottom="@+id/step19button3"
        android:layout_toRightOf="@+id/step19button3"
        android:layout_toEndOf="@+id/step19button3"
        android:background="@drawable/button_border_5"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        android:id="@+id/step19button5"
        android:textSize="13dp"
        android:layout_weight="1"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button4"
        android:layout_toRightOf="@+id/step19button4"
        android:layout_toEndOf="@+id/step19button4"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6"
        android:id="@+id/step19button6"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:layout_alignBottom="@+id/step19button5"
        android:layout_toRightOf="@+id/step19button5"
        android:layout_toEndOf="@+id/step19button5"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7"
        android:id="@+id/step19button7"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_weight="1"
        android:layout_alignBottom="@+id/step19button6"
        android:layout_toRightOf="@+id/step19button6"
        android:layout_toEndOf="@+id/step19button6"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8"
        android:layout_weight="1"
        android:id="@+id/step19button8"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button7"
        android:layout_toRightOf="@+id/step19button7"
        android:layout_toEndOf="@+id/step19button7"
        android:background="@drawable/button_border"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9"
        android:layout_weight="1"
        android:id="@+id/step19button9"
        android:textSize="13dp"
        android:layout_marginLeft="3dp"
        android:layout_alignBottom="@+id/step19button8"
        android:layout_toRightOf="@+id/step19button8"
        android:layout_toEndOf="@+id/step19button8"
        android:background="@drawable/button_border"/>
</LinearLayout>


<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText"
    android:paddingLeft="10dp"
    android:layout_below="@+id/llParent"
    android:layout_alignLeft="@+id/llParent"
    android:layout_alignStart="@+id/llParent"
    android:layout_marginTop="20dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText2"
    android:layout_alignTop="@+id/step19editText"
    android:layout_centerHorizontal="true" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:id="@+id/step19editText3"
    android:paddingRight="10dp"
    android:layout_alignTop="@+id/step19editText2"
    android:layout_alignRight="@+id/llParent"
    android:layout_alignEnd="@+id/llParent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content25"
    android:id="@+id/step19textView2"
    android:textSize="18dp"
    android:paddingLeft="10dp"
    android:layout_alignTop="@+id/step19textView4"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content26"
    android:id="@+id/step19textView4"
    android:textSize="18dp"
    android:textAlignment="center"
    android:layout_alignTop="@+id/step19textView5"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/content27"
    android:id="@+id/step19textView5"
    android:textSize="18dp"

    android:paddingRight="10dp"
    android:layout_below="@+id/step19editText3"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="    Next    "
    android:textSize="18dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:id="@+id/step19nextbutton"
    android:layout_marginTop="59dp"
    android:textColor="@android:color/white"
    android:background="@drawable/button_border_5"
    android:layout_below="@+id/step19textView4"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

Thank you very much . This worked . You solve my big problem. — Terance Wijesuriya, May 19 '16 at 07:39
Now you want ans abount this..?http://stackoverflow.com/questions/37316676/what-are-the-correct-layout-folders-for-multi-screens-in-android — Abhishek Patel, May 19 '16 at 07:41
@Abishek Patel :- It is a huge problem for me still I have no idea about layout folders. — Terance Wijesuriya, May 19 '16 at 07:42

Some buttons not showing up on RelativeLayout in Android

4 Answers4