Using Jpeg UI layout in Android Studio

Using Jpeg UI layout in Android Studio - android

I am working on creating an educational app, like a preschool app for kids.
The interface should look something like this
If you can see from my picture, there are a 2x3 sets on left and right and a midle dispaly.
There are 3 buttons underneath the top section and on the bottom section there is a 2x5 table.
I figured if I could create this UI, make it a Jpeg, and move it to my drawable folder, I could apply it to my project then work on top of it.
That did not quite go as I expected, as when I started adding buttons to the corresponding table cells and run the program - They came up all over the place.
I then realized Android wasn't treating my jpeg as a layout.
Can anybody tell me what I am doing wrong or point me in the direction to fix this please?
Should I even forget about bringing in this jpeg in and just try to create it in Android?

you can make your ui using gridLayout.
simply use
android:layout_rowSpan="2"
android:layout_gravity="fill"
I make this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<GridLayout
android:rowCount="2"
android:columnCount="7"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowSpan="2"
android:layout_gravity="fill"
android:text="button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
</GridLayout>
<GridLayout
android:rowCount="1"
android:columnCount="3"
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
</GridLayout>
<GridLayout
android:layout_width="wrap_content"
android:rowCount="2"
android:columnCount="5"
android:layout_gravity="center"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button12" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button13" />
</GridLayout>
</LinearLayout>
this xml will show this. you can change buttons whatever as you want. and make background your jpeg.

Related

Error parsing XML: not well-formed (invalid token) in Android

I am learning android development and facing problems while building the project.
I am making a calculator app:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.palakjain.simplecalculator.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="100dp"
android:layout_marginBottom="20dp"
android:id="#+id/textView" />
<!--<Button
android:id="#+id/btnErase"
android:text="<-"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btnClear"
android:text="C"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnPercentage"
android:text="%"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnDivide"
android:text="/"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn1"
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn2"
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn3"
android:text="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnMul"
android:text="X"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout2"
android:layout_below="#+id/linearLayout">
<Button
android:id="#+id/btn4"
android:text="4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn5"
android:text="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn6"
android:text="6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnSub"
android:text="-"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/linearLayout">
<Button
android:id="#+id/btn7"
android:text="7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn8"
android:text="8"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn9"
android:text="9"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnAdd"
android:text="+"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPoint"
android:text="."
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn0"
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnEquals"
android:text="="
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
This is what I have done in my XML file and I am not able to figure out what's wrong. Kindly help.

Use attribute android:layout_width="wrap_content" to btnClear instead of match_parent to show btnPercentage and btnDivide on screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btnClear"
android:text="C"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnPercentage"
android:text="%"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btnDivide"
android:text="/"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Finally, Clean and Rebuild your project and Run again.
UPDATE:
Error parsing XML: not well-formed (invalid token) in Android
I guess this problem is occurring due to android:text="<-". If you want to show "<-" as Text on Button, then use below code:
<Button
android:id="#+id/btnClear"
android:text="<-"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
FYI, here < represents <. Hope this will work~

Android changing text on buttons programatically

