How to make Button square and resizable - java

I would like to make button (the one between two other buttons) Square.
I tried to use following code:
toggleButton = (ToggleButton) findViewById(R.id.activity_dictionary_toggleButton1);
LinearLayout.LayoutParams toggleButtonLayoutParams = (LayoutParams) toggleButton.getLayoutParams();
toggleButtonLayoutParams.width = toggleButtonLayoutParams.height;
toggleButton.setLayoutParams(toggleButtonLayoutParams);
But it is not working (Button look like on the above image). Here is part of my XML file:
<LinearLayout
android:id="#+id/activity_dictionary_linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp" >
<Button
android:id="#+id/activity_dictionary_button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="0.4"
android:enabled="false"
android:maxWidth="200dp"
android:text="Clear"
android:textColor="#android:color/white" />
<ToggleButton
android:id="#+id/activity_dictionary_toggleButton1"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="0.2"
android:background="#drawable/settings"
android:text="ToggleButton" />
<Button
android:id="#+id/activity_dictionary_button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="0.4"
android:enabled="false"
android:maxWidth="200dp"
android:text="Recognize"
android:textColor="#android:color/white" />
</LinearLayout>
What should I change?
Update: android:layout_weight="0.2" is deleted, but Button still doesn't change its size when I try to do it through code (it is round but very small).

You should switch your LinearLayout to a RelativeLayout. Your size parameters should take effect then.

Related

How can I make a SeekBar take up the width available between a TextView and an ImageButton?

I'd like the TextView and ImageButton to take up space based on their size & have the SeekBar take up whatever space remains. Here's my current code:
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/seekbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/white" />
<SeekBar
android:id="#+id/seek_bar"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp" />
<ImageButton
android:id="#+id/ccBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_captions_off"
app:tint="#color/white" />
</androidx.appcompat.widget.LinearLayoutCompat>
With this code, the SeekBar has no width & the ccBtn appears in the center of the screen. How can I fix this?
Following Ricardo's answer, the code will be
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/seekbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/white" />
<SeekBar
android:id="#+id/seek_bar"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:layout_marginBottom="8dp" />
<ImageButton
android:id="#+id/ccBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_captions_off"
app:tint="#color/white" />
</androidx.appcompat.widget.LinearLayoutCompat>
Image preview: https://i.stack.imgur.com/LGrEo.png
In the image I've centered it a bit, which can be achieved with gravity center and no bottom margin
You can use the weight property,
setting SeekBar weight to 1 and layout_width to 0dp should do it.
also, on a side note, try to be consistent when naming your variables, don't do_this for one variable andThis for another

How do I get the switch on the centre

I added a switch to my activity and dragged it into the centre. When I launch my app the switch is on the left corner. I can't seem to get it work. Please look at the code and the picture. Thank you. I also have this code on the switch:
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:foregroundGravity="center_horizontal"
android:gravity="center"
android:text=""
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="172dp"
tools:layout_editor_absoluteY="242dp" />
Try this code
<RelativeLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:checked="true"
android:foregroundGravity="center_horizontal"
android:gravity="center"
android:text=""/>
</RelativeLayout>
add the gravity of parent layout:
android:gravity="center".
If parent layout is Linear layout :
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:foregroundGravity="center_horizontal"
android:gravity="center"
android:text=""
android:layout_gravity="center"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="172dp"
tools:layout_editor_absoluteY="242dp" />
// just added android:layout_gravity="center"
In case of Relative layout
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text=""
android:layout_centerInParent="true"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="172dp"
tools:layout_editor_absoluteY="242dp" />
You are using ConstraintLayout, by dragging the layout the tools:absolute properties are updated and those are used only on AndroidStudio EDITOR
The real position are based on app:constraint tags.
If you are not familiar with LayoutManagers I think you should start with a easier one such FrameLayout, LinearLayout, RelativeLayout as root of your view.
All mentioned does support the android:layout_gravity="center" on childrem or android:gravity="true" on parent for all childrem.

Layout issues; Overlapping buttons

How do I make it so that Button 3 AND the relativelayout (with the blue background) are both in front of Button 2? They are both higher (in value) in the component tree but Button 2 is still in front of everything.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="75dp"
android:layout_marginTop="64dp"
android:text="Button 2" />
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignStart="#+id/button2"
android:layout_alignTop="#+id/button2"
android:layout_marginStart="48dp"
android:background="#android:color/holo_blue_bright"
android:id="#+id/relativeLayout">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/relativeLayout"
android:layout_alignTop="#+id/button2"
android:layout_marginStart="11dp"
android:layout_marginTop="17dp"
android:text="Button 3" />
</RelativeLayout>
The answer lies in material design specs. Raised buttons (and that is the button that has no style applied) has a default elevation of 2dp, while RelativeLayout has 0dp.
My suggestion is to apply style="#style/Widget.AppCompat.Button.Borderless" to the button2. Then it has 0dp elevation. If you want colored button, apply android:background to it.

How to set columnWeight with Java

The title explains what I need. I want to set columnWeight of Button (Because is inside GridLayout) but from code.
Something like that with code:
<Button android:layout_column="0"
android:layout_row="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1" />
You need to use LinearLayout subviews. Like the user Price says:
There are limitations when using the GridLayout, the following quote is taken from the documentation.
"GridLayout does not provide support for the principle of weight, as
defined in weight. In general, it is not therefore possible to
configure a GridLayout to distribute excess space in non-trivial
proportions between multiple rows or columns ... For complete control
over excess space distribution in a row or column; use a LinearLayout
subview to hold the components in the associated cell group."
Here is a small example that uses LinearLayout subviews. (I used Space Views that takes up unused area and pushes the buttons into desired position.)
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1"
>
<TextView
android:text="2x2 button grid"
android:textSize="32dip"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 2" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:text="Button 4" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</GridLayout>
Check Price's response for more information.
Try it: ((GridLayout.LayoutParams) button.getLayoutParams()).columnSpec =
GridLayout.spec(GridLayout.UNDEFINED, 1f);
You can use spec() method to define the columnWeight from java code.
GridLayout.LayoutParams param = new LayoutParams(GridLayout.spec(GridLayout.UNDEFINED, 1f), GridLayout.spec(GridLayout.UNDEFINED, 1f));
button.setLayoutParams(param);

