CODEWITHSUNDEEP
javaandroidandroid-linearlayout
ManyQuestions
ManyQuestions

Reputation: 1089

Center button in a LinearLayout

I just want to center "CenterButton" (center of the root LinearLayout) but Androids just not cooperating..

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center_horizontal"
    android:layout_weight="0.00"
    android:padding="5dp"
    android:background="#zegerg"
    android:id="@+id/LinearLayout1">

    <ImageView
        android:id="@+id/ImageView1"
        android:layout_height="match_parent"
        android:layout_width="151dp"
        android:src="@mipmap/image_1"
        android:contentDescription="@string/abcdef"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:id="@+id/CenterButton"
        android:layout_gravity="center_horizontal|center_vertical|center"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Text !"
            android:id="@+id/TextView"
            android:paddingBottom="30dp"
            android:textColor="#37a52c" />

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/ProgressBar"
            android:paddingBottom="30dp"
            android:progressTint="#37a52c" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text_text"
            android:id="@+id/Button2"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>
</LinearLayout>

Tried putting it at the end of the XML but doesn't work because the other elements push it aside.. not really sure what's happening.

Upvotes: 0

Views: 305

Answers (4)

Hichem Acher
Hichem Acher

Reputation: 433

It's not clear what exactly is your problem. However, here are some general notes :

  • To center a View or a Layout inside RelativeView use layout_centerInParent="true"
  • To make a Layout on top of other layouts use FrameLayout
  • The order of the views/layouts in your xml file is important. The one you write the last will be on the top (in our example : the FrameLayout or just the CenterButton should be written after the other views and layouts in your xml file)
  • To distribute the available space inside LinearLayout among its views use android:layout_weight="1" (change the value according to your needs)

you can play aground with this example :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="200dp">

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="#fff"
        android:orientation="horizontal"
        android:padding="5dp">

        <ImageView
            android:id="@+id/ImageView1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:src="@mipmap/ic_launcher" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:orientation="vertical">

            <TextView
                android:id="@+id/TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="30dp"
                android:text="Text !"
                android:textColor="#37a52c" />

            <ProgressBar
                android:id="@+id/ProgressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="30dp"
                android:progressTint="#37a52c" />

            <Button
                android:id="@+id/Button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text_text" />
        </LinearLayout>

    </LinearLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <Button
            android:id="@+id/CenterButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical|center"
            android:text="Button" />

    </FrameLayout>

</RelativeLayout>

Upvotes: 0

Antonio Cappiello
Antonio Cappiello

Reputation: 495

if you want to have all three first level children to be in equally-sized columns, then you need to add to all of them the followings attribute:

android:layout_width="0dp"
android:layout_weight="1"

(don't forget the dimension "dp" to the width parameter, otherwise the IDE will complain).

...
    <ImageView
        android:id="@+id/ImageView1"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1" 
        android:src="@mipmap/image_1"
        android:contentDescription="@string/abcdef"/>

    <Button
        android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="wrap_content"
        android:text="Button"
        android:id="@+id/CenterButton"
        android:layout_gravity="center_horizontal|center_vertical|center"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="match_parent"
        android:padding="20dp">
....

EDITED: If you want your CenterButton to overlap all the other views, then what you have to do is:

  1. wrap everything in a relative layout with height equal to 200dp, as its first child
  2. remove the button CenterButton from the current position and add it at the bottom of everything, still inside the relative layout, but below the linear layout
  3. add those properties to the button to make it center in the parent

android:layout_centerInParent="true"

So finally you will have something like this (I have changed some resources):

<?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="200dp">


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:layout_weight="0.00"
        android:padding="5dp"
        android:background="@android:color/holo_orange_dark"
        android:id="@+id/LinearLayout1">

        <ImageView
            android:id="@+id/ImageView1"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:src="@drawable/plus"
            android:contentDescription="abcdef"/>


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:padding="20dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text !"
                android:id="@+id/TextView"
                android:paddingBottom="30dp"
                android:textColor="#37a52c" />

            <ProgressBar
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/ProgressBar"
                android:paddingBottom="30dp"
                android:progressTint="#37a52c" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text"
                android:id="@+id/Button2"
                android:layout_gravity="center_horizontal" />
        </LinearLayout>
    </LinearLayout>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button"
        android:id="@+id/CenterButton"
        android:layout_gravity="center_horizontal|center_vertical|center"/>

</RelativeLayout>

Upvotes: 1

akirakaze
akirakaze

Reputation: 106

You can use weight for such purposes for child items. Make layout_width for all of them as 0dp and set layout_weight as 1.

Upvotes: 1

Cody Harness
Cody Harness

Reputation: 1147

Give the three children in the topmost linear layout a gravity of 1 and a width of 0.

Upvotes: 0

Related Questions