CODEWITHSUNDEEP
androidandroid-studioimageviewandroid-togglebutton
Vik
Vik

Reputation: 23

Placing ImageView to the left of centered buttons

I am trying to place a ImageView object to the left of a linear layout object (that is a parent of two buttons). I basically want two buttons centered horizontally with the screen with an image place to the left of the centered buttons. I still want the buttons to remain centered horizontally, the placed image view should not be centered, just merely to the side.

Any suggestions would be really great. I may have been approaching my problem with the wrong layouts but here is what I have tried:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/gameSettingsContainer"
    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"
    android:fitsSystemWindows="true"
    tools:context="com.example.vb1115.multchoicequestion.LaunchScreen"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <LinearLayout
        android:id="@+id/buttonContainer"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ToggleButton android:id="@+id/mathButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textOff="Math"
            android:textOn="Math"
            android:text="Math"/>
        <ToggleButton android:id="@+id/bioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textOff="Biology"
            android:textOn="Biology"
            android:text="Biology"/>
    </LinearLayout>
    <ImageView
        android:id="@+id/animatedArrow"
        android:src="@mipmap/green_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/buttonContainer"/>
</RelativeLayout>

Upvotes: 1

Views: 82

Answers (3)

Helix
Helix

Reputation: 144

Without having android studios to test:

To center the LinearLayout within the RelativeLayout use the Layout_centerHorizontal="true"

<LinearLayout
    android:id="@+id/buttonContainer"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

For each of the buttons to be distributed evenly and centered use layout_weight="1" (so each have the same weight) and gravity="center_horizontal"

    <ToggleButton android:id="@+id/mathButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="Math"
        android:textOn="Math"
        android:text="Math"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"/>
    <ToggleButton android:id="@+id/bioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="Biology"
        android:textOn="Biology"
        android:text="Biology"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"/>

Then place the ImageView to layout_toStartOf your buttonContainer

<ImageView
        android:id="@+id/animatedArrow"
        android:src="@mipmap/green_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/buttonContainer">

Upvotes: 0

Skalaw
Skalaw

Reputation: 106

Here solution

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/gameSettingsContainer"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:id="@+id/buttonContainer"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ToggleButton
            android:id="@+id/mathButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Math"
            android:textOff="Math"
            android:textOn="Math"/>

        <ToggleButton
            android:id="@+id/bioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Biology"
            android:textOff="Biology"
            android:textOn="Biology"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/animatedArrow"
        android:layout_toStartOf="@+id/buttonContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/green_arrow"/>
</RelativeLayout>

Upvotes: 1

JBA
JBA

Reputation: 2899

Although I don't have my Android Studio to test, I can already make a few assumptions...

1st, no need to use android:orientation="vertical" nor android:gravity="center_horizontal" for your root RelativeLayout...

2nd, to position the 2 children elements use android:layout_centerHorizontal for the LinearLayout, and keep android:layout_alignParentLeft for your ImageView...

This should begin to be a bit better... The main idea is that in a RelativeLayout it's usually more efficient to let the children decide their position... Hope this will help.

Upvotes: 1

Related Questions