how to center relative layout in linearlayout
I want to center horizontally and vertically block L3 on this image, can you help me with the layout structure to use. ON the right side is current structure of the menu. Thanks.
Here is the layout.xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/BaseLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/mainmenu_background" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_background" />
<LinearLayout
android:id="@+id/l1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Top menu -->
<LinearLayout
android:id="@+id/l2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RelativeLayout
android:id="@+id/TopMenuHolder"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/main_menu_background_header"
android:gravity="left"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="@drawable/logo" />
<LinearLayout
android:id="@+id/TopRightButtonsHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:visibility="visible" >
<RelativeLayout
android:id="@+id/sinscrire"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="@+id/login_registerbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_sinscrire_button" />
<TextView
android:id="@+id/sinscrire_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/cpr_sinscrite_title_text"
android:textColor="@color/cpr_menubutton_black"
android:textSize="@dimen/cpr_small_menubutton_title_text_size"
android:textStyle="bold|italic" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/connexion"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="@+id/login_loginbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_logout_button" />
<TextView
android:id="@+id/connexion_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/cpr_connexion_title_text"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_small_menubutton_title_text_size"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<!-- End of Top menu -->
<!-- Middle menu -->
<LinearLayout
android:id="@+id/l3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/MiddleMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" >
<LinearLayout
android:id="@+id/MiddleLeftButtonsHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal"
android:visibility="visible" >
<RelativeLayout
android:id="@+id/Parametres"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="@+id/optionsmenu_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_options_button" />
<LinearLayout
android:id="@+id/options_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="left"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/options_icon" />
<TextView
android:id="@+id/parametres_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpr_parametres_title_text"
android:textColor="@color/cpr_menubutton_black"
android:textSize="@dimen/cpr_small_menubutton_title_text_size"
android:textStyle="bold|italic" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/Aide"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="@+id/optionsmenu_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_help_button" />
<LinearLayout
android:id="@+id/help_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="left"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/help_icon" />
<TextView
android:id="@+id/aide_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpr_aide_title_text"
android:textColor="@color/cpr_menubutton_black"
android:textSize="@dimen/cpr_small_menubutton_title_text_size"
android:textStyle="bold|italic" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/MiddleRightButtonsHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/MiddleLeftButtonsHolder"
android:orientation="horizontal"
android:visibility="visible" >
<RelativeLayout
android:id="@+id/Caisse"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="@+id/cashiericon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_cashier_button" />
<LinearLayout
android:id="@+id/caisse_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="left"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/cashier_icon" />
<TextView
android:id="@+id/caisse_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpr_caisse_title_text"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_small_menubutton_title_text_size"
android:textStyle="bold|italic" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
<!-- End of Middle menu -->
<!-- Main menu -->
<RelativeLayout
android:id="@+id/MainMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/MiddleMenu"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<ImageView
android:id="@+id/main_menu_black_rect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:src="@drawable/main_menu_black_rect" />
<RelativeLayout
android:id="@+id/play_for_real"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp" >
<ImageButton
android:id="@+id/realmoneybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitStart"
android:src="@drawable/main_menu_play_for_real_button" />
<ImageView
android:id="@+id/play_for_real_img_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/realmoneybutton"
android:layout_alignRight="@id/realmoneybutton"
android:background="@color/transparent"
android:src="@drawable/main_menu_play_for_real_button_icon" />
<LinearLayout
android:id="@+id/play_for_money_text_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical" >
<TextView
android:id="@+id/play_for_real_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpr_play_for_real_title_text"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_menubutton_title_text_size"
android:textStyle="bold" />
<TextView
android:id="@+id/play_for_real_desc"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:text="@string/cpr_play_for_real_title_desc"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_menubutton_desc_text_size" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/play_for_fun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/play_for_real"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<ImageButton
android:id="@+id/playmoneybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_play_for_fun_button" />
<ImageView
android:id="@+id/play_for_fun_img_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/playmoneybutton"
android:layout_alignRight="@id/playmoneybutton"
android:background="@color/transparent"
android:src="@drawable/main_menu_play_for_fun_button_icon" />
<LinearLayout
android:id="@+id/play_for_fun_text_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical" >
<TextView
android:id="@+id/play_for_fun_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cpr_play_for_fun_title_text"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_menubutton_title_text_size"
android:textStyle="bold" />
<TextView
android:id="@+id/play_for_fun_desc"
android:layout_width="221dp"
android:layout_height="wrap_content"
android:text="@string/cpr_play_for_fun_title_desc"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_menubutton_desc_text_size" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/tutoriel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/play_for_fun"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp" >
<ImageButton
android:id="@id/previewbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@color/transparent"
android:scaleType="fitXY"
android:src="@drawable/main_menu_tutorial_button" />
<TextView
android:id="@+id/tutoriel_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="@string/cpr_tutoriel_title_text"
android:textColor="@color/cpr_menubutton_white"
android:textSize="@dimen/cpr_menubutton_title_text_size"
android:textStyle="bold" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<!-- End of Main menu -->
</LinearLayout>
<!-- End of Main Container -->
</RelativeLayout>
Answer
Here is a Linear Layout with a Relative Layout centered inside.
Move your code from the "l3" layout to the "l4" layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/l1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/l2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#56a"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="l2" />
</LinearLayout>
<RelativeLayout
android:id="@+id/l3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#a56" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="l3" />
<RelativeLayout
android:id="@+id/l4"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#5a6" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="l4" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>