Android: Why doesn't my second TextView show up, while the first one does?

i added a second TextView and it is supposed to be beneath the first TextView but now the first TextView is working but the second one isn't showing up.
This is my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/state1"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_below="#id/textView1"
android:ellipsize="marquee"
android:singleLine="true"
android:text="#string/sayer1"
android:textSize="12sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_below="#+id/textView2"
android:text="#string/state2"
android:textSize="16sp" />
<TextView
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/sayer2"
android:textSize="16sp" />
</RelativeLayout>
You need three things to make the others appear.
First:
Change this attribute android:layout_height="?android:attr/listPreferredItemHeight" to android:width="match_parent"
Second:
Set a width/height to your TextViews. thirdLine and textView2 haven't a proper width/height. Try to make this:
android:layout_width="match_parent"
android:layout_height="wrap_content"
Finally:
Don't try to place a TextView below another which its alignment is alignParentBottom. Instead of this, try to add a container which its aligment is at the bottom of the global parent. See below:
Try this formatting:
<?xml version="1.0" encoding="utf-8"?>
// set a height to wrap_content/match_parent/fill_parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="state1"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_below="#id/textView1"
android:ellipsize="end"
android:singleLine="true"
android:lines="1"
android:text="sayer1"
android:textSize="12sp" />
// if you want to align the latter text
// to the bottom, make a container as...
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
// declare the width/height of the TextView
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:text="sayer2"
android:textSize="16sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_below="#+id/textView2"
android:text="state2"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
Let me know if it's the expected result. Hope this helps.
It might be that your top RelativeLayout has its height set to ?android:attr/listPreferredItemHeight and the first text views height is set to wrap content. Depending on the height of the first text view it could just be that the layout isn't high enough to show both
Change your top RelativeLayout to use a height of wrap_content
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip" >
Looking at these two text views:
<TextView
android:id="#+id/thirdLine"
android:layout_below="#+id/textView2"
android:text="#string/state2"
android:textSize="16sp" />
<TextView
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/sayer2"
android:textSize="16sp" />
This will not work as you are putting the second one at the bottom with layout_alignParentBottom="true" and then you're trying to put something underneath it. But its aligned to the bottom so there is no space below it!
Changing those bottom two text views to following might do what you want:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:text="#string/sayer2"
android:textSize="16sp" />
<TextView
android:id="#+id/thirdLine"
android:text="#string/state2"
android:textSize="16sp" />
</LinearLayout>
I don't think the layout you have works properly, you should be getting a "no resource found..." against #id/textView2 since you are trying to reference it in
android:layout_below="#id/textView2"
within your "thirdLine" TextView BEFORE you have added the textView2 into the relativelayout.
The order should be like this:
<TextView
android:id="#+id/textView1"" />
<TextView
android:id="#+id/secondLine"
android:layout_below="#id/textView1" />
<TextView
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" " />
<TextView
android:id="#+id/thirdLine"
android:layout_below="#+id/textView2" />
Do remember that when you have RelativeLayout the order in which you add your views doesn't matter, you can tell them where to position themselves.
What must always happen though is that you if you are referencing a view, it must be above the view that is referencing it. Wow that's confusing.
Let's say A wants to be below B. Then in your RelativeLayout, B must come BEFORE A.
Now that that's explained. In your textView2 you have told it to align itself against its parent so that it goes to the bottom and left. Of course you can't have thirdLine below textView2 since textView2 is aligned in bottom left. Try instead:
<TextView
android:id="#+id/thirdLine"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/textView2"
android:layout_above="#+id/thirdLine" />
Also, isn't the IDE telling you to state "layout_width" and "layout_height"? For the TextViews. If this hasn't helped you at all, could you please draw a small picture of what you need so we may guide you better?
I'd also suggest stating the parent view's (Your RelativeLayout) height and width to "fill_parent" (API 7 and below) or "match_parent" (API 8 and above).
For the other views I'd go for
android:layout_width="match_parent" or "fill_parent"
android:layout_height="wrap_content"
But you can also have the width set to "wrap_content" whatever suits your UI better.
NOTE: I've been advised that this answer is wrong, but it does highlight an issue in the layout simulator parser. In that light, I'm going to leave this answer in-tact to document the flaw.
You accdententally added #+id/TextView2 to the layout below.
android:layout_below="#+id/textView2"
Try this instead to reference the concrete id, and you'll need to add sizing parameters
<TextView
android:id="#+id/thirdLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView2"
android:text="#string/state2"
android:textSize="16sp" />
This works with only these changes in my android layout simulator, but you might need to move the definition textView2 to be above where it's referenced.
Here's the file as it works in my layout builder:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="asdf"
android:textSize="16sp" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_below="#id/textView1"
android:ellipsize="marquee"
android:singleLine="true"
android:text="fdsa"
android:textSize="12sp" />
<TextView
android:id="#+id/thirdLine"
android:layout_below="#id/textView2"
android:text="asdffdsa"
android:textSize="16sp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="string/sayer2"
android:textSize="16sp" />
</RelativeLayout>

Categories

Resources