How to auto align the buttons to fit in center of the screen

Anand

Newbie to android, Stuck with aligning the button to center of the screen.

here the 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.kissmat.gbrf_ebook.SingupIntro"
    android:background="@drawable/lib_gradient">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="Author"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:layout_marginLeft="70dp"
        android:layout_marginStart="70dp"
        android:layout_marginTop="82dp"
        android:id="@+id/authorBtn"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:elegantTextHeight="true"
        android:drawableTop="@drawable/author" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/publisher"
        android:text="PUBLISHER"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:id="@+id/pubBtn"
        android:layout_alignTop="@+id/authorBtn"
        android:layout_toRightOf="@+id/authorBtn"
        android:layout_toEndOf="@+id/authorBtn"
        android:layout_marginLeft="48dp"
        android:layout_marginStart="58dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/student"
        android:text="STUDENT"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:layout_marginTop="57dp"
        android:id="@+id/stbBtn"
        android:layout_below="@+id/authorBtn"
        android:layout_alignLeft="@+id/authorBtn"
        android:layout_alignStart="@+id/authorBtn" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/user"
        android:text="READER"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:id="@+id/readerBtn"
        android:layout_alignTop="@+id/stbBtn"
        android:layout_alignLeft="@+id/pubBtn"
        android:layout_alignStart="@+id/pubBtn" />
</RelativeLayout>

How it looks when i run on the device.

enter image description here

Thanos

I just removed the margins (Left, Start and Top) from your first button and added the property android:gravity="center" to your layout. The last one positions the contents in the center. There's no need to do that with fixed margin values. This is very helpful as your layout will be centered in all the different screen sizes and pixel densities.

<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.kissmat.gbrf_ebook.SingupIntro"
    android:background="@drawable/lib_gradient"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="Author"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:id="@+id/authorBtn"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:elegantTextHeight="true"
        android:drawableTop="@drawable/author" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/publisher"
        android:text="PUBLISHER"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:id="@+id/pubBtn"
        android:layout_alignTop="@+id/authorBtn"
        android:layout_toRightOf="@+id/authorBtn"
        android:layout_toEndOf="@+id/authorBtn"
        android:layout_marginLeft="48dp"
        android:layout_marginStart="58dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/student"
        android:text="STUDENT"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:layout_marginTop="57dp"
        android:id="@+id/stbBtn"
        android:layout_below="@+id/authorBtn"
        android:layout_alignLeft="@+id/authorBtn"
        android:layout_alignStart="@+id/authorBtn" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:drawableTop="@drawable/user"
        android:text="READER"
        android:textColor="#ffffffff"
        android:background="#00ffffff"
        android:id="@+id/readerBtn"
        android:layout_alignTop="@+id/stbBtn"
        android:layout_alignLeft="@+id/pubBtn"
        android:layout_alignStart="@+id/pubBtn" />
</RelativeLayout>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to align the buttons at the center of the screen in android

How to adjust the size of shapes in order to fit the screen and align them to center?

ConstraintLayout how to align to center of screen and not to overlap uneven side buttons

How do I align a flex div to the center and should completely fit in the screen, irrespective of the device screen width?

How to align the widget to the center of the screen

How to center align multiple radio buttons in FlowLayoutPanel?

how to align ul list as a buttons to the center

How to align the canvas object to center of the screen?

How to align a button to the center of the screen html

How to align row of images at the center top of the screen

How to align background color and text in center screen

align AlertDialog buttons to center

How to align two buttons and views left to center, center to right with

center a group of buttons on the screen

How to have a space between the two buttons? And how to align them to center

How do I center align 3 radio buttons?

How to align the two buttons to the center of a div of 'position:absolute' using flexbox?

How to Align four buttons at dead center in Xcode 7?

bootstrap 4 align buttons in center

How align 2 buttons in a row using auto layout?

How to fit a window to its contents and center it on the screen in Sciter?

How do I use iOS auto layout to center buttons in a menu?

How to align button center of screen overlapping two layouts

How to center align a glyphicon to the middle of the page at all screen sizes

How to align TextView to center of the screen, and ImageView to stick next to it?

Flexbox in react native : How to align 2 items at the center of the screen?

How to align action bar title in center of screen in fragment?

How to align Navigation image in center when screen size reduces

how do i align a textbox to the center of the screen in HTML?