I am making a grid of buttons 4 wide, 9 tall, all of the buttons are invisible and no text on them, I then programatically add text to them and make them visible (basically I am using the invisible buttons because any of the 36 buttons can become visible due to the code for making them visible (it's based on an XML document I am parsing) I am using LinearLayout to do this, so I have a Vertical LinearLayout, wrapped in 9 Horizontal LinearLayouts with 4 buttons in each, all of them have wrap_content height and width and weight 1 (not sure if this could be causing the problem as I am not entirely sure how these parameters work yet).
My problem is that once I get to the adding text, the text can be different lengths, and so my buttons end up odd shapes with some being wider or something taller than others, is there any way to do this in a way that means that they will all end up similar sizes? or will my invisible buttons mess things up? Or is there a better way to do what I am doing?
I worry about using fixed size buttons as I figure if the text is too long it will cause issues that way instead.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:id="#+id/soulOneLL"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="soulOne"
android:text="#string/SoulOne"
android:id="#+id/btnSoul1" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_weight="1"
android:visibility="invisible"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOnRow8Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow8Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow7Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow6Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow5Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow4Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow3Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow2Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow1Column3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column0" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column1" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column2" />
<Button
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:onClick="soulOneRowColumn"
android:id="#+id/btnSoulOneRow0Column3" />
</LinearLayout>
</LinearLayout>
</ScrollView>

On each button, you can give an android:maxLength attribute and android:maxLines attribute. These will constrain the text to a certain size and length, guaranteeing they will all be the same size.

Decided based on the answers provided that nothing could be done that would work the way I wanted, so I changed it so that instead of showing the text on the buttons, I made a dialog pop up with some information instead which works for what I wanted anyway.

EditText with "constants"

I want to customize an EditText which should have "constants" like in the picture below, so that I get the minutes and the seconds. (the number interface is irrelevant).

Try by this code this code are here i have try by this code .This code is working .
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="50dp"
android:textColor="#000000"
android:background="#CCCCCC"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
<Button
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<Button
android:id="#+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/btn8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8" />
</LinearLayout>
show here is image below

First of all, I see no EditText on the screen you posted, that's plain TextViews that are updating on clicking the numbers.
Anyway, you could use multiple TextViews/EditTexts, which would allow you to easily change their formatting as well, or you could programatically change the formatting yourself. If you want to have a string resource that accepts parameters see here on how to do that.

Android LinearLayout in HorizontalScrollView with multiple rows

I am using LinearLayout in HorizontalScrollView the scrolling part is working but i can't figure out how to make 3 rows.
for Example:
Bold shows what is currently displayed (in emulator/on screen)
Current
--Button1--Button2--Button3-- Button4--Button5--Button6--Button7--Button8--Button9--Button10
-Button11--Button12
What I want
--Button1--Button2--Button3-- Button4--Button5--Button6--
--Button7--Button8--Button9-- Button10--Button11--Button12--
I'm trying to do this with one LinearView, because later I will try to dynamically add buttons.
I might be doing this in whole wrong way (and I think I am).
Here is the code:
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</LinearLayout>
</HorizontalScrollView>
I tried few things but I always return to the beginning.

Instead of LinearLayout Try GridLayout which is part of Android support library.
It has provision of setting number of columns and rows while implementation in XML layout.
Something like below
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="6"
android:rowCount="3"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</GridLayout>
</HorizontalScrollView>
Edit -
You can use TableLayout instead of GridLayout if you want to add child views of different width as below
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button10" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button11" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button12" />
</TableRow>
</TableLayout>
</HorizontalScrollView>

Linearlayout should not cut off

sorry for this newbie question. I have googled a while and cannot find an answer.
I have 10 buttons in a row. This looks ok on my tablet. But when I start the app on my phone only the first 5 buttons are shown, the rest is cut off.
If there is not enough space the remaining buttons should be displayed in a second row. How can I do that?
Thanks.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>

Interesting! take scrollview parents of LinearLayout#
<ScrollView...
<LinearLayout...//android:orientation="horizontal"
<Button... // your all buttons
</Button>
</LinearLayout>
</ScrollView>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>
</LinearLayout>
</ScrollView>

You have a few options:
Place all your buttons into a GridView - this will work across any screen size and is relatively straightforward and neat.
Put them into a ScrollView. This is quite popular but a bit annoying for the user as it can lead to mis-clicks and they may not realise you can scroll the buttons.
If you only ever want exactly 1 or 2 rows depending on screen size, put each row of buttons into a separate layout file. Then create 2 additoinal screen-dependent layouts containing LinearLayout which include both rows, but give the portrait version a vertical orientation. So when that layout is loaded, you get two rows.
Work out if you can present the buttons in a different way - maybe using just icons, or combine them into dropdowns.

// try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:text="10"/>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Using Jpeg UI layout in Android Studio - android

Related

Error parsing XML: not well-formed (invalid token) in Android

Android changing text on buttons programatically

EditText with "constants"

Android LinearLayout in HorizontalScrollView with multiple rows

Linearlayout should not cut off

Categories

Resources