Hello I'm trying to figure how to work with LinearLayouts. I dragged one horizontal layout to my XML file, I then dragged three TextView one next to each other. When I'm trying to drag ImageView and place it below them, it always pushes the TextView aside. How can I fix this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="397dp"></LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_vertical" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="70dp"
android:weightSum="1">
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Movie Name"
android:id="#+id/textView"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
/>
<TextView
android:layout_width="110dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Actor Name"
android:id="#+id/textView2"
android:layout_marginLeft="10dp"
android:layout_marginTop="30dp" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Grade"
android:id="#+id/textView3"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp" />
</LinearLayout>
</LinearLayout>
You have not mentioned orientation for the main parent LinearLayout so by default it is considering it to be horizontal and showing images and text views in same line.
The following LinearLayout is useless as it does not have any children.
You need to declare orientation of LinearLayout to be vertical to show image below your other layout.
Some pseudo code will be like,
<LinearLayout
orientation="vertical"
...>
<LinearLayout
orientation="horizontal"
...>
<TextViews ... />
</LinearLayout>
<ImageView ... />
</LinearLayout>
LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.
So My suggestion is Dont use specific width and Height, ALways use wrap_content or match_parent
For More Details see here
This is XML Code that You wants.
try the Below code. You should give the android:orientation="vertical"for the parent LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:text="Movie Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="30dp"
android:text="Actor Name"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="30dp"
android:text="Grade"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
</LinearLayout>
Happy Coding :)
Related
i have an interface with two ImageButtons and a TextView among them. The TextView contains a number and the two ImageButtons control that number, adding or removing 1.
The problem is when the number becomes two digits: the TextView width increase and one of two ImageButtons moves.
As you can see when the number is one digit there isn't any type of problem, but when it becomes two digits the ImageButton moves from his place. I already tried with android:layout_gravity and with android:gravity but they doesn't function. There is a way to keep the TextView "centered" and make sure the ImageButton doesn't move?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:autofit="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="5dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/foodName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:gravity="center_vertical"
android:hint="food_name"
android:maxLines="2"
android:textAllCaps="false"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:orientation="horizontal"
android:padding="5dp">
<ImageButton
android:id="#+id/addFood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
app:srcCompat="#drawable/ic_add_black_40dp" />
<TextView
android:id="#+id/foodQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center|center_horizontal"
android:maxLength="2"
android:text="0"
android:textColor="#707070"
android:textSize="20sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/removeFood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
app:srcCompat="#drawable/ic_remove_black_40dp" />
</LinearLayout>
</LinearLayout>
This is my code and this is the layout of a RecyclerView member, because I created a personalized element.
Thanks a lot.
Since you have wrap_content on your foodQuantity TextView, addFood is going to move to accommodate for the extra spacing required to add multiple digits. If you want to keep the position of the button fixed, and make sure the buttons don't move, then you are going to have to give your TextView a fixed width to accommodate for the maximum number of characters you can expect.
I would suggest you to use android:layout_weight so you can define which element is filling the remaining space if necessary. So when setting the TextView a layout_weight of 1 and the ImageButtons a layout_weight of 0 you can afterwards set the android:gravity of the TextView that is defining the gravity inside of the TextView to center and it will always be centered.
BUT: you need to set the width of the LinearLayout to match_parent so it fills the parent. Without that the LinearLayout will never get some remaining space since it always shrinks to the size that all elements need together
...
...
<LinearLayout
android:id="#+id/layout_count"
android:layout_width="200dp"
or android:layout_width="match_parent
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
<TextView
android:layout_width="match_parent"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:text="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
<TextView
android:layout_width="match_parent"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content"
android:text="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_complete" />
</LinearLayout>
</LinearLayout>
I have 2 rows of "buttons" which are composed of a vertical LinearLayout of an ImageView and a TextView. The problem I'm having right now is trying to set the ImageView aspect ratio without hardcoding its dimensions.
I have already tried playing with the layout weights but it still forces the TextView to be partially cut off.
The xml structure I have is 2 horizontal LinearLayouts and each button is described above.
I've included a picture of my problem. You can see the first button is forcing the TextView out of the bounds. The rest of the buttons you see are hardcoded dimensions, but I don't want to do that because smaller screen sizes won't work.
Here is my layout for one button:
<LinearLayout
android:gravity="center_horizontal"
android:layout_weight="1"
android:padding="5dp"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
</LinearLayout>
Try using images with lower dimensions.
Try using a RelativeLayout and setting the TextView as anchor for the image:
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp">
<TextView
android:id="#+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:text="Settings"
android:textAlignment="center"
android:textColor="#android:color/white"
android:autoSizeTextType="uniform" />
<ImageView
android:id="#+id/setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#id/setting_text"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:background="#null"
android:clickable="true"
android:onClick="openSettings"
android:src="#drawable/menu" />
</RelativeLayout>
I have 7 image buttons I am displaying and while editing the xml the preview looks perfect, however when I launch the app in an emulator it doesn't seem to scale and is cutting off the images.
It should look like this:
-0-0-
0-0-0
-0-0-
Where the '0's are the buttons. I have it setup for one overall relative layout and three linear layouts. The middle places first then the top and bottom align off the middle.
Here is my XML file
<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:orientation="horizontal"
android:id="#+id/activity_color_wheel">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon1"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:id="#+id/dode2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon2"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:id="#+id/dode3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon3"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/bottom">
<ImageButton
android:id="#+id/dode4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon4"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon5"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/top">
<ImageButton
android:id="#+id/dode6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon6"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon7"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:textSize="25dp" />
</RelativeLayout>
Basically the top and bottom layouts get cut off near the bottom. I figure i'm missing some kind of scaling property, but i'm not sure.
All of your views' width and height are "wrap content".
In that case if the total images width/height is greater then the screen's width/height it will just cut off.
what you should do is:
1) set the LinearLayouts width to "match parent".
2) set weight to the children views as you wish.
3) set children width to 0dp for better performance.
Example code snippet:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:layout_weight="1"
android:id="#+id/dode2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:layout_weight="1"
android:id="#+id/dode3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
Good luck.
If your problem is only with the top and bottom images, then you only need to add a ScrollView as a parent to your RelativeLayout.
<LinearLayout
android:id="#+id/layout_information"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.17"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold"
android:layout_gravity="bottom"
/>
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:textStyle="normal"
android:layout_gravity="bottom"
/>
</LinearLayout>
I want to center the two textViews vertically,
but I want them to be aligned to one line at their bottom.
Now they are alined to the same bottom,
but they are at the bottom of their parent layout.
How can I do this?
I have thought to wrap their current layout parent ("parent1") with another layout
("parent2")
and make "parent1" be in the center of "parent2".
Is there another way without adding elements?
If your problem is that both views are aligned at the bottom of their parent you can use this.
Both views are still aligned to the same bottom and centered on the screen.
Your layout looks like a part of a bigger XML (weight=0.17), that is why I have used fill_parent on layout_width.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_information"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.17"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:textStyle="normal"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/text_view_destination"
android:layout_alignBaseline="#id/text_view_destination" />
</RelativeLayout>
try this way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_information"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|bottom"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="HOme in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:text="Home out"
android:textStyle="normal" />
</LinearLayout>
I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.
I want these 4 buttons to be stretched over the whole width! here is my code
<HorizontalScrollView
android:id="#+id/items_HorizontalBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/vf"
android:background="#80000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Light"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Door"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Alarms"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Window"
android:textColor="#color/green_color"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort.
XML:
android:fillViewport="true"
Programmatically:
hsv.setFillViewport(true);
For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.
For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp", then add android:layout_weight="0.25".
This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.
However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...
try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid.
try something similar to this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="233dp"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.