I want to overlap 10 buttons on an image. I am using RelativeLayout to do the same but as a result, the position of the buttons changes in different devices. So, can someone tell me a workaround for that? This is the xml file for this activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/exercise1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
tools:context="nmss.example.com.coach.Exercise1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/humanbody"
android:layout_marginStart="20dp"/>
<Button
android:id="#+id/btn_neck"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginStart="145dp"
android:layout_marginTop="62dp"
android:text="Neck"
android:textSize="12sp" />
<Button
android:id="#+id/btn_shoulder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginTop="75dp"
android:text="Shoulder"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_biceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="135dp"
android:text="Biceps"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_forearm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="195dp"
android:text="Forearm"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_quads"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="315dp"
android:text="Quads"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_chest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="145dp"
android:layout_marginTop="100dp"
android:text="Chest"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_abs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginTop="160dp"
android:text="Abs"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_triceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="246dp"
android:layout_marginTop="125dp"
android:text="Triceps"
android:textSize="12sp" />
<Button
android:id="#+id/btn_mid_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="215dp"
android:layout_marginTop="175dp"
android:text="Middle back"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_calves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="210dp"
android:layout_marginTop="400dp"
android:text="Calves"
android:textSize="12sp"/>
</RelativeLayout>
This is the view in Android Studio
Just use LinearLayout instead of RelativeLayout.
Try to arrange your image buttons on top,bottom,right and left using the percentages.
You also need to create different Layouts Folders in your res folder for all devices and use the dimensions accordingly.
Never hard code the sizes like this, 25dp,
Add this link to your dependencies, to get the dimensions for every screen.
compile 'com.intuit.sdp:sdp-android:1.0.4'
Its uses is like this,
android:layout_marginTop="#dimen/_110sdp"
After writing, #dimen/...Ctrl+Space, you can see the value of dimensions from 1dp to 600dp. Try it, its very useful.
Related
I'm new to Android studio, and I need to write something on the Button here but the text doesn't show, what can I do to solve this?
Note that the LinearLayout showed in the code is placed inside another bigger LinearLayout.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/datee"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/yellow_border"
android:text="hiiii"
android:gravity="center_horizontal"
android:paddingHorizontal="10dp"
android:textSize="15sp"></Button>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="25dp"
android:text="Auction date: "
android:id="#+id/done"></TextView>
</LinearLayout>
you can use somthing like this
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/datee"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:text="hiiii"
android:gravity="center_horizontal"
android:textSize="15sp" />
</LinearLayout>
and try to change the android:background="#drawable/yellow_border"
because you might have some padding inside of it
I have a horizontal layout with two views in it: an EditText that will show a chosen path, and a "Browse" Button to the right of the EditText.
I want the EditText to expand as required, but not to the extent that it pushes the Button off the screen.
Here is my current xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
I have tried all types of layout, I have tried using toLeftOf, toRightOf and everything I can think of, I think I now need help if I am to get this working.
You can achieve this using layout weights:
<LinearLayout
android:layout_width="match_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
This xml can be interpreted as saying: "let the EditText take up all the horizontal room that is not filled by other views" (in this case, the only other view is the Button).
Try with RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"
android:layout_toLeftOf="#+id/browse_button"
android:layout_alignParentLeft="true" />
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_alignParentRight="true" />
</RelativeLayout>
My application uses buttons and image buttons constructed via XML and drawable folder.
On some devices applications UI elements (buttons and image buttons) losses its position and overlaps on each other and on some devices last button in bottom of screen disappears.
Same is happening when orientation is changed.
I want all my elements to be on same position on all devices.
How can I make this using XML.
Is there any easy and simple way to do so?
Here is my XML.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:orientation="vertical" >
<ImageButton
android:id="#+id/main_btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="55dp"
android:layout_marginTop="71dp"
android:background="#ffffff"
/>
<ImageButton
android:id="#+id/main_btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/main_btn_1"
android:layout_marginRight="56dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_1"
android:layout_below="#+id/main_btn_1"
android:textColor="#00aeed"
android:textStyle="normal" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignLeft="#+id/main_btn_2"
android:textColor="#ea1d24"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="42dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_3"
android:layout_below="#+id/main_btn_3"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_alignTop="#+id/main_btn_3"
android:background="#000000"
/>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/main_btn_4"
android:layout_below="#+id/main_btn_4"
android:textColor="#f7941d"
android:textStyle="normal" />
<ImageButton
android:id="#+id/main_btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp"
android:background="#000000"
/>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/main_btn_5"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0065b3"
android:textStyle="normal" />
</RelativeLayout>
Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (i.e. LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.
Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it 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="wrap_content"
android:background="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.
I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.
I want to create the following layout -
http://postimg.org/image/56e9y0hrj/
But when I use the Relative layout and write the following code, I get something like this.
http://postimg.org/image/4gm0r15k1/
Here is mt 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#5c575c"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Top Stories"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView1"
android:layout_alignTop="#+id/textView1"
android:src="#drawable/one" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/two" />
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:text="A sample widget for multiple lines"
android:layout_alignRight="#id/imageView1"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView2"
android:layout_alignBottom="#+id/textView2"
android:layout_alignLeft="#+id/imageView2"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/textView2"
android:text="World"
android:background="#ccc6ba"
style="#style/format"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignLeft="#+id/textView4"
android:layout_alignTop="#+id/textView4"
android:src="#drawable/three" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="120dip"
android:layout_height="160dip"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/imageView3"
android:src="#drawable/four" />
<TextView
android:id="#+id/textView5"
style="#style/format_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView3"
android:layout_alignLeft="#+id/imageView3"
android:layout_alignRight="#+id/imageView3"
android:background="#ccc6ba"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView6"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView5"
android:layout_alignBottom="#+id/textView5"
android:layout_alignLeft="#+id/imageView4"
android:text="A sample widget for multiple lines"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView7"
android:layout_marginTop="10dip"
android:layout_marginBottom="2dip"
style="#style/format"
android:background="#ccc6ba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:text="Cricket"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
I have gone through http://android-developers.blogspot.in/2009/02/android-layout-tricks-1.html and http://www.mkyong.com/android/android-relativelayout-example/ but could not find the solution. The images I use are of dimention 400by300 generated by http://dummyimage.com/
Please help me out !
Possible layout workaround, just from scratch, should show only my idea and is not testet: Do two LinearLayouts which specify layout_weight="1" inside one parent LinearLayout. This segments both LinearLayouts inside to the same size. Inside these two LinearLayouts, set the imageView and textView. But also, here You have to do different layout.xml for multiple screen usage.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/one"
/>
<TextView
android:id="#+id/textView2"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="center"
android:src="#drawable/two"
/>
<TextView
android:id="#+id/textView3"
style="#style/format_text"
android:background="#ccc6ba"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A sample widget for multiple lines""/>
</LinearLayout>
</LinearLayout>
And then, You have define some new layout folders inside res-folder in your project. You need folders for different sizes. Inside these folder you have to define a layout file where the image views got different heights to match to the related screen size. But this is beyond the frame, so You have to learn a little bit about using multiple screen sizes:
http://developer.android.com/guide/practices/screens_support.html
using Fragments is even possible:
http://developer.android.com/guide/components/fragments.html
http://www.vogella.com/articles/AndroidFragments/article.html
EDIT
This behaviour of your textvies is because of the different screen sizes. That´s what I had talking about, to get all looking good, You have to do more than only one layout. Here are some examples how one layout looks on different screens:
HTC Desire S 3.7 inches
the imageViews and TextViews fill the whole width, so the textViews are completely as width as the imageViews. By default, the textView wraps automatically if the text is too long, but this could be device dependant. Usally define maxLines, that will cause wrap text inside the textView. But if the text is shorter than the width, it doesn´t wrap.
Device with 5.1 inches
here the text is shorter than the width, so it doesn´t wrap. You could fix this by set fixed sizes to textView.
But this is all just scratches the subject, I can´t complain the whole thing in here. You have to learn how to handle different layouts. You have to set fixed sizes to different layouts, different resources and so on.