I want to achieve this feat in Android.
Now this is a processed screenshot of what I want to realize. Above this layout there is a image and those are buttons.Now my question: is this a gridLayout or there are just buttons on a scrollView?
for example:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:columnCount="4"
android:columnOrderPreserved="true"
<Button ...>
<Button ...>
<Button ...>
<Button ...>
<Button ...>
..
</GridLayout>
yes you can do this in both the ways, using grid layout and also using the scroll view but for both cases you have to change the background for the button because Android default button have some padding. If you don't want that space, you need create a custom background for your buttons and remove the padding. also have to change the margins of buttons, this can be achieved by using buttons in a scroll view by keeping all the margins to negative numbers. for example - for two buttons, just set the android:layout_marginRight of the first button to "-8dip" or even more. Than the space between the two buttons will get smaller.
Related
I have a TextView that displays an error message beside 2 Buttons. They are currently inside a horizontal LinearLayout. The problem is if the TextView is too wide, the 2 Buttons will be pushed off the screen. Is it possible to push the elements downwards in those cases?
If the text is short there are no problems:
(Textview text) (Button1) (Button2)|(Edge of screen)
If the textview is long, I want to push the 2 buttons down a "row"
(Realllllllllllly long text that may|(Edge of screen)
span 2 lines)
(Button1) (Button2)|(Edge of screen)
I think you need to keep one more Linear layout below to your horizontal linear layout and need to check text size runtime if it's width is greater than required two button space then need to hide horizontal linear layout buttons and need to show below layout buttons
to refer how to check text size runtime refer below link :
Refer this link
Try this way: Use FlowLayout
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</org.apmem.tools.layouts.FlowLayout>
Inside FlowLayout you can put your view's and it will auto move to next line if not fit.
Yes you can do that, flexbox-layout is the solution.
How to use
Gradle dependency
dependencies {
implementation 'com.google.android:flexbox:0.3.2'
}
And xml code
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
There are few other attributes also [read documentation], which you can try and find what works more suitable in you case.
you can use the TextView predefined method, to gave validation to end user like this
TextView textView=(TextView)findViewById(R.id.text_view);
textView.setError("Your Text is very wide please provide short text");
setError put red mark on textview view, with that we can tell the end user. provided text is wide
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 have, say three buttons i would like to list below one another in a layout. Depending on the device, screen size, pixel density, orientation and so on, i would like the buttons to span the entire height of their parent layout. The buttons each have a fixed height (dp), so the spanning is more likely concerning the space between the buttons.
I saw several questions on various forums regarding how a LinearLayout is supposedly a fix for this problem, by nesting a layout for each element, having the layout span. I would very much like to avoid nesting layouts, and I'm using a RelativeLayout as of now, so if there is any way to go about it with this type of layout it will be of great help! :)
Additionally, I would like the top and bottom button to "touch" the parent layout border at the top and bottom, and the last (or rest) button to fill out the rest of the vertical space equally.
Thank you in advance.
I'm not entirely sure what you wish to achieve, but you should be able to do this using a LinearLayout & weights (so you don't have to nest multiple layouts).
If you want the 3 buttons to take up the entire parent of the screen just add a weight to each for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_two"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button_three"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
Try to set to topButton a field in XML:
android:layout_alignTop="true";
Try to set to middleButton a field in XML:
android:layout_centerVertical="true";
Try to set to bottomButton a field in XML:
android:layout_alignBottom="true";
I have a layout in my app that has four image buttons. I want the last two image buttons, the reload and stop buttons to be on the right side of the screen, with empty space between the two buttons. How would I achieve this? I've heard of Space but that was added in API Level 14 and I'd like to maintain my minSdkVersion of 8.
You could probably use a RelativeLayout to achieve this by getting advantage of the layout properties in the xml. You could align the X button/image to the bottom left of the parent and then align the refresh button to the right of the X button.
Link to useful information - http://developer.android.com/guide/topics/ui/layout/relative.html
Put all the 4 buttons inside a Relative layout.
Each 2 buttons should have a linear layout parent.
1st linear layout should have alignParentLeft = true attribute, while the 2nd linear layout(container of the reload and stop) should have alignParentRight = true attribute.
Or you can simply put it all together on the relative layout..
then align it manually. Use to rightOf, to LeftOf attributes.
Hope this helps! :)
create a linear layout and add these two buttons into the linear layout with orientation horizontal..
and position the linearlayout to the right side of the parent layout which might be relative layout with alignParentRight = "true" - hope it helps.. if you dont get it tell me to provide codes ??
EDIT 1 : CODE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
post this relatively to the layout you already have and remove the two buttons you want to align to the right replace it with the two buttons here..thats it.. let me know whats upp
can we design an footer like this(see the attached image), images in footer looks like popping out of one layout to another layout.
Could anybody let me know how to design like this and if possible some code examples.
thanks.
The best way to reuse the same layout around your application is to use the include directive. Something like this:
<include layout="#layout/my_footer" />
Where my_footer.xml is your footer layout.
In the detail you can achieve that layout using a simple LinearLayour horizontally oriented:
<LinearLayout android:orientation="horizontal">
<ImageButton android:layout_weight="1"/>
<ImageButton android:layout_weight="1"/>
<ImageButton android:layout_weight="1"/>
<ImageButton android:layout_weight="1"/>
<ImageButton android:layout_weight="1"/>
</LinearLayout>
You can find further information about reusing layout here: http://android-developers.blogspot.it/2009/02/android-layout-tricks-2-reusing-layouts.html
P.S. Note the attribute layout_weight which give the same width to all your LinearLayour child.
Let us assume the footer is footer-layout & footer-layout is under body-layout.
Now use a background image which will have 2 rows, the color of the first row must match with the color of body-layout, and the second row of the image will be black color.
Use this image as background of footer-layout & design it with ImageButtons as you want.
This will give you the above mentioned visual effects.