I'm trying to horizontally place views inside a linear layout such that I can align these views horizontally but not next to each other. I tried giving margin,padding values etc. but nothing worked for me. All the views remain placed next to each other.
I want the digital clock in the extreme right and the WiFi image in the center.
Please suggest what should I use to align views with separation within them using minimum hard code.
<LinearLayout
android:id="#+id/top_bar_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/top_bar"
android:orientation="horizontal" >
<ImageView
android:id="#+id/signal_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/signal1" />
<ImageView
android:id="#+id/nosim_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/wifi_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/wifi1" />
<ImageView
android:id="#+id/battery_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/battery1"
/>
<DigitalClock
android:id="#+id/digClock_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
If you want to align things more Relatively, so that something is always at the left edge, and so on, you should use a RelativeLayout. It gives you more flexibility to work on things like that.
You should use Relative Layout. Its much more easier to make layouts with that. In your case they remain next to each, because I guess you have set the android:layout_width="wrap_content" try changing it to android:layout_width="match_parent" and try.
Related
I'm new to Eclipse and Android and I need to align controls to each other.
In Visual Studio, I can easily align controls and distribute spaces between them. How can I do this in Eclipse?
I got this xml. Just dragged and dropped them to layout. There must be an easy way to align and disstribute. Especially distrubute.
<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: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.sbs.MainActivity" >
<!-- Ders adları -->
<TextView
android:id="#+id/lblTurkce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="42dp"
android:layout_marginTop="78dp"
android:text="#string/Turkce" />
<TextView
android:id="#+id/lblDil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTarih"
android:layout_alignParentBottom="true"
android:layout_marginBottom="166dp"
android:text="#string/ingilizce" />
<TextView
android:id="#+id/lblMatematik"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTurkce"
android:layout_below="#+id/lblTurkce"
android:layout_marginTop="15dp"
android:text="#string/Matematik" />
<TextView
android:id="#+id/lblFen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblMatematik"
android:layout_below="#+id/lblMatematik"
android:layout_marginTop="18dp"
android:text="#string/FenveTeknoloji" />
<TextView
android:id="#+id/lblTarih"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblFen"
android:layout_below="#+id/lblFen"
android:layout_marginTop="24dp"
android:text="#string/tarih" />
<TextView
android:id="#+id/lblDin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/lblTarih"
android:layout_centerVertical="true"
android:text="#string/din" />
So, this is what a friend did and than I started doing too and I can align stuff pretty well.
So ,what you have to do ,is to work with LinearLayouts and their property Orientation property.
Now I don't exactly know what you want to do but I can give you a little example so that you ,hopefully understand what I am writing here.
Let's say you got 3 TextViews and you want to arrange them like two on top of the screen and the last one, you want to be below the two already aligned button.It would look pretty much like a pyramid but with the top being pointed down.
You would do this like that: The first two textViews will be put in a LinearLayout with the Orientation being set to Horizontal (so that the second textView will be in the right of the first textView but on the same line (so aligned to the first textView's right).
Now, the other one won't be necessary to be contained by a LinearLayout ,BUT, the first LinearLayout (with the first and second TextView) and the third textView have to be contained by a LinearLayout that has the Orientation being Vertical.This way the third textView is below the LinearLayout containing the two textViews.
Let me know if you need more explication.
RelativeLayout provides various alignment attributes you can use. For example, if you want to line up the left edges of two different TextViews in your RelativeLayout, you can use the layout_alignLeft attribute like so:
<?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">
<TextView
android:id="#+id/textViewOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="Text One"/>
<TextView
android:id="#+id/textViewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewOne"
android:layout_alignLeft="#id/textViewOne"
android:text="Text Two"/>
</RelativeLayout>
Note that I forced the first TextView to have a left margin and that the second TextView correctly left aligns to the first. If you take the layout_alignLeft attribute off of the second TextView, it will align to the parent's left edge instead.
I'm sure this has been answered before but I've searched relentlessly and can't find an answer that fixes my exact problem, which is:
I have a TextView on top of an ImageView setup like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageForCustomAdapter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_ball_3" />
<TextView
android:id="#+id/textOnBall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:textColor="#000000"
android:textSize="50dp"
android:hint="10"
android:layout_alignParentBottom="false"
android:layout_centerInParent="true"
android:layout_alignTop="#+id/imageForCustomAdapter"
android:layout_alignLeft="#+id/imageForCustomAdapter"
android:layout_alignBottom="#+id/imageForCustomAdapter"
android:layout_alignRight="#+id/imageForCustomAdapter"
android:gravity="center" />
</RelativeLayout>
The TextView is aligned with the ImageView to make it the same size and I want the text to be centered both horizontally and vertically.
The render in Android Studio shows it to be centered correctly This Pic Shows That
But when I actually run the app on a real device the text only centers horizontally. I've tried all the different combinations of android:gravity= but nothing seams to work.
What am I doing wrong?
I'll preface this with saying I really dislike RelativeLayout, and here's a great example. Its powerful, but can be seriously confusing, and simplicity is important.
You've got many layout directives that can easily conflict with each other. Try something like:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageForCustomAdapter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_ball_3" />
<TextView
android:id="#+id/textOnBall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="50dp"
android:hint="10"
android:layout_gravity="center" />
</FrameLayout>
The 'wrap_content' is important on the FrameLayout, btw. Assuming the ImageView is always bigger than the TextView, it'll drive the parent height. If the TextView might be bigger, make sure to center the ImageView as well.
Why it works in studio and not in real life, no idea.
I am new to android programming and am trying to understand the android architecture and how are applications built around it.
So there is no real world need for this as of now. Its just some experimentation that I am doing to learn the stuff. What I want here is 3 different views, TextView, EditText and Button, horizontally next to each other. To achieve this here's the activity_main.xml that I am using : -
<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: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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<EditText android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_to_appear_on_button" />
</LinearLayout>
On running the MainActivity.java, that has setContentView(R.layout.activity_main);, in the onCreate(), I get the TextView and the EditText widgets on the screen, horizontally next to one another, but not the Button. I wonder why ?
And strangely I have observed that the last element inside
<LinearLayout>..</LinearLayout>
is the one that gets vanished from the screen. So if <Button .. /> is exchanged with say <TextView .. />then its the <TextView> element that will not be visible on the screen now.
Please explain what am I missing out here.
I am running the MainActivity.java on the emulator and am using Eclipse as my IDE, if this information helps further.
It depends on what you want to do. If you want three things horizontally in a LinearLayout, you will likely run out of space on the screen. To guarantee that all three fit, set:
android:layout_width="match_parent"
android:layout_weight="1"
For all 3. You can mess around with the weight as you see fit, but basically this will tell the rendering to fit all three objects on the screen horizontally, each one taking up 1/3 of the screen (if you change weight, it will be different values).
If using LinearLayout, you will probably nest multiple layouts, with a main vertical LinearLayout containing several horizontal ones. It is a valid approach, and is probably a matter of preference. LinearLayout allow for weights, which can be extremely useful because they are one way of guaranteeing things don't get cut off the screen.
RelativeLayout is another approach, wherein you specify where things on the screen are relative to each other (Left, Right, Above, Below). While these don't use weights, you can align elements with the edges of the screen and get the same effect.
As I said, the approach is largely a matter of preference, and usually some mesh of both works pretty well.
I recommend to you use relative layout for your xml ,If you use linear your widgets are assigned one by one,not your wish.its for your further developement
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="101dp"
android:layout_marginTop="50dp"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="67dp"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_marginTop="59dp"
android:text="Button" />
</RelativeLayout>
I have a TableLayout inside a RelativeLayout with android:layout_centerInParent="true" as one of its attributes, but it is not being centered vertically.
Here is my xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/line_drawing_relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:id="#+id/activity_linking_tl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<TableRow
android:id="#+id/table_row_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="1dp" >
<com.xx.myview
android:id="#+id/id_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.xx.myview
android:id="#+id/id_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
<ImageButton
android:id="#+id/line_drawing_b_restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:padding="22dp"
android:src="#drawable/ic_restart" >
</ImageButton>
<!-- There are more views/widgets here -->
</RelativeLayout>
How would I solve this?
Are you sure that the RelativeLayout is taking up as much space as you think? It might be that the TableLayout is centered, but that the RelativeLayout is wrapping content, so it ends up being centered but in a smaller container than you expected. It's hard for me to gauge without seeing the RelativeLayout portion of the XML.
One way to check your layouts is to use the developer option "show layout bounds":
It will give you a better idea of how your layouts are being constructed. If you are running an older phone without this developer option, I would just start setting flat colors for View backgrounds (e.g. android:background="#F00").
Try setting parent RelativeLayout width and height to match_parent.
and add this to your TableLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
The problem was that I had android:layout_below="xxx" as well (for some reason not shown in the code I posted), which overrode the centering I was trying to achieve. Removing this solved it. Obvious really.
I have tried this. I planned to do like this:
But it showing in this way:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvHiragana"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hiragana"
android:layout_weight="2"
android:textSize="22sp" />
<TextView
android:id="#+id/tvKanji"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanji"
android:textColor="#color/redColor"
android:layout_weight="1"
android:textSize="20sp" />
</LinearLayout>
What should I do make it work correct in the terms of layout_weight? How to avoid making new lines in TextView?
What should I do make it work correct in the terms of layout_weight?
First, when using weight with a horizontal layout, your width should be 0dp. Similarly, if your layout is vertical then your height should be 0dp.
How to avoid making new lines in TextView?
use android:singleLine="true" if you want to
Constrains the text to a single horizontally scrolling line instead of letting it wrap onto multiple lines
TextView Docs
If this doesn't answer your question then please be a little more clear because its a bit confusing on what you're asking.