Trouble in Layout design Android - android

I have created an Android Application in that I have problem in Layout design.
Please see layout in this link-
https://lh6.googleusercontent.com/WJRLolp6PVoKskRBdFH6VMmdqftSgt10EZhd-A1h_glblYoJjVrF8bYjsPXmw752sGttlzIh7IHwtQo=w1342-h479
My code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/product_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/product" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/product_image"
android:layout_alignParentRight="true"
android:text="Price"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
<ImageView
android:id="#+id/user_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/userimage" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
Thanks.

<ImageView
android:id="#+id/user_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:layout_marginTop="-25dp"
android:src="#drawable/ic_launcher" />
change the user image xml to above code and try

You can use the Relative layout for that
or
you can make it custom layout
http://www.vogella.com/tutorials/AndroidCustomViews/article.html

Related

Circle ImageView in the center of layout

Sorry for my english. I want to create a circle ImageView and i use this library all is well, but i can't locate this image in the center of my layout. I create to display in all screen Resolutions, and i use layout_weight if use layout_weight I can not put a static size image.
Bellow is my xml:
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
>
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_alignParentTop="true"
android:layout_gravity="center" />
</RelativeLayout>
The result of this code:
UPD:
my xml
<RelativeLayout
android:layout_weight="0.4"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/p_edit_proofile"
android:id="#+id/editProfile"
android:layout_gravity="right"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<LinearLayout
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
>
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_centAerInParent="true" />
</RelativeLayout>
<TextView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text=""
android:id="#+id/nameProfile"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text=""
android:id="#+id/status" />
<TextView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="test"
android:textColor="#4fcc54"
android:id="#+id/aided" />
<LinearLayout
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:text="PIN"
android:id="#+id/pin"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_marginLeft="80dp"
android:src="#mipmap/p_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/key" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Use android:layout_centerInParent="true"
<com.pkmmte.view.CircularImageView
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/p_img"
android:id="#+id/imageProfile"
android:layout_centerInParent="true" />
This will center the image in your RelativeLayout
In your nested RelativeLayout remove android:layout_weight and add android:layout_gravity = "center".
Try to use android:gravity="center_horizontal"
<RelativeLayout
android:layout_weight="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
>
try to use this:
android:layout_centerInParent="true"
in the CircularImageView
Regards

How to create a login form in Android?

I want to create a login form. But i am new in android so i am not able to do it properly. I have to put the logo of the company on it's header. After that the heading will be Like Login to you are account after that in a box the user name and password. So i am posting my xml please upadte it. Thanks...
This is how i have to create it from this link please check this
http://s23.postimg.org/btie12dvv/Login_Page2.jpg
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#5F04B4"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal" >
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="User Name"
android:textColor="#ffffff"
android:textSize="13dp"
android:textStyle="bold" />
<EditText
android:id="#+id/edtUserName"
android:layout_width="200dp"
android:layout_height="wrap_content" >
</EditText>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Password"
android:textColor="#ffffff"
android:textSize="13dp"
android:textStyle="bold" />
<EditText
android:id="#+id/edtPassword"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:password="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<Button
android:id="#+id/btnLogin"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
</LinearLayout>
For setting company logo in header:
getActionBar().setHomeButtonEnabled(true);
Drawable d=getResources().getDrawable(R.drawable.company_logo.png);
getActionBar().setBackgroundDrawable(d);
For setting title: Login
getActionBar().setTitle("Login");
I hope it will help you.
I created a sample code. You need to replace proper images with sample one.
layout code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imgLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_below="#+id/imgLogo"
android:background="#092EA1"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Login to Your Account"
android:textColor="#android:color/white"
android:textSize="25sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="260dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="17dp"
android:layout_marginTop="15dp"
android:background="#android:color/darker_gray" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="40dp"
android:hint="Usrname" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="260dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="17dp"
android:layout_marginTop="15dp"
android:background="#android:color/darker_gray" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignRight="#+id/imageView2"
android:layout_alignTop="#+id/imageView2"
android:layout_marginLeft="40dp"
android:hint="Password"
android:inputType="textWebPassword" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView2"
android:layout_below="#+id/imageView2"
android:layout_marginTop="26dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignRight="#+id/imageView2"
android:text="Forget Password?"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
This will look like,
after 1st LinearLayout (root) you can write these lines:
<RelativeLayout
android:id="#+id/headerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top" >
<View
android:id="#+id/headerView"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:background="#drawable/Your-header-file-name" />
</RelativeLayout
Alternatively you may use LinearLayout instead of Relative. I used this one because it will not affect your LinearLayout. It's a good practice for beginners to use a weight for LinearLayout like:
<LinearLayout (root)
android:orientation="vertical"
android:weightSum ="2" >
<LineaLayout (child1)
android:layout_weight="1"/>
<LineaLayout (child2)
android:layout_weight="1"/>
</LinearLayout>
this will divide your layouts with weight 1. so you will get half screen for child 1 and remaining half for child 2

