I want to do something simple, 3 buttons in 1 column, responsive, like on screen.
Should I create it on RelativeLayout like in my code, or TableLayout would be better idea?
How to link RelativeLayout to the top and to the bottom, to be sure that last button never go out of the bottom of screen?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity"
android:background="#color/green"
>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="NAGRAJ"
android:id="#+id/nagraj"
android:src="#drawable/button_sos"
android:scaleType="fitStart"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:background="#null"
android:layout_marginBottom="25px"
android:tag="nagraj"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="112"
android:id="#+id/zadzwon"
android:layout_below="#+id/nagraj"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/button_112"
android:scaleType="fitStart"
android:background="#null"
android:adjustViewBounds="true"
android:layout_marginBottom="25px"/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ZDJECIE"
android:id="#+id/foto"
android:layout_below="#+id/zadzwon"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/button_foto"
android:scaleType="fitStart"
android:background="#null"
android:adjustViewBounds="true"
/>
</RelativeLayout>
Use both RelativeLayout and LinearLayout like this
RelativeLayout
LinearLayout (orientation:vertical && weightsum = 3)
ImageView (weightsum = 1)
ImageView (weightsum = 1)
ImageView (weightsum = 1)
LinearLayout
Button (align to the bot of the above LinearLayout and android:layout_alignParentBottom="true")
RelativeLayout
Have you tried using LinearLayout vertically and adding layout_weight parameters? This will always keep buttons in the same spacing, regardless the screen size. I think this might be helpful: https://stackoverflow.com/a/4517358/4890826
Edit:
New Google Percent Support Library might be also helpful - especially in responsive design - http://www.androidauthority.com/using-the-android-percent-support-library-630715/
You should not use either RelativeLayout or TableLayout for this. You should use a LinearLayout with layout_weight.
The layout_weight parameter basically means that if 2 (or more) layouts have the same value, they get the same amount of screen space. In the code below, all 3 buttons have the same layout_weight (1 in this example), so they each get exactly 1/3 of the space available, without going outside the screen.
This code below should give you what you need.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity"
android:background="#color/green"
android:orientation="vertical">
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="NAGRAJ"
android:id="#+id/nagraj"
android:src="#drawable/button_sos"
android:background="#null"
android:layout_marginBottom="14dp"
android:tag="nagraj"/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="112"
android:id="#+id/zadzwon"
android:src="#drawable/button_112"
android:background="#null"
android:layout_marginBottom="14dp"/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="ZDJECIE"
android:id="#+id/foto"
android:src="#drawable/button_foto"
android:background="#null"/>
</LinearLayout>
Related
This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.
You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.
In my relative layout, I want two images to display on extreme right bottom and left bottom of the screen. I can see padding on the edges of the screen after scaling the width and height of the imageview to one third. I want padding to be removed and images should come to extreme right bottom and left bottom
Is there anything
Here is activity xml and java code
<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"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/basket2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/basketclose2" />
<ImageView
android:id="#+id/basket1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:adjustViewBounds="true"
android:src="#drawable/basketclose2" />
Java Code:
leftBasket.getLayoutParams().width = width/3;
leftBasket.getLayoutParams().height = height/3;
rightBasket.getLayoutParams().width = width/3;
rightBasket.getLayoutParams().height = height/3;
So remove padding from your layout
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
remove :
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
from relative layout.
you have mentioned padding in layout that is the issue just remove it
remove the paddings in the RelativeLayout.
write like this:
<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:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/basket2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/basketclose2" />
<ImageView
android:id="#+id/basket1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:adjustViewBounds="true"
android:src="#drawable/basketclose2" />
</RelativeLayout>
I work with android, I want to draw design like this
There are two LinearLayuots ( blue and white ), I want add picture their borders, I have tryied to use minus margin but not work
Can Anybody help me?
You'd want something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#013032"
android:orientation="horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#ff3e7730"
android:layout_below="#+id/firstRow"/>
<ImageView
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:layout_width="140dp"
android:layout_height="140dp"/>
</RelativeLayout>
you can use a RelativeLayout for your layout's parent and then add two LinearLayout and one ImageView or Button. and set your Button (or ImageView,etc) to centerVertical and alignParentLeft and give some marginLeft to it!
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="com.example.neo.myapplication.MyActivity">
<LinearLayout
android:id="#+id/aboveLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/darker_gray"
></LinearLayout>
<LinearLayout
android:layout_below="#+id/aboveLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_green_dark"></LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>
I tried many times to draw 2 Relative layout aligned horizontally and divided in half screen.
I design the image with paint to explain a bit better what i mean.
Any suggestion?
Another way to accomplish the same task without needing to use a LinearLayout is to put a center-aligned "shim" in the middle of the parent layout, then align other elements to it. If you set the half-width element's width to match_parent, but align both their left and right sides, they'll end up shrinking themselves to fit.
<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"
tools:context="com.example.EqualWidthExample" >
<!-- An invisible view aligned to the center of the parent. Allows other
views to be arranged on either side -->
<View
android:id="#+id/centerShim"
android:layout_height="match_parent"
android:layout_width="0dp"
android:visibility="invisible"
android:layout_centerHorizontal="true"/>
<!--Set width to match_parent sets maximum width. alignParentLeft aligns
the left edge of this view with the left edge of its parent. toLeftOf
sets the right edge of this view to align with the left edge of the
given view. The result of all three settings is that this view will
always take up exactly half of the width of its parent, however wide
that may be. -->
<Button
android:id="#+id/btLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/centerShim"
android:text="Left Button" />
<!--Same deal, but on the right -->
<Button
android:id="#+id/btRight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/centerShim"
android:layout_below="#+id/tvLeft"
android:text="Right Button" />
</RelativeLayout>
You can put these 2 RelativeLayouts inside a LinearLayout with horizontal orientation, then use the weight for both RelativeLayouts. This will divide the LinearLayout in 2 equal parts.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
now you can do it easily using PercentRelativeLayout
<android.support.percent.PercentRelativeLayout
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:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Button"
app:layout_widthPercent="50%"/>
<Button
android:id="#+id/button2"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/button"
android:text="Button 2"
app:layout_widthPercent="50%"/>
</android.support.percent.PercentRelativeLayout>
don't forget to add the gradle dependency
dependencies {
compile 'com.android.support:percent:25.3.1'
}
code in github
Update
PercentRelativeLayout is Deprecated since API level 26.0.0
You could use an non-recommended structure with nested wieghts
<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="wrap_content"
android:orientation="vertical"
android:baselineAligned="false"
android:weightSum="5">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:layout_gravity="center">
<TextView
android:id="#+id/TopTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Top Text View"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_weight="4">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/LeftTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Left Text View"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/RightTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Right Text View"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I see 4 relativelayouts in your drawing...?
If you mean the two in the middle put them into one LinearLayout (horizontal orientation), let all of them have a width of match_parent and give both relative layouts a weight of 1
I have a LinearLayout & i have 2 TextViews inside it. Dynamically i want to hide one TextView or i can add TextViews at runtime. My problem is when TextView disappears from LinearLayout it collapses in no time. I want to animate the LinearLayout(ScaleAnimation) when views get removed from LinearLayout.
activity_main.xml
<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"
tools:context=".MainActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#000"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#fff"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="Hello, World 2" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Remove TextView" />
</RelativeLayout>
Snapshot of layout...
I want to animate LinearLayout when second TextView got removed from LinearLayout & if another TextView got added into LinearLayout. ScaleAnimation is good for the above task but i don't know values required for this type of animation.
Pretty sure that you do not need it anymore, but for future searchers:
For the remove animation, it is possible to make the item invisible using view.setVisibility(View.INVISIBLE) and after the animation (addAnimationListener) effectually remove it from the linear layout. When a view is invisible its parent keeps measuring it.