0

I'm not sure whether to use a RelativeLayout and/or a LinearLayout to design the following screen! Would someone mind helping me out?

The correct answer can be found here: How can I add the new "Floating Action Button" between two widgets/layouts

Image of Layout

Community
  • 1
  • 1
Kamilski81
  • 14,409
  • 33
  • 108
  • 161
  • 1
    I guess the image has a fixed height, so you need a frame layout with two children: the content, and the button with a fixed marginTop value equal to the height of the image + half its size. – MLProgrammer-CiM Apr 09 '15 at 20:57
  • 1
    Is the picture and text a single view with the button overlay or the guy squatting is a separate image from the text and button? – ucsunil Apr 09 '15 at 20:58
  • 1
    Have a look at [How can I add the new “Floating Action Button” between two widgets/layouts?](http://stackoverflow.com/a/27043074/645762) will answer your question. – blizzard Apr 09 '15 at 21:15
  • 1
    see my answer [Here](http://stackoverflow.com/questions/29099622/android-ui-material-style/29100111#29100111). – Harin Apr 10 '15 at 12:02
  • Thanks for referring me to your answers. That helps. – Kamilski81 Apr 10 '15 at 17:09
  • possible duplicate of [How can I add the new "Floating Action Button" between two widgets/layouts](http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts) – Kamilski81 Apr 10 '15 at 17:09

2 Answers2

-1

The easiest option (since you have the button overlay) would be to use a RelativeLayout with a LinearLayout nested inside (assuming the guy squatting is a different widget from the one containing text). If the image of the guy sqatting and the text are together in the same widget, then you just have to replace the LinearLayout with the widget. Children of RelativeLayout take higher precedence on the Z axis. So you can have a RelativeLayout with:

<RelativeLayout
    android:height="match_parent"
    android:width="match_parent" >
    <LinearLayout
        android:height="match_parent"
        android:width="match_parent" >
        <ImageView
            android:src="some_source"
            android:height="0dip"
            android:width="match_parent"
            android:layout_weight="1"/>
        <TextView
            android:text="your_text"
            android:height="0dip"
            android:width="match_parent"
            android:layout_weight="1"/>
    </LinearLayout>
    <ImageButton
        android:id="@+id/someId"
        android:src="some_source"
        android:background="@android:color/transparent"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

Keep in mind that I am assuming the image of the guy squatting is a separate widget (ImageView) and the text below that is a separate widget (TextView) and the '+' button is a separate widget which is overlaid over the content.

ucsunil
  • 7,378
  • 1
  • 27
  • 32
  • this does make text and image has same height, but it does not need to be i guess – Jemshit Apr 09 '15 at 22:11
  • ok.. if you do not want the text and image to be same height, then you can just split the weights in whatever ratio you want. You can give 2 for the ImageView and 3 for the TextView to get a 2:3 ratio.. you can specify whatever you would like – ucsunil Apr 09 '15 at 22:20
  • Can whoever who down voted this explain why? Has the code been found not tow work or does the answer not address the question? – ucsunil Apr 10 '15 at 17:24
-2

RelativeLayout as parent with a LinearLayout set to match_parent for the split screen with two more LinearLayout's at 1:1 weight each. Then a button that's centred and to the right with a margin should do it. If you're after exactly the one you posted. So like this:

<RelativeLayout> 
    <LinearLayout width=match_parent, height=match_parent>
        <LinearLayout weight=1/> 
        <LinearLayout weight=1/> 
    </LinearLayout>
    <Button position=center-right, margin_right=1cm/> 
</RelativeLayout>

Something along those lines.

Edit: Changed it to match_parent since that's the newer version.

Gentatsu
  • 696
  • 1
  • 6
  • 26