Android - How to position 4 text views?

UPDATE: I've opened a new thread with my updated question here:
Android - How to display 4 text views with Icons?
Thank you for your answers, I'd really appreciate it if you could help me with my newer thread above.
I'm trying to display 4 text views at the bottom of the screen but I can't figure out how to that that. Every time I try to move one button it screws up the rest.
Here's what it currently looks like:
Here's my manuel marks as to where I want to position the buttons (Each line represents a text view item position):
Here's the current code, any pointers would be really great:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true" >
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="124dp"
android:layout_toRightOf="#+id/ButtonRate"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignRight="#+id/ButtonWallpaper"
android:text="TextView" />
<TextView
android:id="#+id/ButtonWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView2"
android:layout_marginRight="50dp"
android:layout_marginTop="137dp"
android:clickable="true"
android:onClick="setWallpaper"
android:text="#string/set_wallpaper"
android:textColor="#color/red" />
<TextView
android:id="#+id/ButtonRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/ButtonWallpaper"
android:layout_alignBottom="#+id/ButtonWallpaper"
android:layout_alignParentLeft="true"
android:layout_marginLeft="50dp"
android:clickable="true"
android:onClick="rate"
android:text="#string/rate_button"
android:textColor="#color/red" />
I'm really stuck.
Thanks very much in advance,
Dvir
You need to put another relative layout after ViewPager for your textViews, and add android:layout_alignParentBottom="true" to that Layout like this:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/ButtonRate"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignRight="#+id/ButtonWallpaper"
android:text="TextView" />
<TextView
android:id="#+id/ButtonWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView2"
android:layout_marginRight="50dp"
android:clickable="true"
android:onClick="setWallpaper"
android:text="hello" />
<TextView
android:id="#+id/ButtonRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/ButtonWallpaper"
android:layout_alignBottom="#+id/ButtonWallpaper"
android:layout_alignParentLeft="true"
android:layout_marginLeft="50dp"
android:clickable="true"
android:onClick="rate"
android:text="hello2" />
</RelativeLayout>
Also note that I've deleted android:layout_marginTop parameters, you can adjust it, if you wish
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
You can do something like that :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="394dp"
android:adjustViewBounds="true" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/ButtonRate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="39dp"
android:text="ButtonRate" />
<TextView
android:id="#+id/ButtonWallpaper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="60dp"
android:text="ButtonWallpaper" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignLeft="#+id/ButtonWallpaper"
android:layout_marginLeft="22dp"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/ButtonRate"
android:layout_centerVertical="true"
android:text="TextView" />
</RelativeLayout>

How can i implement this layout?

