CODEWITHSUNDEEP
androidandroid-layoutandroid-view
Martin Dusek
Martin Dusek

Reputation: 1292

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

Upvotes: 0

Views: 175

Answers (3)

Ivo
Ivo

Reputation: 23144

In my experience it's most of the times best practice to use the lightest container possible, which in this case is probably a FrameLayout, so I would use that instead of RelativeLayout and use android:layout_gravity="center" in the subviews like this for example:

<FrameLayout  
     android:layout_width="match_parent"
     android:layout_height="match_parent">
       <com.github.mikephil.charting.charts.BarChart
            android:layout_gravity="center" > 

      <LinearLayout
            android:layout_gravity="center" >
      </LinearLayout>

</FrameLayout>

Upvotes: 0

Nima Ganji
Nima Ganji

Reputation: 601

Define your main layout as ConstraintLayout and then constraint all sides of both elements to their parent. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="600dp"
            android:layout_height="600dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">


        </LinearLayout>


        <com.github.mikephil.charting.charts.BarChart
            android:layout_width="500dp"
            android:layout_height="500dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">


        </com.github.mikephil.charting.charts.BarChart>

</android.support.constraint.ConstraintLayout>

With this code your BarChart is above your LinearLayout.

Upvotes: 0

ken
ken

Reputation: 2662

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>

Upvotes: 2

Related Questions