CODEWITHSUNDEEP
javaandroidandroid-linearlayout
Opal
Opal

Reputation: 491

How to set a linear layout of buttons at the top of an image (layouts in android)?

I would like the radio button options to show up at the top, and the picture right below. How should I go about this? I have been playing around with putting my custom view in a linear layout and then setting android:orientation = horizontal but I don't think that works like I think it does.

enter image description here

My activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <RadioGroup
        android:id="@+id/greyorcolor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/grey"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Greyscale" />

        <RadioButton
            android:id="@+id/color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Color" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/smallorlarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Large" />

        <RadioButton
            android:id="@+id/small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Small" />
    </RadioGroup>
</LinearLayout>


    <edu.berkeley.cs160.opalkale.prog2.DrawingView
        android:id="@+id/drawing"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="3dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:src="@drawable/crayon" />


</LinearLayout>

Upvotes: 2

Views: 981

Answers (4)

virtualpathum
virtualpathum

Reputation: 763

Your radio button seems already on top. Put your image to another linear layout and set both Linear layouts inside a Relative Layout then you can position them using android:layout_above="@+id/yourImageLayoutid".

Post your layout xml file so it's easy to help

Here I have modified your 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

<LinearLayout
    android:id="@+id/llRadioButtons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/llImage".
    android:orientation="horizontal" >

    <RadioGroup
        android:id="@+id/greyorcolor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/grey"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Greyscale" />

        <RadioButton
            android:id="@+id/color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Color" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/smallorlarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Large" />

        <RadioButton
            android:id="@+id/small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Small" />
    </RadioGroup>
</LinearLayout>

<LinearLayout
    android:id="@+id/llImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
>
    <edu.berkeley.cs160.opalkale.prog2.DrawingView
        android:id="@+id/drawing"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="3dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:src="@drawable/crayon" />
</LinearLayout>

</RelativeLayout >

Please note this code might not work but you get the idea and do it your self.

Upvotes: 1

user3301551
user3301551

Reputation: 350

Try this way by changing second LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <RadioGroup
        android:id="@+id/greyorcolor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/grey"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Greyscale" />

        <RadioButton
            android:id="@+id/color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Color" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/smallorlarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Large" />

        <RadioButton
            android:id="@+id/small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Small" />
    </RadioGroup>
</LinearLayout>


    <edu.berkeley.cs160.opalkale.prog2.DrawingView
        android:id="@+id/drawing"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="3dp"
        android:orientation="vertical"
        android:src="@drawable/crayon" />


</LinearLayout>

Upvotes: 1

Hamid Shatu
Hamid Shatu

Reputation: 9700

Here is your corrected XML portion.

<edu.berkeley.cs160.opalkale.prog2.DrawingView
    android:id="@+id/drawing"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_marginBottom="3dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="3dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:src="@drawable/ic_launcher" />

You are putting "0dip" in android:layout_width instead of android:layout_height thats why you are getting the result. Replace this corrected XML portion, you will get your Layout right.

Upvotes: 1

Sharjeel
Sharjeel

Reputation: 15798

You take a parent LinearLayout with orientation Vertical. Then you add a LinearLayout with orientation horizontal and put your radio buttons in it. Then add image as 2nd child of parent Linear layout.

Something like this.

<LinearLayout  ... orientation="vertical">

   <LinearLayout orientation="horizontal">
       put your radio buttons here
   </LinearLayout>

   <ImageView />

</LinearLayout>

Upvotes: 1

Related Questions