I want to design a simple interface for a calculator. The calculator has 2 group of keys, the basic keys and the extra keys. I want to put the extra keys on a HorizontalScrollView. Here is the xml file:
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="D" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="F" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="G" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="H" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="J" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="K" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="L" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="M" />
</LinearLayout>
</HorizontalScrollView>
Here is how it looks like:
However, it works very well and I can scroll horizontally and click on any button I want. But I want to customize it more. So here is my questions:
How can I edit the width of each button so that only 5 buttons can be displayed on the screen at a time.
How can I make the scrolling by 5 buttons offset, i.e if I have the leftmost 5 buttons appear on the screen and I scroll to the right, those 5 buttons will be gone to the left and the next 5 buttons will be shown.
How to disappear the scrollbar (i.e scrolling with invisible scrollbar).
Thank you :)
if you add android:weightsum="5" to your linearlayout and then add android:layout_weight="1" to each of the buttons I think it will put 5 of them on the screen at a time. However I am not very good at using the weight attribute, anytime I use it I end up with a bunch of guess and check, however my gut tells me that it is possible to achieve what you are after with weight and weightsum somehow.
However, I do wonder does it make sense to always show 5 buttons no matter what screen you are on? To me it seems like you may want to vary it at least some so that maybe the smallest of screens only get 4 buttons, and the widest of screens might get 6, otherwise you are going to end up with a very wide range of button sizes across all of the different device densities.
add this to your HorizontalScrollView:
android:scrollbars="false"
that should take care of the scroll bar for you.
As for the part about scrolling 5 at a time, Im afraid to implement this you might have to manually handle it with the horizontalScrollView.smoothScrollBy() method, you'll have to make it do the calculations to figure out how far it needs to go in order to pass 5 buttons. Then override your onTouch listener to make the smoothScrollBy() call for you.
smoothScrollBy() - its worth looking at smoothScrollTo() also.
Related
My design contains a button group which choices, example:
I want to achieve this buttons being stretched equally to the width of a Button Toggle Group like here on the photo:
I tried to add ConstraintLayout inside Button Toggle Group, but it didn't work, I have no any ideas left. Help me with this, here is the code:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/button_group"
android:layout_width="380dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:gravity="center">
<Button
android:id="#+id/button_one"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bachelor" />
<Button
android:id="#+id/button_center"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Master" />
<Button
android:id="#+id/button_three"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Doctoral" />
</com.google.android.material.button.MaterialButtonToggleGroup>
You can solve this using the android:layout_weight attribute on all the buttons, and a width of 0dp to apply the weight:
<Button
....
android:layout_width="0dp"
android:layout_weight="1" />
Apply the same to the rest of buttons.
Before:
After:
I am trying to resize a set of 3 ToggleButtons enclosed under a constraintlayout.
If I give the size of the layout to be say 101dp and size of each button say 50dp, then android will plot the 1st button completely(0-49dp), then it will plot the 2nd button completely(50-100dp) and then the next button(should have been 101-149dp but will take 51-101dp) considering no margins between buttons. Now, if there is not adequate space then it will start from the point from where it can plot the button completely(like 3rd button). This causes the 3rd button to overlap the 2nd just that the 3rd button will be behind the 2nd.
What I want to do is if there is such a scenario then, it should adjust the size of each button such that all buttons will have the same size.
Please let me know how I can achieve that.
XML or through Java program - any will do.
Code For the 3 ToggleButtons made a set
`<android.support.constraint.ConstraintLayout
android:id="#+id/populationButtons"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:layout_marginTop="16dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="250dp"
app:layout_constraintStart_toEndOf="#id/populationLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_chainStyle="packed">
<ToggleButton
android:id="#+id/populationValue1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/nntscreenbuttons"
android:checked="true"
android:text="#string/SensSpecCalcScreen_PopuVal1"
android:textColor="#drawable/nntscreenbuttontext"
android:textOff="#string/SensSpecCalcScreen_PopuVal1"
android:textOn="#string/SensSpecCalcScreen_PopuVal1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/populationValue2"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/populationValue2"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/nntscreenbuttons"
android:text="#string/SensSpecCalcScreen_PopuVal2"
android:textColor="#drawable/nntscreenbuttontext"
android:textOff="#string/SensSpecCalcScreen_PopuVal2"
android:textOn="#string/SensSpecCalcScreen_PopuVal2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/populationValue1"
app:layout_constraintEnd_toStartOf="#id/populationValue3"
app:layout_constraintTop_toTopOf="parent" />
<ToggleButton
android:id="#+id/populationValue3"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/nntscreenbuttons"
android:text="#string/SensSpecCalcScreen_PopuVal3"
android:textColor="#drawable/nntscreenbuttontext"
android:textOff="#string/SensSpecCalcScreen_PopuVal3"
android:textOn="#string/SensSpecCalcScreen_PopuVal3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/populationValue2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>`
Use a LinearLayout and assign weights to all the ToggleButtons
I have this layout
....................
<CheckBox
android:id="#+id/cb_remember_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textinput2"
android:text="#string/keep_login"
android:textColor="#android:color/holo_red_dark"
android:textSize="18sp"
android:layout_marginTop="14dp"
app:layout_constraintTop_toBottomOf="#+id/textinput2"
app:layout_constraintBottom_toTopOf="#+id/btn_signin_login" />
<Button
android:id="#+id/btn_signin_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/cb_remember_login"
android:backgroundTint="#color/colorAccent"
android:minHeight="75dp"
android:text="#string/signin"
android:textColor="#android:color/background_light"
android:textSize="30sp" android:visibility="visible"
android:layout_marginTop="36dp"
app:layout_constraintTop_toBottomOf="#+id/cb_remember_login"
app:layout_constraintBottom_toTopOf="#+id/tv_forgot_login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<include
layout="#layout/view_circle_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/btn_signin_login"
app:layout_constraintBottom_toBottomOf="btn_signin_login"
app:layout_constraintLeft_toLeftOf="#+id/btn_signin_login"
app:layout_constraintRight_toRightOf="#+id/btn_signin_login" />
<TextView
android:id="#+id/tv_forgot_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_signin_login"
android:text="#string/forgot_pass"
android:textAlignment="center"
android:textColor="#android:color/holo_red_dark"
android:textSize="18sp"
android:layout_marginTop="14dp"
app:layout_constraintTop_toBottomOf="#+id/btn_signin_login"
app:layout_constraintBottom_toTopOf="#+id/tv_copyrights_login"
tools:layout_editor_absoluteX="0dp" />
...........][1]][1]
Here is view_circle_progress.xml
<ProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:indeterminateTint="#color/red">
</ProgressBar>
You can see my included layout comes after the button but in the picture you can see it's actually beneath the button. Please help with a solution. Also except the included layout all the views are in a chain.
Go to your xml, click design. The on the upper left, corner you will see an icon similar to a blueprint. Click on it and you will get your layout as a blue print. Then click on the element that you want, you will see four points on all sides. Click on the upper point and drag it to the upper bar(menu, etc.). That way you will attach it and it will stay in place. If you want to make offset look on you right above the properties you will see a box representing the item with its constraints, just put the distance you want, and you will have your offset.
The problem was in Android 5.0 elevation is introduced. A button has a default elevation that's why it was always showing on top. Setting elevation value to my include layout solve the problem.
Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/outerBox"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<GridLayout
android:id="#+id/checksHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="5"
android:columnWidth="100dp" />
<GridLayout
android:id="#+id/textHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/checksHere"
android:columnCount="4" />
<Button
android:id="#+id/submitButton"
android:layout_width="185dip"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/outerBox"
android:layout_below="#id/textHere"
android:layout_margin="3dip"
android:onClick="submit"
android:text="#string/submit" />
<Button
android:id="#+id/cancelButton"
android:layout_width="185dip"
android:layout_height="wrap_content"
android:layout_below="#id/textHere"
android:layout_margin="3dip"
android:layout_toRightOf="#id/submitButton"
android:onClick="next"
android:text="#string/cancel" />
<Button
android:id="#+id/backButton"
android:layout_width="185dip"
android:layout_height="wrap_content"
android:layout_below="#id/textHere"
android:layout_margin="3dip"
android:layout_toRightOf="#id/cancelButton"
android:onClick="next"
android:text="test" />
</RelativeLayout>
I have a relative layout. The layout has two grid layouts at the top, which can be populated in my java code with text or checks. They can be blank. Then I have three buttons. The first two buttons display on the screen just fine. The third button just sits on top of the first button:
I changed the third button (backButton) to be toRightOf submitButton just to see what would happen. It goes on top of the cancelButton, as expected. I feel like I'm missing a simple fundamental, but I have not been able to figure it out.
Well this doesn't necessarily fix the problem with RelativeLayout, but you could always group the three buttons together in a single LinearLayout. This should prevent the buttons from overlapping.
I am not sure but when testing in eclipse changing all the android:layout_width="185dip" to android:layout_width="wrap_content" for buttons worked for me.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
background layout moving when soft keyboard displayed - android
I have a layout file that contains severals views and EditText:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/connect"
android:id="#+id/btnConnect" android:layout_alignParentRight="true" android:layout_alignParentTop="true"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spServers"
android:layout_toLeftOf="#+id/btnConnect" android:layout_alignTop="#+id/btnConnect"
android:layout_alignBottom="#+id/btnConnect" android:layout_alignParentLeft="true"/>
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnType" android:layout_alignLeft="#+id/btnConnect"
android:layout_below="#+id/btnConnect" android:layout_alignRight="#+id/btnConnect" android:textOff="#string/text"
android:textOn="#string/grid" />
<Spinner
android:layout_width="98dp"
android:layout_height="22dp"
android:id="#+id/spDataBases" android:layout_toLeftOf="#+id/btnConnect"
android:layout_below="#+id/btnConnect"
android:layout_alignBottom="#+id/btnType" android:layout_alignLeft="#+id/spServers"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/check"
android:id="#+id/btnCheck" android:layout_alignLeft="#+id/spServers" android:layout_alignParentBottom="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/run"
android:id="#+id/btnRun" android:layout_toRightOf="#+id/btnCheck" android:layout_alignTop="#+id/btnCheck"
android:layout_toLeftOf="#+id/btnLoad"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/load"
android:id="#+id/btnLoad" android:layout_alignRight="#+id/btnConnect"
android:layout_alignTop="#+id/btnCheck"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtSQL" android:layout_alignLeft="#+id/spServers" android:layout_below="#+id/btnType"
android:layout_alignRight="#+id/btnConnect" android:layout_above="#+id/btnCheck"
android:gravity="left|top" android:singleLine="false" android:textAlignment="gravity"/>
</RelativeLayout>
It looks like this:
But when I'm trying to type something, I'm getting this problem:
Help me please to fix this. I don't wanna change the screen position on the layout, when I'm typing some text. It's moving up when user trying to type something.
You could try to tell Android to not resize your layout when the keyboard is brought up, making sure that what you're typing is visible. (Docs: http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft)
Add the following to your apps' manifest: (in the relevant activity instead of the dummy one below)
<activity android:name="Activity"
..
android:windowSoftInputMode="adjustPan"
..
</activity>
It's unclear to me if your issue is happening when you click on the EditText and the keyboard comes up, or if it only happens once you start typing? My answer will probably not help if the latter is the case. I'm also unsure if "adjustPan" is desirable behaviour, but it's worth a shot! It could also be a good idea to put your entire RelativeLayout in a ScrollView.