In my app I am calling API to get list of people with some informations (address, phone numbers etc.). Under every phone number, I am creating programatically 3 buttons (add to contacts, edit and call). Problem is, that last button is cut off (small screen). I am using Linear Layout horizontal.
Is there any way to control size of screen and if needed, put last button to second line? When I rotate screen to landscape, I have enough space, so buttons should stay in one line.
Now, I am using horizontalScrollView with visible scrollbar. It's working, but I am not very satisfied with it.
Thanks for help.
I'm not really sure if you can do that with LinearLayout. But you could do that using FlowLayout. Check this link: https://github.com/ultimate-deej/FlowLayout-for-Android.
This layout moves the buttons to the next line if there is no space for them on the screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
</LinearLayout>
the weight attribute will automatically adjust your button size
make sure you set width to match parent for all buttons.
Best to create a new variant of the listitem layout for smaller screenshots:
layout-w200dp/listitem.xml : layout with 3 buttons on one line
layout/listitem.xml : layout with buttons on separate lines
Android will then choose the multiline layout when the current available width is smaller than 200dp. (Note that you can still tweak the 200 to a different value)
Alternatively you can also use an alternatieve linearlayout which does the wrapping for you: Flowlayout
This is probably more complicated to achieve that you wan't it to be but the best shot is to use some adapter based solution:
GridView - this is the old solution, better go for the 2nd
RecyclerView with StaggeredLayoutManager setup to your needs
Simple solution is using android:layout_weight="1" and android:layout_width="0dp" as params for each button in your LinearLayout but then they will fit the whole screen and take the same percent of the width, and if the screen is too small buttons might get cut off.
Related
So I have a UI element (a single line of text) that I want horizontally centered with respect to the overall device -- unless/until it collides with other UI elements in the given view group / layout. At that point I'd like it to be either centered in the space remaining or pegged as close to being centered overall as possible without colliding. [When there's finally not enough space, then I want to use ellipses.]
Is there any way to achieve this using just standard Android layouts?
I'm currently achieving this via code that adjusts layout constraints when the view group's width changes, the text changes, or related UI elements become visible/invisible. It works fine, but I can't help thinking that some layout should just do this for me.
You can use a weighted horizontal LinearLayout like this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center_horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="i am centered"
android:ellipsize="end"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="another widget"/>
.
.
.
</LinearLayout>
The TextView with width 0dp and weight 1 will use the remaining horizontal space.
You can add additional widgets to the LinearLayout, and the TextView will always take the remaining space.
For example, if you change the Visibility of the Button to GONE, you'll see the TextView will expand to use the whole width. Similarly, if you programmatically add new widgets to the LinearLayout, the available space for the TextView will adjust.
You can further add ellipsize options to control what happens when the text does not fit in the TextView size.
I am learning Android development and I'm trying to make a simple calculator. I am having some problems with layout of the calculator. In my opinion, it would be too clunky to post the whole xml code, so I'm just going to post the snippets that matter in my opinion.
I made a vertical LinearLayout as the top-most parent, which then has 2 children, a horizontal LinearLayout, (which consists of a textView which shows your input and a button that tells to calculate) and a GridLayout, which would be 0-9 buttons and operators.
The problem is, the grid layout would be a 4x4 grid with buttons and when I want to set the First row of buttons, each button needs to get layout_height, which can't be left empty and if I set it's value to match_parent, then that button alone would fill up the whole screen.
So how can I solve this problem with layout_height, is there some workaround or would it be better to make multiple LinearLayouts for the grid? If you have any additional questions, feel free to ask so I can explain.
Here is the children LinearLayout and GridLayout xml code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#color/colorLight"
android:orientation="horizontal">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:background="#color/colorLight"
android:>
Sorry, I misunderstand your question.
If you use API 21 or newer, you can use columnCount to get it.
Please refer to that answer or that answer
The best way to sort this out for various screen sizes is to use the weight attribute. For GridLayout, there is none, according to the documentation.
Check out this answer for ideas, such as subbing nested LinearLayouts.
GridLayout (not GridView) how to stretch all children evenly
I am working on an android project. My first screen consists of one imageview and three textviews everything is clearly visible when the mobile positioned vertically if the mobile positioned horizontally then some text views are not visible how to make my app which fits to screen and supports all positions(vertical/horizontal).
Thank you.
You need to add a ScrollView to your layout. As in landscape the screen height is decreased, so lesser area is left to show elements.
ScrollView will manage all the things for you. If space available is less than required then Scroll bar will be shown otherwise not.
If you are sure that it will fit on any screen size, consider using RelativeLayout, with this you can say where it needs to align on the screen at all times. Of course if it can overflow than using a Scrollview is a much safer option.
You can use a scrollview to fit the screen in length, or you can use PercentRelativeLayout.
How to use a scrollview:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<--yourcodehere-->
</TableLayout>
</ScrollView>
Add this to your gradle to use PercentRelativeLayout:
compile 'com.android.support:percent:23.2.0'
Then you can use it like this:
<Button
android:text="#string/Tesksten"
android:id="#+id/btContent"
android:layout_below="#+id/searchView"
android:drawableTop="#drawable/ic_menu"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_heightPercent="16%"
app:layout_widthPercent="100%"
android:padding="10dp"
android:textColor="#000000"
android:background="#f0f0f0"
android:textStyle="bold"
android:alpha="0.65"
android:layout_marginBottom="10dp"/>
This is how this button looks now, note that there are more lines to get MY specific layout, remove if needed. Make sure you put Width And height to 0 and then use Percent, i had some problems figuring it out at first to. Goodluck.:
Or if you want to fully turn off screen rotation, add this to your manifest activity, that you dont want to rotate:
android:screenOrientation="portrait"
I am using the Code from JawsWare - Overlay View to create a View that lays above everything.
This works fine, but I failed to adapt the given layout to my needs.
What I want: Two Phases.
First Phase: A button in the upper left corner that is always there above all other apps.
When this button is pressed, we enter the Second Phase:
The button is replaced by two images which are to be horizontally aligned at a certain distance from the top, again floating above everything else.
I have to admit that I dont really understand Android Layouting, but I've tried fiddling with a RelativeLayout and an ImageView but it seems buggy.
Additionally, I encountered a very strange behaviour: Even if the Image is only about 200x200 px in the upper left corner, nearly the whole screen is "blocked" by the View (it receives all TouchEvents, even though there shouldt be anything). It seems that if I position the Layout using Margins to float in the middle of the screen, everything to the left and top of the visible button is also receiving touch events and not letting them pass through to the underlying app (even though there is no visible content).
Any ideas to why this happens and how to circumvent that?
Secondly: How can I achieve the two layouts from earlier?
Edit 1: My Layout. (please keep in mind that I just copied this and then did what I thought was right)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:onClick="overlayTextClicked"
android:padding="0dp"
android:id="#+id/overlay_layout_id"
>
<ImageView
android:id="#+id/imageview_info"
android:layout_width="200px"
android:layout_height="200px"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:src="#drawable/picture_010512233437384578"
android:contentDescription=""/>
<TextView
android:id="#+id/textview_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:text="info"
android:textColor="#FFF"
android:orientation="vertical"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
Afterwards I am trying to set the RelativeLayouts Gravity to TOP | CENTER_VERTICAL with a Top-Margin of 200px.
I believe what's going on here is your TextView is filling out the entire screen.
wrap_content bounds the size of a View with its content. match_parent fills a view to as big as it can get (i.e., whatever size the container is bound to).
So in this case, your RelativeLayout is does not have a max size it's bound to. Your TextView is going to try to get as big as it can get, so it's going to fill the screen. Likewise, the RelativeLayout is going to blow up to that size to wrap around the TextView.
Also, RelativeLayout doesn't really respond to Gravity well. That is used in LinearLayout and FrameLayout containers a lot, but RelativeLayout relational rules like "CENTER_IN_PARENT" are going to override whatever Gravity you set (if you set Gravity.RIGHT and "CENTER_IN_PARENT", then one has to win out I guess).
I have a linearlayout and have to inflate variable number of buttons at runtime in this Linearlayout. Now my problem is that when I give Orientation for this linear layout. if I give it Horizontal or Vertical which create the problem. Will explain it with example:-
Eg1: Input is 3 buttons
Expected Output: Button1 Button2 Button3 ( If all 3 fits in one line completely)
All the 3 buttons should be displayed in this linear layout and in same line(just like horizontal) provided they fit completely.
Eg2: Input is 4 Buttons and they cannot fit in whole line
Expected output:-
Line1:- Button1 Button2 (Assuming Button3 is not fitting completely in this line)
Line2:- Button3 Button4
Currently if I set LinearLAyout's orientation as Horizontal then its forcing all the 4 buttons in one line and the UI is getting screwed up. Same is the case if I give orientation as vertical.
Can someone tell me how to handle this at run time so that only complete buttons are displayed in one line and it spreads over multiple lines. Some generic way to handle this case.
The layout can be considered something like this for static purpose:-
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="YYYYYYYYYYYOOOOOOOOOOOOO"
android:textSize="75sp"/>
<Button
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAFFFFFFFFFFGGGGGGGGG"
android:textSize="75sp"/>
</LinearLayout>
LinearLayout doesn't work that way. It will layout items either vertically or horizontally(It doesn't wrap). You have a few options.
It sounds like your buttons will be different sizes(so you probably don't want to use gridview), you can either create Vertical LinearLayout that houses several HorizontalLinearLayouts(that in turn hold the Button).
Alternatively you can roll your own custom ViewGroup. Both methods are going to require you to write the calculation logic for determining what fits on a row. Your custom view group will likely be cleaner in the end but require more knowledge about the View.
what I understand is you need to load n number of views dynamically and you want your views to be auto carried over your parent view. I think what you need is just a gridview with a simple adapter. The "cell" of your gridview will be the buttons in your case. There is a lot of info out there about it. This is the simple guide provided from google.
http://developer.android.com/guide/topics/ui/layout/gridview.html
Hope I help you.
Regards.