How to obtain this xml android layout - android

I've seen this layout ( http://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2014/03/Instaedit1.jpg ) and i wanna do somthing like that but i don't know what i have to do to obtain that result.
i've tried with a relative layout which contains a imageview and a gridlayout which contains three imagebutton.
<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"
tools:context="com.example.prova.MainActivity$PlaceholderFragment" xmlns:app="http://schemas.android.com/apk/res/com.example.prova">
<ImageView
android:id="#+id/imageView1"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/profile" />
<android.support.v7.widget.GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView1"
app:columnCount="3"
app:orientation="horizontal"
app:rowCount="1"
app:useDefaultMargins="false" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill_horizontal"
android:scaleType="center"
android:src="#drawable/friend" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_gravity="fill_horizontal"
android:maxHeight="100dp"
android:src="#drawable/fotocamera" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/eventi" />
</android.support.v7.widget.GridLayout>
</RelativeLayout>
But i don't obtain the same result of the top of the image.
I've tried changing the gravity value and width value but nothing.
Can you help me??? (sorry for my bad english :P Thanks).


I worked on your code to obtain this: http://it.tinypic.com/view.php?pic=2aj1cms&s=8#.UyhKXtT5OBM
It's a better result but i don't understand why there are s space between the imagebutton.
My code is this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.prova"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.prova.MainActivity$PlaceholderFragment" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/profile" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:weightSum="3" >
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/friend" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/fotocamera" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/eventi" />
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Aggiungi agli amici" />
</LinearLayout>
</LinearLayout>
Any idea??

Related

How can I prevent my bottom toolbar with 3 images from being stretched out?

I have a bottom layout with three images. I want them to be equally distributed. To do this, I used the layout_weight xml property. But the visual representation of them is awful – the images are all stretched out
The images' dimension is 32*32.
The layout code for this particular toolbar is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar_bottom"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:minHeight="50dp"
android:background="#ffff8c0e"
appo:theme="#style/ToolbarTheme"
android:minWidth="50dp"
android:elevation="10dp"
>
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="fitXY"
android:layout_weight = "1"
android:src="#drawable/new_icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"
/>
</LinearLayout>
How can I make them appear properly?

wrap ImageView in another layout say RelativeLayout.
i.e do something like this.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:appo="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffff8c0e"
android:elevation="10dp"
android:minHeight="50dp"
android:minWidth="50dp"
appo:theme="#style/ToolbarTheme" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/camera_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/camera_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/new_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this will help.

Remove android:scaleType="fitXY" from your code.Because All it does is scale the bitmap up to the size of the ImageView.
Refer this.
<LinearLayout
android:id="#+id/toolbarmenucontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/camera_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/news_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/facebook_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:src="#mipmap/ic_launcher" />
</LinearLayout>

Just use RelativeLayout like this:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:id="#+id/camera_image"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/camera_icon"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/news_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:clickable="true"
android:src="#drawable/new_icon"
android:scaleType="fitXY"/>
<ImageView
android:id="#+id/facebook_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/facebooc_image"/></RelativeLayout>

There is this nice library that solves by problem:). It uses bottom navigation.

set your imageview scale type as you want, there are different options
android:scaleType="fitXY"
or
center, centerCrop,centerInside,fitCenter etc

Android XML - Unable to Prevent ImageView Overlap

