how to fit buttons size in Button Toggle Group - java

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:

Related

Scroll through multiple Lists (Horizontal)

i'm looking for an option to scroll through multiple lists (horizontally) like in the Picture in the attachment. You have the possibility to swipe left or Right to get to the next listview. On top there should be some buttons to click or to scroll
I tried putting ListViews in something like this Code but it doesn't work properly.
<HorizontalScrollView
android:id="#+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbarFadeDuration="250">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="0px">
<Button
android:id="#+id/buttonOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/Black"
android:text="hallo"
android:textColor="#color/White">
</Button>
<Button
android:id="#+id/buttonTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/Black"
android:text="hallo"
android:textColor="#color/White">
</Button>
</LinearLayout>
</HorizontalScrollView>
I got it. The Tool I was looking for is a ViewPager.

How do I align the text in the text-area on bottom?

I want to align the text of this two labels on it's bottom, so the two values are aligned on the same height.
Sadly, I dont find an option like aligning it inside its own area.
gravity wont work. It has to be in xml.
Thank you!
<TextView
android:id="#+id/feed_euro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/feed_cent"
android:height="35dp"
android:text="23"
android:textColor="#color/colorTextBlack"
android:textSize="25dp" />
<TextView
android:id="#+id/feed_cent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:height="35dp"
android:text=",39 €"
android:textAlignment="textStart"
android:textColor="#color/colorTextBlack" />
If you want to set your textview text bottom
android:gravity="bottom"
or
if you want to set your whole component bottom
android:layout_gravity="bottom"
To align the text inside a TextView to its bottom, you can use
android:gravity="bottom"
(inside TextView tags)
You can change the gravity to bottom like below.
<TextView
android:id="#+id/feed_euro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/feed_cent"
android:height="35dp"
android:text="23"
android:textColor="#color/colorTextBlack"
android:textSize="25dp" />
<TextView
android:id="#+id/feed_cent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:height="35dp"
android:text=",39 €"
android:gravity="bottom"
android:textAlignment="textStart"
android:textColor="#color/colorTextBlack" />
And also you can try android:gravity="bottom" to the layout you have used to hold the both TextView and change the 2nd TextView height into wrap_content.
Hope you got the answer.

Radio buttons aligned with button on right & text on left

How to make radio buttons in the radio group in the same alignment and put button in the right and text in the left on Android?
I want to make a radio group with radio buttons. I want to do it like this
My code does it like this:
How can I adjust the alignment of all the radio bottoms and how can I put the button on the right and text on the left?
I do it by padding
Here is my code:
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|center_horizontal"
android:gravity="center|center_horizontal|center_vertical">
<RadioButton
android:id="#+id/ÅlandIslands"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingRight="250dp"
android:text="Åland Islands" />
<RadioButton
android:id="#+id/Albania"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingRight="250dp"
android:text="Albania" />
<RadioButton
android:id="#+id/Algeria"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingRight="250dp"
android:text="Algeria" />
<RadioButton
android:id="#+id/AmericanSamoa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingRight="250dp"
android:text="American Samoa" />
<RadioButton
android:id="#+id/Andorra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:paddingRight="250dp"
android:text="Andorra" />
</RadioGroup>
Your code is almost fine, You need to set each RadioButtons width to android:layout_width="match_parent" so your each radio button will occupy full width of its parent layout.
It would be much better if you use recycler view as it would be easier to maintain in case of data changes and you could also implement features like search and sort with it.

Making on-screen buttons scrollable

I have screen with 18 buttons, Is it possible to make this group of buttons scrollable so that user can see buttons which are out of the viewable area. I tried putting these buttons in ScrollView but got the exception that only their can be only 1 child of scroll view.
Currently the buttons are present in a RelativeLayout like:
<Button
android:id="#+id/btnChapter2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter1"
android:layout_below="#+id/btnChapter1"
android:text="Chapter 2" />
<Button
android:id="#+id/btnChapter3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter2"
android:layout_below="#+id/btnChapter2"
android:text="Chapter 3" />
<Button
android:id="#+id/btnChapter4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter3"
android:layout_below="#+id/btnChapter3"
android:text="Chapter 4" />
<Button
android:id="#+id/btnChapter5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter4"
android:layout_below="#+id/btnChapter4"
android:text="Chapter 5" />
<Button
android:id="#+id/btnChapter6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/btnChapter5"
android:layout_below="#+id/btnChapter5"
android:text="Chapter 6" />
The current screen with buttons 9, 17 and 18 being screwed up looks as:
Well, ScrollView may have only one child. In this case, put a LinearLayout or RelativeLayout as the ScrollView's child. The put your button inside the LinearLayout or RelativeLayout. That should've done it. Example code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<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" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</ScrollView>

Customizing the buttons inside a HorizontalScrollView

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.

Categories