Is there a simple way to create xml layout like this below in android studio? I'm the iOS XCode guy and its no problem to do this there using ratio constraints.
So far I'm using ConstraintLayout and vertical gridlines with percent option. But this only gives me equal widths view1 and view2 and no height.
I know about overriding onMeasure method solution, but I want to avoid it.
a
---------------------------
| |
| |
| |
| |
| b b |
| ----------- ----------- |
| | view1 | | view2 | |
| |b | |b | |
| | | | | |
| ----------- ----------- |
---------------------------
b = 50% * a;
You can do something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageview2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Now, in your activity or fragment, you get 2 views with findViewById();
And then:
ImageView view_instance1 = (ImageView)findViewById(R.id.imageView1);
ImageView view_instance2 = (ImageView)findViewById(R.id.imageView2);
LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)view_instance1 .getLayoutParams();
params.height= params.width;
view_instance1 .setLayoutParams(params);
view_instance2 .setLayoutParams(params);
Related
I'm quite new with Android programming in general, but I would like to know if there is a way to arrange my widgets in a particular way. Basically, I'm looking for the iOS equivalent of constraints, which will allow me to place to widgets centered horizontally and a specified distance from the bottom:
--------------------
| |
| |
| | <- android device
| |
| |
| | <- x is a button
| x x |
| |
--------------------
You can use a RelativeLayout with alignParentBottom="true"
Then you can add a padding in your relativelayout or a margin in your buttons a bit like this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation:"horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</RelativeLayout>
I am new to Android & this excellent Question / answers site..
Currently i am facing a problem with gap / space between inner linear layouts.
I have multiple linear layouts nested (linear layout -> scrollview layout -> multiple Linear Layout).
My objective is to display ImageView (with images) sizes to change dynamically based on device screen resolution.
Each inner layout is having ImageView controls. I wrote to resize each ImageView to fit on screen at run time. At design time inner linear layouts are displayed without horizontal gap, but at rum time due to dynamic code they is a gap between linear layouts.
Design display
____________ ____________
| | | |
| | | |
| ICON - 1 | | ICON - 2 |
| | | |
____________ ____________
NO horizontal space
____________ ____________
| | | |
| | | |
| ICON - 3 | | ICON - 4 |
| | | |
____________ ____________
Runtime display
____________ ____________
| | | |
| | | |
| ICON - 1 | | ICON - 2 |
| | | |
____________ ____________
un wanted horizontal space
____________ ____________
| | | |
| | | |
| ICON - 3 | | ICON - 4 |
| | | |
____________ ____________
main.xml code
<LinearLayout
android:background="#drawable/llrightborder"
android:id="#+id/mainlayoutLeft"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical" >
<ScrollView android:id="#+id/scrollView1" android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical" android:paddingTop="10.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="2dip">
<LinearLayout
android:id="#+id/leftRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<ImageView
android:id="#+id/imageicon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon1"
android:layout_marginRight="2dip"
android:clickable="true" />
<ImageView
android:id="#+id/imageicon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon2"
android:layout_marginLeft="2dip"
android:clickable="true" />
</LinearLayout>
<LinearLayout android:id="#+id/leftRow2" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageicon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon3"
android:layout_marginRight="2dip"
android:clickable="true" />
<ImageView
android:id="#+id/imageicon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon4"
android:layout_marginLeft="2dip"
android:clickable="true" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
main.java code for displaying image size dynamically
DisplayMetrics metrics = getResources().getDisplayMetrics();
iHeight = metrics.heightPixels;
iWidth = metrics.widthPixels;
leftLLWidth = (int) ((iWidth * 25) / 100);
rightLLWidth = (int) (iWidth - leftLLWidth);
leftLL = (LinearLayout) findViewById(R.id.mainlayoutLeft);
rightLL = (LinearLayout) findViewById(R.id.mainlayoutRight);
leftLL.setLayoutParams(new LinearLayout.LayoutParams(leftLLWidth, iHeight));
rightLL.setLayoutParams(new LinearLayout.LayoutParams(rightLLWidth, iHeight));
//init image buttons
img_icon1 = (ImageView) findViewById(R.id.imageicon1);
img_icon2 = (ImageView) findViewById(R.id.imageicon2);
img_icon3 = (ImageView) findViewById(R.id.imageicon3);
img_icon4 = (ImageView) findViewById(R.id.imageicon4);
btnWidth = (int) ((leftLLWidth / 2) - 3);
btnHeight = btnWidth + 60;
ViewGroup.LayoutParams button_params = img_icon1.getLayoutParams();
button_params.width = btnWidth;
button_params.height = btnHeight;
img_icon1.setLayoutParams(button_params);
//img_icon1.setOnClickListener(onMainImgClickHandler);
img_icon2.setLayoutParams(button_params);
img_icon3.setLayoutParams(button_params);
img_icon4.setLayoutParams(button_params);
Hope this explaines my issue. Thanks in Advance.
Regards
Nayeem
have you tried changing the gravity to top?
android:layout_gravity="top"
In your parent linear layout you have put width
android:layout_width="0dip"
which is not right
I have the following XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:padding="2.0dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:textSize="14.0sp"
android:textStyle="bold"
android:textColor="#ff449def"
android:layout_gravity="top|left|center"
android:id="#id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_gravity="left"
android:id="#id/eventvenue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/name" />
<TextView
android:layout_gravity="bottom|left|center"
android:id="#id/datetime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/eventvenue" />
<TextView
android:layout_gravity="left"
android:id="#+id/datetime2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/datetime" />
<ImageView
android:layout_gravity="right"
android:id="#id/customlistrowlogo"
android:padding="5.0dip"
android:layout_width="80.0dip"
android:layout_height="80.0dip"
android:scaleType="fitXY"
android:cropToPadding="true"
android:layout_alignTop="#id/name"
android:layout_alignBottom="#id/datetime2"
android:layout_alignParentRight="true"
android:contentDescription="logo" />
</RelativeLayout>
When the application is in vertical mode if the text in one of the textviews is too long then it will wrap on to the next line and not cover the image.
However when i am in horizontal mode then the text wont wrap on to the next line but instead gets covered by the image.
VERTICAL ::
----------------------------
| image |
|text text text tex image |
|t wraps around tex image |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
----------------------------
HORIZONTAL::
---------------------------------------------------------------
| |
| text image |
| text text text text text text text text text teimage |
| |
| |
| |
| |
| |
| |
| |
| |
---------------------------------------------------------------
unlike in the vertical one where the text drops to the next line in horizontal mode the text gets hidden behind the picture and doesnt go to the next line
You can have a separate XML file for landscape mode in layout-land folder. Whenever your configuration changes android tries to redraw the layout again.its better to have a layout for landscape view.
Is there someway to make TextView width match compound Drawable width (XML)?
For example for xml code:
<TextView
android:id="#+id/textView"
style="#style/TextIcons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/icon_contact"
android:gravity="center"
android:lines="2"
android:text="#string/contact_label" />
I get:
|---------------------|
| |-------------| |
| | | |
| | Drawable | |
| | View | |
| | | |
| |-------------| |
|[---Contact Label---]|
|---------------------|
But what i really want is:
|-----------------|
| |-------------| |
| | | |
| | Drawable | |
| | View | |
| | | |
| |-------------| |
| [---Contact---] |
| [----Label----] |
|-----------------|
You can simply get it to work by separating the image and the TextView, into a relative layout. It makes easy to specify where align some view's edges, etc.
The following code should do something close to what you want:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_contact"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/contact_label"
android:id="#+id/textView"
android:layout_below="#+id/imageView"
android:layout_alignRight="#+id/imageView"
android:layout_alignLeft="#+id/imageView"/>
</RelativeLayout>
I'd like to see the following layout work:
--------------------------
| ----------- |
| |TextView1| |
| ----------- |
| ---------------------- |
| |EditText1 | |
| ---------------------- |
| ----------- |
| |TextView2| |
| ----------- |
| ---------------------- |
| |EditText2 | |
| ---------------------- |
| ----------- |
| |TextView3| |
| ----------- |
| ---------------------- |
| | | |
| | | |
| | | |
| | ImageView | |
| | | |
| | | |
| | | |
| |--------------------| |
| --------- -------- |
| |Button1||Button2| |
| --------- -------- |
| ---------------------| |
| | ButtonBar | |
| ---------------------- |
|------------------------|
My issue: I can't make Button1 and Button2 work in this layout. They either go below the ImageView, hidden behind the ButtonBar or they get shrunk to nothing between the bottom of the ImageView and the top of the ButtonBar.
The current XML-code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/footer" >
<TextView
android:id="#+id/textPostUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="user" />
<EditText
android:id="#+id/editPostUser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostUser"
android:hint="user"
android:maxLength="40" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textPostComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostUser"
android:text="comment" />
<EditText
android:id="#+id/editPostComment"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textPostComment"
android:hint="comment"
android:maxLength="200"
android:maxLines="3" >
</EditText>
<TextView
android:id="#+id/textPostCharacterCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/editPostComment"
android:text="characters"
android:textSize="5pt" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/imagePostResult"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
</RelativeLayout>
<LinearLayout
android:id="#+id/footer"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonPostSave"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="save" />
</LinearLayout>
</RelativeLayout>
How do I make the left/right buttons appear below the imageview and above the buttonbar?
I'd like to at least keep the fill_parent in both height/width of the ImageView as it scales pretty nicely on different resolutions.
Your ImageView is set to fill_parent so there is no space left for the buttons below. You can switch the buttons and the imageview so the imageview takes all the space left when the buttons are already included:
<Button
android:id="#+id/buttonPostRotateLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="left" />
<Button
android:id="#+id/buttonPostRotateRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/buttonPostRotateLeft"
android:text="right" />
<ImageView
android:id="#+id/imagePostResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/buttonPostRotateLeft"
android:layout_below="#id/textPostCharacterCount"
android:src="#drawable/camera_icon" />
Why not putting the two buttons inside a horizontal LinearLayout?
Your buttons are set to android:layout_alignParentBottom="true", as well as the linear layout. The latter will hide the former since it comes last in the xml code.
Try putting your buttons in a linear layout and align it above the footer android:layout_above="#+id/footer"