Scenario: I've four buttons arranged Relative Layout. These button's text varies through the app life which makes button shrink or expand according to text length. Using: RelativeLayout.getChildAt().setText();
Q1) But I require the each button to occupy 40% of screen width but with varying height.
Q2) And in particular my code requires to access buttons using getChildAt().
What Layout type should I use to replace RelativeLayout to set Button's width to 40% of screen width and in particular so I can access these Buttons using getChildAt()?
SomeLayout.getChildAt(); so that the Layout is immediate parent of Buttons.
<RelativeLayout android:id="#+id/buttonRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="10dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/optionButton1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/optionButton2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/optionButton3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/optionButton4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
You are actually just in luck. Android just released a new percent support library. They don't have documentation yet, but here is a good sample project that you can use to see how to go about using the library. It basically allows you to size view widgets by percentage of the screen.
https://github.com/JulienGenoud/android-percent-support-lib-sample
And here are two articles talking about it as well:
http://www.androidauthority.com/using-the-android-percent-support-library-630715/
http://inthecheesefactory.com/blog/know-percent-support-library/en
Android percent support library does a awesome work of giving percentage ratio for android widgets on the screen there by replacing our traditional LinearLayout
Github demo Here !
<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">
<TextView
android:id="#+id/fifty_huntv"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="#android:color/white"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_toRightOf="#id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Really awesome !!!
Right now I can't think of any layout element that will allow you to do that.
You can try this, on your code onCreate or on one of your init views/variables method, get the buttons and set the size to 40% of the screen, something like:
Display display = getWindowManager().getDefaultDisplay();
Point screenSize = new Point();
display.getSize(screenSize);
RelativeLayout rlParent = findViewById(R.id.<RELATIVE_LAYOUT_ID>);
for(int i = 0; i < 4; i++)
{
View btn = rlParent.getChildAt(i);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)btn.getLayoutParams();
params.width= screenSize.y * 0.4f;//40%
btn.setLayoutParams(params);
}
Related
Im new with Android programming on Android Studio and this seems to be simple question.
In Swift I used to get screen WIDTH and HEIGHT to put all my widgets on screen position and resize them, which in my opinion is a nice way to do that.
Here I don't know how to do that.
Ive made this screen here on XML file, this screen is the PREVIEW:
Ive set the buttons like this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:scaleType="fitXY"
android:alpha="0.7"
android:src="#mipmap/imgbackgroundstartview"
android:id="#+id/imgBackgroundStartView"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#mipmap/btnstartcpr"
android:id="#+id/imgStartViewStartVisible"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="match_parent"
android:layout_centerHorizontal="true"
android:src="#mipmap/imgstartviewtitle"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="400dp"
android:id="#+id/imgStartViewTitle"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="match_parent"
android:layout_centerVertical="true"
android:text="START"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ffffffff"
android:textStyle="bold"
android:fontFamily="sans-serif-medium"
android:textSize="36dp"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="420dp"
android:layout_marginRight="250dp"
android:layout_marginBottom="20dp"
android:id="#+id/btnLoginStartView"
android:background="#mipmap/imgstartviewlogin"
android:layout_height="wrap_content"/>
</RelativeLayout>
However when I run the program it has a different positioning and sizes:
So short question: how to do the same as I was doing on SWIFT, ie:
Set button height as 10% of screen height;
Set button width as 50% of screen width;
Position button on point (width: 50% of screen width, height: 50% of screen height), which is middle of screen.
The answer could be programmatically or on XML file, both works for me.
Thanks in advance!
I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.
I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.
I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.
I have in my Android app a fairly simple Activity that displays three buttons, each launching a different Activity. Currently, I use a RelativeLayout to center the middle button both horizontally and vertically, then place the top and bottom buttons 30dp off the middle one (and also horizontally centered).
What I'd like to do, however, is make the buttons stretch to be a certain percentage of the screen width. I can't figure out how to do this and keep the buttons centered. Is there a good object I can use as a "filler" in a LinearLayout on either side of the buttons (so I could just set the weights)? Or is there a way to do this that doesn't involve a LinearLayout?
The XML for the layout as it stands is:
<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" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:onClick="button1Callback"
android:text="#string/button1Label" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="button2Callback"
android:text="#string/button2Label" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="#string/button3Label" />
</RelativeLayout>
Sure. View or Frame both work.
<LinearLayout android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="60" />
<Button android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="20" />
<View android:layout_height="0dp"
android:layout_width="0dp"
android:layout_weight="20" />
</LinearLayout>
works fine as a spacer and seems to be utterly harmless as far as I can tell. I use this quite a bit in my app (although honestly, most of my buttons are fixed-width).
At one point I actually wrote a custom view with proportional layout. But in the end I ended up not using it at all. In almost all cases you can get equivalent proportional layout with judiciously applied weights in a linear layout.
What I want to achieve
I'm trying to make a layout equal to the next link:
http://www.flickr.com/photos/59647462#N08/7038207573/
What I have
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/minVolume"
android:src="#drawable/ic_volume_min" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/maxVolume"
android:src="#drawable/ic_volume_max" />
</LinearLayout>
the result I'm getting with this code that the seekbar extends over the right icon.
I would like to have it scaled appropriately on different screenszes
If its possible without using the weight attribute, i would love that solution
any advice is appreciated
Use android:layout_weight="0.9" in SeekBar. or
Without using layout_weight
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:contentDescription="#string/minVolume"
android:src="#drawable/ic_volume_min" />
<ImageView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/maxVolume"
android:src="#drawable/ic_volume_max"
android:layout_alignParentRight="true" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/left"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/right" />
</RelativeLayout>
make a relative layout and make the left image anchored to the left side (ALIGN_PARENT_LEFT), the right image anchored to the right side (ALIGN_PARENT_RIGHT) and the seekbar between them with android:layout_toRightOf and android:layout_toLeftOf.
For more info see the docs: http://developer.android.com/reference/android/widget/RelativeLayout.html
If you set layout_width to 0 for all the three widgets and weight to 1 for the seekbar that should work. I don't know how to do that without weight (and why?)
Use the windowManager to get the size and then adjust using operators like '/' etc,
Display display = getWindowManager().getDefaultDisplay();
int height = display.getHeight();
int width = display.getWidth();
Although i believe newer API has come into force.
I'm using Relative Layout to create a calculator screen, and i have a row of buttons labeled 1, 2, and 3. I want them evenly spaced, but i'm not sure how to do this with Relative Layout
I'm used to using the android:layout_weight function in LinearLayout, and give each of them a value of android:layout_width="fill_parent", as well as a layout_weight="1"
any way to get this to happen on calculator screen (without specifying DP or PX)
this is what i have set up at the moment, and they are aligned in order from left to right, under the TextView (calculator output screen). any suggestions/solutions to evenly space, filling the width of the screen?
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text"
android:layout_margin="6px"
/>
<Button
android:id="#+id/button1"
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
/>
<Button
android:id="#+id/button2"
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_toRightOf="#+id/button1"/>
<Button
android:id="#+id/button3"
android:text="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_toRightOf="#+id/button2"
/>
If you want equal spacing, you do not want a RelativeLayout. Use a LinearLayout, as you suggest in your question. If needed, put the Buttons in a LinearLayout and put the LinearLayout in the RelativeLayout.
The easiest would be to manipulate the view during OnCreate().
Something like:
OnCreate(Context ctx){
int w = getWidth();
int h = getHeight();
Button B1 = findViewById(R.id.button1);
B1.setWidth(w/3);
--repeat for button2,3 textview--
}
Another option would be to use a TableLayout where you stretch the columns and force the buttons to fill parent. This would require you to use
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0,1,2"
android:layout_below="#+id/textView">
<TableRow><Button
android:id="#+id/button1"
android:text="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/><Button
android:id="#+id/button2"
android:text="2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</TableRow>
</TableLayout>