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>
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>
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 :)
I have two TextViews aligned in the "row", using the following layout:
<RelativeLayout
android:id="#+id/wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp">
<TextView
android:id="#+id/big_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="21sp"/>
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
But, what happens is that since the left one is larger than the right one, the result looks like this (picture is just for illustration):
Instead, this is what I'm looking for:
Tried adding gravity="bottom" to the small TextView but it didn't work.
Also tried to wrap the small TextView in another layout, set it's layout height to match_parent (so it would take the height of the big TextView) and then set the small TextView gravity to bottom, but it also didn't work.
Edit:
plot twist: how to align it to the CENTER of the big TextView?
Add this line to your smaller textview
android:layout_alignBaseline="#+id/big_text"
or
android:layout_alignBottom="#+id/big_text"
like this:
<RelativeLayout
android:id="#+id/wrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp">
<TextView
android:id="#+id/big_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textSize="21sp"/>
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_alignBaseline="#+id/big_text"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try it in the second textview
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/big_text"
android:layout_alignTop="#+id/big_text"
android:gravity="bottom"
android:textSize="14sp"
android:layout_alignParentRight="true"/>
Try this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40sp"
android:text="BIG"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="small"
android:textSize="15sp"/>
</LinearLayout>
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.
Please have a look at the following simple code.
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
The text in TextView is larger than the width of the screen and should be in single line. I added android:scrollHorizontally="true", so the user can scroll it to see the rest of the text. But, it is not happening. What have I done wrong?
Put your textview inside the HorizontalScrollView its working i am tested..
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="John Jonathan Samuwell Abbruzzi"
android:singleLine="true"
android:scrollHorizontally="true"
android:textSize="50sp" />
</HorizontalScrollView>
You need to use HorizontalScrollView with single line. If you want horizontal scrollbar for multiple views then you can create layout in HorizontalScrollView and scroll complete. HorizontalScrollView can only hold one direct child.
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="91dp"
android:singleLine="true"
android:text="my view" />
</HorizontalScrollView>