Question

i am trying to design a page and i am facing three issues.

The first issue is to design as in the following figure

Here the burger image(from an url) at the top must be with equal margin space along with rounded image placed over it with a text randomly changing over it. Below comes the OK and Cancel button with a grey background and an red icon exactly in the center. A small part of the red icon must be placed over the above image and 2 edit text and text views below it

The second issue is i have a button in my application bar when it is clicked the burger image view must be cleared and i have to show a map in it. In such a case the red icon must be remaining at its position with a small part over the map.

I am not sure about the imageView height and width but the map must be exactly replaced at the position of the image

The third issue is i want to design this page without a scroll view, the views must be within the screen, because if we are to use Frame Layout it is not accepting inside a Scroll view

So far i have tried the following

<LinearLayout
             android:id="@+id/rrds_layout"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_margin="5dp"
             android:background="@color/burgerimg" >
                <RelativeLayout
                    android:id="@+id/rrds_round_points"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rounded_bg" >
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_centerInParent="true"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Free"
                        android:textColor="#000000"
                        android:textAppearance="?android:attr/textAppearanceMedium" />
                </RelativeLayout>
        </LinearLayout>

I don’t know the way to add the red icon and buttons a little bit over the image

how to design this page…..

as Vikram Bodicherla explained i have designed as follows

<FrameLayout>
     <ViewSwitcher>
          <TextView></TextView>
          <MapView></MapView>
     </ViewSwitcher>

       <RelativeLayout
             android:id="@+id/rrds_merge_layout2"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom">

              <ImageView
                    android:contentDescription="@string/app_name"
                    android:id="@+id/merge_bg_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/title_bg" 
                    android:layout_centerInParent="true"/>

              <TextView
                    android:id="@+id/merge_view_pro_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="OK"
                    android:layout_centerInParent="true"
                    android:clickable="true"
                    android:textAppearance="?android:attr/textAppearanceMedium" 
                    android:layout_toLeftOf="@+id/merge_center_img"
                    android:layout_centerVertical="true"/>

              <ImageView
                    android:contentDescription="@string/app_name"
                    android:id="@+id/merge_center_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:background="@drawable/red_icon" />

               <TextView
                    android:id="@+id/merge_view_cash_txt"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:clickable="true"
                    android:text="@string/mrg_cash"
                    android:textAppearance="?android:attr/textAppearanceMedium" 
                    android:layout_toRightOf="@+id/merge_center_img"
                    android:layout_centerVertical="true"/>
         </RelativeLayout>
</FrameLayout>

But still the same problem exists……

Answer 1

Design the top part and the bottom part separately.

In the top part, have a FrameLayout/ViewSwitcher which swaps between a MapView and an ImageView. As for the rounded image, create an image which has a white round in the middle, leaving everything else transparent. Set this as the background to a TextView and write your text.

The design of the second part will be fairly simple.

Let me know if you need code for specific problems.