Search code examples
androidandroid-layoutandroid-view

Put two views in the center of the screen


I have two views (com.github.mikephil.charting.charts.BarChart and LinearLayout), the content inside one view is approx 600 dp high, the other once has 500 dp. Width of both views is fill_parent.

I would like to position them both into the center of the screen (so they overlaps).

Unfortunately, Android's layout alignment is very unintuitive and hit or miss for me and I'm not able to achieve that.

Can you please help?

               <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:background="#11FFFFFF">

                <com.github.mikephil.charting.charts.BarChart
                    android:id="@+id/chart"
                    android:layout_width="match_parent"
                    android:layout_height="500dp"
                    />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:gravity="center">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="50dp"
                        android:orientation="vertical"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="150dp"
                            android:includeFontPadding="false"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            android:text="HITS"
                            android:textAppearance="?android:attr/textAppearanceLarge"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="50dp"
                        android:orientation="vertical"
                        android:gravity="center">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="#FFFFFF"
                            android:textSize="150dp"
                            android:includeFontPadding="false"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            android:text="MISSED"
                            android:textAppearance="?android:attr/textAppearanceLarge"/>
                    </LinearLayout>
                </LinearLayout>

            </RelativeLayout>

I want to position both Views inside this RelativeLayout in the center of the screen, overlapping


Solution

  • Put in the 2 views you wanna to place in center inside a RelativeLayout, then add android:layout_centerInParent="true" into the 2 views.

    For example it look like this:

    <RelativeLayout  
         android:layout_width="match_parent"
         android:layout_height="match_parent">
           <com.github.mikephil.charting.charts.BarChart
                ....all other stuff
    
                android:layout_centerInParent="true" > //..add this 
    
    
          <LinearLayout
               ..... all other stuff
               android:layout_centerInParent="true"  > //..add this 
    
    
          </LinearLayout>
    
    </RelativeLayout>