CODEWITHSUNDEEP
android
joshgoldeneagle
joshgoldeneagle

Reputation: 4646

Aligning buttons in Android

Looking for advice on how to better align these buttons. Probably many ways to do this. Perhaps center all three buttons vertically since they are different size buttons? Right now the buttons just look haphazard, because I am brand new to Android programming.

Here is the current button code:

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.redacted.redacted.HomeScreen$PlaceholderFragment"
    android:background="#ff6d8416">

<TextView android:id="@+id/section_label" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Beginner / Principiante"
    android:id="@+id/beginnerButton"
    android:layout_marginBottom="26dp"
    android:layout_above="@+id/intermediateButton"
    android:layout_centerHorizontal="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Intermediate / Intermedio"
    android:id="@+id/intermediateButton"
    android:layout_alignRight="@+id/beginnerButton"
    android:layout_alignEnd="@+id/beginnerButton"
    android:layout_centerVertical="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Advanced / Advanzado"
    android:id="@+id/advancedButton"
    android:layout_marginTop="28dp"
    android:layout_below="@+id/intermediateButton"
    android:layout_alignLeft="@+id/intermediateButton"
    android:layout_alignStart="@+id/intermediateButton"
    android:layout_centerVertical="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="redacted"
    android:id="@+id/textView"
    android:layout_alignTop="@+id/section_label"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:textColor="@android:color/white" />

</RelativeLayout>

This is my current result

enter image description here

Upvotes: 0

Views: 55

Answers (3)

user4346621
user4346621

Reputation:

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_gravity="center"
    android:padding="20dp"
    android:layout_height="wrap_content">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Beginner"
        android:layout_margin="10dp"
        android:id="@+id/button" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Intermediate"
        android:layout_margin="10dp"
        android:id="@+id/button2" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Advanced"
        android:layout_margin="10dp"
        android:id="@+id/button3" />
</LinearLayout>

Upvotes: 1

codeMagic
codeMagic

Reputation: 44571

A vertically oriented LinearLayout with a few changes should work perfectly for you. Here's an example

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Beginner / Principiante"
        android:id="@+id/beginnerButton"
        android:layout_marginBottom="26dp"
        android:layout_gravity="center_horizontal"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Intermediate / Intermedio"
        android:id="@+id/intermediateButton"
        android:layout_centerVertical="true"
        android:layout_gravity="center_horizontal" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Advanced / Advanzado"
        android:id="@+id/advancedButton"
        android:layout_marginTop="28dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

note the changes I have made. Especially with the gravity and removing what is probably RelativeLayout.LayoutParams that won't be needed. If this doesn't work (I haven't had a chance to test just yet) wrapping the Buttons in another LinearLayout and giving that a gravity="center" will work.

Upvotes: 1

Juanjo Vega
Juanjo Vega

Reputation: 1440

Use a vertical LinearLayout and set margins to create the gaps around them.

Upvotes: 0

Related Questions