I'm attempting to prevent two images from overlapping - and I though I'd be able to do so using two RelativeLayouts inside a LinearLayout - both set to wrap_content - however the two imageViews ( #+id/imageView1 - the boxart and #+id/background - the background) however they still seem to overlap.
Can someone spot what I may have done wrong in this implementation?
XML Source:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black" >
<RelativeLayout
android:id="#+id/rl_ListView2"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#color/black" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#drawable/boxart"
android:gravity="left"
android:paddingBottom="65dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/background_faded"
android:gravity="right"
android:paddingBottom="65dp"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/downloadbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginTop="200dp"
android:paddingLeft="500dp"
android:src="#drawable/button_download" />
<ProgressBar
android:id="#+id/progressbar_Horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="585dp"
android:layout_height="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="440dp"
android:layout_marginRight="100dp"
android:max="100"
android:progressDrawable="#drawable/progressbar2" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#drawable/timeline_bottom_android"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:src="#drawable/icon_back_arrow" />
<TextView
android:id="#+id/backButtonTxt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/saveButton"
android:gravity="center_vertical"
android:text="Movies"
android:textSize="40sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/downloadbtn"
android:layout_below="#+id/downloadbtn"
android:layout_marginRight="207dp"
android:layout_marginTop="110dp" />
</RelativeLayout>
</LinearLayout>
Screenshot:

Instead of using Relative layout use a Linear layout with orientation horizontal and then use two Linear layouts with layout_weight=1 for each ImageView. It will divide your screen into two equal parts horizontally.
For example :-
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" />
<LinearLayout android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" />
</LinearLayout>
As per your given layout update your layout as follows:-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/rl_ListView2"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/boxart"
android:paddingBottom="65dp" />
</LinearLayout >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/background_faded"
android:gravity="right"
android:paddingBottom="65dp"
android:scaleType="fitXY" />
</RelativeLayout>
<ImageView
android:id="#+id/downloadbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginTop="200dp"
android:paddingLeft="500dp"
android:src="#drawable/button_download" />
<ProgressBar
android:id="#+id/progressbar_Horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="585dp"
android:layout_height="5dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginBottom="440dp"
android:layout_marginRight="100dp"
android:max="100"
android:progressDrawable="#drawable/progressbar2" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#drawable/timeline_bottom_android"
android:orientation="horizontal" >
<ImageView
android:id="#+id/backbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="left"
android:src="#drawable/icon_back_arrow" />
<TextView
android:id="#+id/backButtonTxt"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/saveButton"
android:gravity="center_vertical"
android:text="Movies"
android:textSize="40sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/downloadbtn"
android:layout_below="#+id/downloadbtn"
android:layout_marginRight="207dp"
android:layout_marginTop="110dp" />
</LinearLayout>

With regards to your particular situation, the 2 ImageViews causing problems are placed each in a RelativeLayout, which are also placed in a RelativeLayout. Views placed in a relative layout can overlap each other. So when you added the 2 children RelativeLayouts in the parent one, exactly this happened. To make one follow the other, you can add android:layout_toRightOf="#id/id_of_the_layout_you_want_on_the_left_of_this_one" to the second child.
Also, if you are willing to change your layout a bit, you could achieve this through weight and LinearLayout (note however that this will work only if the desired combined width of the 2 children is less than what the parent is willing to offer):
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
</LinearLayout>
</LinearLayout>

Gridlayout pictures to small eclipse

I have a gridLayout form 3 by 3. with in there imagebuttons.
the grid is working, but i want the images to fill the weight of the parent.
this is the code i have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
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="com.example.tict.MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<GridLayout
android:id="#+id/mygrid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:columnCount="3"
android:rowCount="3" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</GridLayout>
I want to keep the gridLayout if that is posible.
EDIT: I want 3 image buttons at the top row. All 3 being 1/3 weight of the parent.

You are using layout_width and layout_height properties with
wrap_content : , which means that the view wants to be just big enough to enclose its content (plus padding)
change to:
match_parent : which means that the view wants to be as big as its parent (minus padding)

I could't find a solution, so made a nested LiniarLayout.
Part of the new code is now:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/TG" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/ib_1"
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight=".30"
android:background="#android:color/white"
android:contentDescription="#string/btn"
android:onClick="onClick"
android:scaleType="fitXY"
android:layout_margin="5dp"
/>

I want to scroll the images

I want to scroll the images in such a way that the back button is not scrolled. I am trying to take the back button above the scroll view but unable to find the solution. Please help. This is my code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/back" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/animal1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:src="#drawable/ant" />
<ImageButton
android:id="#+id/animal2"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal1"
android:src="#drawable/bat" />
<ImageButton
android:id="#+id/animal3"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal2"
android:src="#drawable/bear" />
<ImageButton
android:id="#+id/animal4"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal3"
android:src="#drawable/cheetah" />
<ImageButton
android:id="#+id/animal5"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_below="#+id/animal1"
android:src="#drawable/cow" />
<ImageButton
android:id="#+id/animal6"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_below="#+id/animal2"
android:layout_toRightOf="#+id/animal5"
android:src="#drawable/donkey" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
And now the button is going behind. Its getting hidden.

Solution of your question.
Step 1
Take a RelativeLayout as parent of your ScrollView. And set property to left assign to your ScrollView.
Step 2
Instead of placing ImageView at the end of your ScrollView, place it at Right Of your ScrollView.
Solution 1
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:orientation="vertical"
android:layout_toLeftOf="#+id/animal_back" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
...
</RelativeLayout>
</ScrollView>
I added android:layout_toLeftOf="#+id/animal_back" code. So that ImageView will be visible to right side. and ScrollView will be set to left side of ImageView.
Solution 2
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
...
</RelativeLayout>
</ScrollView>
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>

Put back button outside from scroll view. And then adjust thier positions as you want.

Keep outside your back button of Scrollview, Can you just try below code#
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:orientation="vertical" >
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/update" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/animal_back" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/animal1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/animal2"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_toRightOf="#+id/animal1"
android:layout_weight="1.0"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/animal3"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_toRightOf="#+id/animal2"
android:layout_weight="1.0"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/animal4"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_toRightOf="#+id/animal3"
android:layout_weight="1.0"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/animal5"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_below="#+id/animal1"
android:layout_weight="1.0"
android:src="#drawable/icon" />
<ImageButton
android:id="#+id/animal6"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_below="#+id/animal2"
android:layout_toRightOf="#+id/animal5"
android:layout_weight="1.0"
android:src="#drawable/icon" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/back" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/animal1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:src="#drawable/ant" />
<ImageButton
android:id="#+id/animal2"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal1"
android:src="#drawable/bat" />
<ImageButton
android:id="#+id/animal3"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal2"
android:src="#drawable/bear" />
<ImageButton
android:id="#+id/animal4"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_toRightOf="#+id/animal3"
android:src="#drawable/cheetah" />
<ImageButton
android:id="#+id/animal5"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_below="#+id/animal1"
android:src="#drawable/cow" />
<ImageButton
android:id="#+id/animal6"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1.0"
android:layout_below="#+id/animal2"
android:layout_toRightOf="#+id/animal5"
android:src="#drawable/donkey" />
</RelativeLayout>
</ScrollView>

use frameLayout for your layout. this will help you to achieve what you want. Frame Layout details you can get here

I got the solution. I just need to bring the back button at front position by adding this line......
back.bringToFront();
Thanks all.

// try this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<LinearLayout android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="4">
<ImageButton
android:id="#+id/animal1"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:minWidth="200dp"
android:src="#drawable/ant" />
<ImageButton
android:id="#+id/animal2"
android:layout_width="0dp"
android:layout_height="200dp"
android:minWidth="200dp"
android:layout_weight="1"
android:src="#drawable/bat" />
<ImageButton
android:id="#+id/animal3"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:minWidth="200dp"
android:src="#drawable/bear" />
<ImageButton
android:id="#+id/animal4"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:minWidth="200dp"
android:src="#drawable/cheetah" />
</LinearLayout>
<ImageButton
android:id="#+id/animal_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/back" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/animal5"
android:layout_width="0dp"
android:minWidth="200dp"
android:layout_height="200dp"
android:layout_weight="1"
android:src="#drawable/cow" />
<ImageButton
android:id="#+id/animal6"
android:layout_width="0dp"
android:minWidth="200dp"
android:layout_height="200dp"
android:layout_weight="1"
android:src="#drawable/donkey" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Placing a TextView below two ImageViews and in middle - Android

Please share code to achieve the layout of the screen shown in the below link. The text should be in center of the two images and all these components can be dynamic.
(https://docs.google.com/file/d/0B9n2IhVep_QeNDFKaWFHVERQOVk/edit?usp=sharing)
https://www.dropbox.com/s/2j4bpwdmv0wgesg/Untitled%20Diagram.png

Hope this works
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:text="TextView" />
</LinearLayout>

An easier way to do this is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/yourBackgroundDrawableBorder"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:background="#drawable/yourBackgroundDrawableBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"
android:padding="xxdp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/global_menu_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:text="Textview" />
</RelativeLayout>
You need to add the custom drawables for the shapes you desire for your views..and yes obviously this is a very generic way to do it. You obviously have to edit some properties or add some to suit your needs. The other way is to use LinearLayout and the android:layout_weight="1" property to make your imageviews similar in size.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:layout_marginLeft="10dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:layout_marginTop="10dp"
android:text="Text" />
</LinearLayout>

Categories

Resources