My problem is that I have four Buttons on the screen, I used a PercentageRelativeLayout to place them where I want them and everything was working great.
They even resize!
However, when they do resize, the Buttons start touching each other, and when I make it so they do not touch each other on a tablet, when I go back to a phone the space is too far apart.
Does anyone have any idea on how I could create a spacing that could work on all devices?
Because I thought that PercentageRelativeLayouts were the perfect solution to get things to resize, without using any LinearLayout and it is not working out the way I thought.
Below is my code
<android.support.percent.PercentRelativeLayout 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"
android:background="#696969">
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/opt1"
android:scaleType="fitCenter"
android:id="#+id/purpleButton"
android:layout_align="#+id/option1"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="9%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt2"
android:scaleType="fitStart"
android:id="#+id/option2"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="58%"
android:background="#00ff0000"
android:layout_height="fill_parent"
android:src="#drawable/opt3"
android:scaleType="fitStart"
android:id="#+id/option3"
android:layout_width="fill_parent"
android:longClickable="false" />
<ImageButton
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginLeftPercent="50%"
app:layout_marginTopPercent="21%"
android:background="#00ff0000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/option4"
android:scaleType="fitCenter"
android:id="#+id/opt4"
android:longClickable="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pick an Answer"
android:id="#+id/pickLabel"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
app:layout_widthPercent="100%"
app:layout_heightPercent="7%"
app:layout_marginTopPercent="15%"
android:textColor="#ffffff"
android:textAlignment="center"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_widthPercent="100%"
app:layout_heightPercent="12%"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="00"
android:id="#+id/timeLabel"
android:textAlignment="gravity"
android:textSize="72sp"
android:gravity="center|center_vertical|center_horizontal" />
You can set android:weightSum="1" on the outside layout and android:layout_weight="0.25" for the inside layouts.
Related
It has been 2 months since I was trying to implement this design and the animation but non of the Android development group or Anyone can't able to help me. I badly need help.
I have seen this but won't understandAnimated swap position of two buttons
This is what I actually want to do.
This is what I did:
Here XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="250dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:backgroundTint="#color/white"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:layout_marginTop="200dp"
android:background="#color/black"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#color/black"
android:layout_marginTop="200dp"
app:srcCompat="#android:drawable/checkbox_off_background" />
</LinearLayout>
What I did:
I tried using an MPAndroidChart for bar which will be handled. Shortly, I'm trying to create an algorithm visualizer project but I didn't find any good resource so that bar could be created and handled efficiently and easily. Badly I didn't even find any resource except customview on how he implemented It's completely hard to understand.
What I expect:
I want to know how to design that bar and how I can swap those bar or bars when the button clicks.
Thank you in advance.
I have a "problem" with my application and I don't know what has happened.
I have this interface:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:gravity="center"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
I get the field value from a web service and set text in java code:
m_txtPhone.setText(m_currentService.PassengerPhone);
In all the devices where I check it this is the result:
But I have a problem in with Samsung J5 (5.1.1). When I try to set text in that TextView (and similars) I have this result:
It seems that I have some problem setting the text or I don't know. Any idea?
NOTE:
I implement the interface in this way because in other cases I do something like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<Button
android:id="#+id/detailServiceBtnClient"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/white"
android:drawableRight="#drawable/icon_detail"
android:gravity="left|center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#string/detailServiceBtnClient"
android:textColor="#color/black" />
<TextView
android:id="#+id/detailServiceTxtClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="25dp"
android:layout_marginTop="-35dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="50"
android:singleLine="true"
android:textColor="#color/black" />
</LinearLayout>
You are using LinearLayout. In this layout items are added after each element. Your orientation is vertical, hence, it is below the button. Use RelativeLayout and then use alignTop and alignBottom properties of TextView.
android:alignTop="#+id/button"
android:alignBottom="#+id/button"
android:gravity="center"
I have 7 image buttons I am displaying and while editing the xml the preview looks perfect, however when I launch the app in an emulator it doesn't seem to scale and is cutting off the images.
It should look like this:
-0-0-
0-0-0
-0-0-
Where the '0's are the buttons. I have it setup for one overall relative layout and three linear layouts. The middle places first then the top and bottom align off the middle.
Here is my XML file
<RelativeLayout 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"
android:id="#+id/activity_color_wheel">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon1"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:id="#+id/dode2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon2"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:id="#+id/dode3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon3"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/bottom">
<ImageButton
android:id="#+id/dode4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon4"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon5"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/top">
<ImageButton
android:id="#+id/dode6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon6"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon7"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:textSize="25dp" />
</RelativeLayout>
Basically the top and bottom layouts get cut off near the bottom. I figure i'm missing some kind of scaling property, but i'm not sure.
All of your views' width and height are "wrap content".
In that case if the total images width/height is greater then the screen's width/height it will just cut off.
what you should do is:
1) set the LinearLayouts width to "match parent".
2) set weight to the children views as you wish.
3) set children width to 0dp for better performance.
Example code snippet:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:layout_weight="1"
android:id="#+id/dode2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:layout_weight="1"
android:id="#+id/dode3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
Good luck.
If your problem is only with the top and bottom images, then you only need to add a ScrollView as a parent to your RelativeLayout.
I need to layout 2 images (longImg and shortImg) horizontally.
The longImg is too long to fit on screen, so really wanting to display a window of it, linked to a SeekBar where the user can scroll the part of the longImg. The container around the longImg must be at a fixed size so the shortImg is not nudged off screen.
What is the best way to do this?
So far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
</RelativeLayout>
It seems OK in Eclipse graphical layout, but when testing on device, I only get the long image.
How do you force the smallImg to be always present?
Thanks
Actually you using 'RelativeLayout' in that android:layout_weight="0.7" won't work unless its parent is Linear Layout. I have changed your xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
use This :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/short_image"
android:layout_weight="0.7"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
How do i align the arrows to be right above/below the numbers? Does each arrow need to have it's own linear layout? Is there a way to set this without setting a static amount of padding? I would like this to be generic enough to be used and show up properly on different devices...
I'm relatively new to android development - especially the UI portion of it... so any help would be appreciated!
What I See (Above)
What I Would Like To See (Above)
You can nest another LinearLayout (with orientation:vertical) inside your LinearLayout (with orientation:horizontal).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/one"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up"
android:background="#drawable/up" />
<TextView
android:id="#+id/two"
android:text="100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/OffWhite"
android:textSize="40sp"
/>
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down"
android:background="#drawable/down" />
</LinearLayout>
</LinearLayout>
Note that nesting too many layouts inside a layout is discouraged. Reference:
http://developer.android.com/training/improving-layouts/optimizing-layout.html
But having 2 layout hierarchy is totally fine.
You need to nest two vertical LinearLayouts inside of your horizontal LinearLayout. Here's one where I do the same thing but I have empty Views on each side and one in the middle. You can take those out if you don't want them and obviously change your ids, backgrounds, and such
<LinearLayout
android:id="#+id/mpImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/mpLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/mpUpBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/UpArrow"
android:onClick="cycleUp"/>
<TextView
android:id="#+id/mpTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="breakfast"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black"/>
<ImageButton
android:id="#+id/mpDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
<LinearLayout
android:id="#+id/catLL"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="left"
android:orientation="vertical">
<ImageButton
android:id="#+id/catUpBtn"
style="#style/UpArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleUp" />
<TextView
android:id="#+id/catTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Beef"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#drawable/black" />
<ImageButton
android:id="#+id/catDownBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="cycleDown"
style="#style/DownArrow" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"/>
</LinearLayout>
You will notice I have also used weight and a 0dp for the width of the nested LinearLayouts and for the View to give them the separation I wanted and to look right on different screen sizes. You can change those depending on your needs.
You can have nested layouts. Be careful not to have too many, however two should be fine. Here is an example of what I think you are looking for. The arrows and text should be aligned thanks to RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_one"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/one"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="#+id/number_picker_up_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/up"
android:src="#drawable/up" />
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/number_picker_up_two"
android:text="100"
android:textColor="#color/OffWhite"
android:textSize="40sp" />
<ImageButton
android:id="#+id/number_picker_down_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/two"
android:layout_centerHorizontal="true"
android:background="#drawable/down"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>