CODEWITHSUNDEEP
androidandroid-layout
JibW
JibW

Reputation: 4562

Android placing a Button "center horizontally+marginLeft"

I just need to place two buttons(each 50dp of width) parallelly in the screen. The first one should have margin left 10dp and placing that is fine.

But the second button should place in the screen keeping a 30dp marin left from middle(Horizontally). What I need to do is it should start from the place where I have indicated with an arrow.

enter image description here

My design xml as follows. It doesn't matter to use a LinearLayout or RelativeLayout.

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#634785" >        

    <Button
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="B1"
        android:layout_marginLeft="10dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="B2"           
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="30dp />
</RelativeLayout>

Upvotes: 2

Views: 4364

Answers (3)

Emy
Emy

Reputation: 344

I tried above answers but any of above is not working for my case, I want to place a button2 over another button1, so for sure button2 should be placed with some padding from center to make it responsive for all devices. But but for some reason button2 is still on the left side. Here is XML code I wrote to achieve this, Please correct me

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp">
        <Button
            android:id="@+id/EnglishButton"
            android:layout_width="fill_parent"
            android:layout_height="35dp"
            android:text="   English"
            android:textColor="#000000"
            android:gravity="left|center_vertical"
            android:background="@drawable/Color_Button_Language"
            android:layout_marginLeft="20dp" />
        <Button
            android:id="@+id/fakeview"
            android:layout_centerInParent="true"
            android:layout_width="0dp"
            android:layout_height="0dp" />
        <Button
            android:id="@+id/TickButton1"
            android:layout_toRightOf="@+id/fakeview"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/WhiteTick" />
    </RelativeLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#6D7077"
        android:layout_marginLeft="20dp" />
</LinearLayout>

Here is the result of above XML, but I want to place tick on right side after padding from center of screen enter image description here

Upvotes: 0

user2060635
user2060635

Reputation: 261

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#634785" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button1"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="B1" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true" >

            <Button
                android:id="@+id/button2"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:text="B2" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

Upvotes: 1

Andrii Chernenko
Andrii Chernenko

Reputation: 10194

Place an invisible view (0dp wide and high) in the center of your container and align your second button relatively to it as you wish:

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#634785" >        

    <Button
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="B1"
        android:layout_marginLeft="10dp" 
        />

    <Button
        android:id="@+id/container_center"
        android:layout_centerInParent="true"
        android:layout_width="0dp"
        android:layout_height="0dp"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:text="B2"           
        android:layout_toRightOf="@+id/container_center" 
        android:layout_marginLeft="30dp"
        />

</RelativeLayout>

Upvotes: 7

Related Questions