I have a layout that has 3 buttons. And I want to locate two textviews to each imageview. How can i implement this layout? AbsoluteLayout is enough for my needs?
Here is my layout part.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="center_horizontal"
android:weightSum="2" >
<ImageView
android:id="#+id/btn1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
<ImageView
android:id="#+id/btn2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
<ImageView
android:id="#+id/btn3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/gray" />
</LinearLayout>
I want to implement this layout. Boxes are imageview.
a busy cat http://img824.imageshack.us/img824/2385/layoutrq.jpg
Using Linear Layout you can do like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="3"
android:background="#F0F0F0" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
Use RelativeLayout instead of ImageView :
<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:gravity="center"
android:background="#000">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:text="TextView2" />
</RelativeLayout>
I would recommend to create a separate layout and class for it for reusing.
use Button instead of ImageView.
Use the Button instead of ImageView, You probably want a custom button background?
Use this:
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/album_icon"
android:background="#drawable/round_button" />
Or this to still use the image file:
ImageView iv = (ImageView)findViewById(R.id.ImageView01);
iv.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
}
});
Is this what you need?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/btn1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_alignParentLeft="true"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Label 1" />
<TextView
android:id="#+id/txt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 2" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/btn2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_toRightOf="#id/btn1"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:text="Label 3" />
<TextView
android:id="#+id/txt4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 4" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/btn3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:layout_toRightOf="#id/btn2"
android:background="#drawable/gray"
android:orientation="vertical">
<TextView
android:id="#+id/txt5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:text="Label 5" />
<TextView
android:id="#+id/txt6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="Label 6" />
</RelativeLayout>
</RelativeLayout>
Edit: Check now. You can set the background of the relativeLayouts to whatever you wanted in the imageviews and set a clicklistener so they act like buttons.

RelativeLayout position problems

I have a layout which contains 4 horizontal LinearLayouts with 3 ImageButtons inside each one.
Now I want to convert those LinearLayout to RelativeLayout because I need to add some more elements and I have to use toRightOf, alignParentTop etc.
Here's the code I'm using to do this change:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/bugbox_wall_port" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/writeNewMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="New" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/spyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgspy" />
<ImageButton
android:id="#+id/playerMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgplyr"
android:layout_toRightOf="#id/spyMsgs" />
<ImageButton
android:id="#+id/allyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgally"
android:layout_toRightOf="#id/playerMsgs" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/battleMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgbatt" />
<ImageButton
android:id="#+id/skynetMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgnet" />
<ImageButton
android:id="#+id/transportMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgtrans" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/expeditionMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgexp" />
<ImageButton
android:id="#+id/newsMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgnews" />
<ImageButton
android:id="#+id/buildingMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgbuild" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/allMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgall" />
<ImageButton
android:id="#+id/binMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#drawable/msgbin" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But I do not know why, the RelativeLayout is being problematic.
Here's an image where I explain graphically which's my problem:
http://img811.imageshack.us/img811/5479/stackes.jpg
It is driving me nuts. I do not know why is this happening. I've used RelativesLayout before and they weren't problematic.
So my question is: Why is this happening? and then How can I fix this error?
Thank you in advance!
Try this one. I commented out the linear layouts at the bottom. If the relative layout works the way you want it to then you can adjust the other linears accordingly.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#drawable/bugbox_wall_port" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/writeNewMsg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="New" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/spyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/playerMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/ic_launcher"
android:layout_toRightOf="#id/spyMsgs" />
<ImageButton
android:id="#+id/allyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:layout_toRightOf="#id/playerMsgs" />
</RelativeLayout>
<!-- <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/battleMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgbatt" />
<ImageButton
android:id="#+id/skynetMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgnet" />
<ImageButton
android:id="#+id/transportMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgtrans" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/expeditionMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgexp" />
<ImageButton
android:id="#+id/newsMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgnews" />
<ImageButton
android:id="#+id/buildingMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgbuild" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/allMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgall" />
<ImageButton
android:id="#+id/binMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#drawable/msgbin" />
</LinearLayout> -->
</LinearLayout>
</ScrollView>
Solved. I was setting an ID to the views programatically and I didn't realise...

Categories

Resources