TabLayout with two tabs one 75% other 25% - android

I am working on a screen that has two tabs:
The first one must have a width of 75% of the screen.
The second one must have a width of 25% of the screen.
Example:
This is how I have defined my TabLayout:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/TabTextAppearance"
app:tabTextColor="#color/darkGrey" >
How can I customise my tabs layout to fix the desired width?

You can do it programtically. Add them separately for different tabs.
LinearLayout layout = ((LinearLayout) ((LinearLayout) tabLayout.getChildAt(0)).getChildAt(YOUR_TAB_NUMBER));
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) layout.getLayoutParams();
layoutParams.weight = YOUR_WEIGHT; // e.g. 0.5f
layout.setLayoutParams(layoutParams);

For LinearLayout you can use weight mechanism:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="#0f0" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00F" />
</LinearLayout>
First View has weight 3, and second has 1. So together has 4 (first 75%, second 25%)

Related

How to adjust recyclerview height?

I want the recyclerview to adjust it's height so that the items don't get hidden behind the pricebar ( see image )
This is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutMainContainer"
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"
tools:context="com.mridulahuja.groceryapp.activities.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#null" />
<RelativeLayout
android:id="#+id/layoutPricebar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#454560"
android:layout_alignParentBottom="true"
android:visibility="gone">
...
...
</RelativeLayout>
</RelativeLayout>
Code I'm using to resize recyclerview:
ViewTreeObserver pricebarvto = layoutPricebar.getViewTreeObserver();
pricebarvto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
layoutPricebar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
layoutPricebar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
pricebarHeight = layoutPricebar.getMeasuredHeight();
}
});
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) recyclerView.getLayoutParams();
params.height = relativeLayoutContainerHeight - pricebarHeight;
recyclerView.setLayoutParams(params);
where relativeLayoutContainerHeight is the height of the root RelativeLayout
But the height isn't changing. It's changing when I hard-code a big value
to pricebarHeight such as 160. And I've given pricebar the height of just 50dp.
Also I'm using this animation to display the pricebar:
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromYDelta="180%"
android:toYDelta="0%">
</translate>
Use linear layout with vertical orientation instead of relative layout and give recycler view
android:layout_weight="1"
If you use RelativeLayout then you should use android:layout_marginBottom
Specifies extra space on the bottom side of this view. This space is
outside this view's bounds. Margin values should be positive.
XML
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
................
android:layout_marginBottom="50dp" />
If you want LinearLayout Then follow android:weightSum Logic .
Defines the maximum weight sum. If unspecified, the sum is computed by
adding the layout_weight of all of the children. This can be used for
instance to give a single child 50% of the total available space by
giving it a layout_weight of 0.5 and setting the weightSum to 1.0.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutMainContainer"
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"
tools:context="com.mridulahuja.groceryapp.activities.MainActivity">
<RelativeLayout
android:id="#+id/layoutPricebar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#454560"
android:layout_alignParentBottom="true"
android:visibility="gone">
...
...
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_above = "#id/layoutPricebar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#null" />
</RelativeLayout>
Try to put the layout pricebar with id : layoutPricebar below the recycler_view by using android:layout_below: "#+id/recycler_view"
<RelativeLayout
android:id="#+id/layoutPricebar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#454560"
android:layout_below="#+id/recycler_view"
android:layout_alignParentBottom="true"
android:visibility="gone">
if your pricebar height is 50dp make RecyclerView android:layout_marginBottom="50dp" this will solve your issue no need of java code for resizing the Recyclerview

dynamically increase and decrease the relative layout

dynamically increase and decrease the relative layout , i want to shrink the size of relative layout when recycler view popup from bottom of screen and after using it agian the screen will return into normal size(in recycler view im sung icons to put on relative view)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_weight="1">
////////tool bar
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/rel1"
android:layout_width="wrap_content"
android:layout_height="400dp"
android:layout_below="#+id/toolbar"
android:layout_weight="1">
<com.cmlibrary.CircleMenu
android:id="#+id/circle_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="180dp"
android:layout_marginTop="180dp"
/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="#+id/rel1"
android:padding="5dp" />
</RelativeLayout>
Better way is to show and hide the visibility of views as required. But if you want to increase and decrease the size then below code will help you.
private void layoutParams() {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) relativeLayout.getLayoutParams();
ViewGroup.LayoutParams params = recyclerView.getLayoutParams();
/* When recyclerView shows*/
layoutParams.height = layoutParams.height - params.height;
relativeLayout.setLayoutParams(layoutParams);
/* When recyclerView hidden*/
layoutParams.height = RelativeLayout.LayoutParams.MATCH_PARENT;
relativeLayout.setLayoutParams(layoutParams);
}
Hope this will help.

Android set layout_weight to width in vertical LinearLayout

I got a vertical LinearLayout, in which there's a button. I want to make this button 70% of the width of the LinearLayout and center it.
I've tried setting layout_weight to 0.7 while setting the layout_width to 0, but since it's a vertical LinearLayout, it doesn't affect the width, but can only affect the height.
How can I change the weight of the width in a vertical layout? Will I must add a nesting horizontal LinearLayout just for the button so I can set its weight?
Try using new PercentRelativeLayout, and you can achieve what you are trying without nested layouts.
include this in your dependencies :com.android.support:percent:25.1.0
And then in your code
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
<Button
app:layout_widthPercent="70%"
android:layout_height="wrap_content"/>
...
</android.support.percent.PercentRelativeLayout>
linearLayout -> orientation = horizontal
button -> layout width = 0dp
-> layout height = wrap_content
-> layout weight = 1
Please check this out.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/yourRequiredButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:id="#+id/container"
android:layout_weight="0.3"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
Try this:
<LinearLayout>
<Space android:layout_weight=0.15/>
<Button android:layout_weight=0.7/>
<Space android:layout_weight=0.15/>
</LinearLayout>
https://developer.android.com/reference/android/widget/Space.html
I also suggest you put the values in dimens.xml file.

layout height issue with weight and wrap_content

My view is like:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
/>
</LinearLayout>
It will give 50dp to TextView and rest of area to RecyclerView.
But if items in RecyclerView are less than, say 1 or 2, then it should shrink to the height of it's child views other wise behave like layout specifies. Can any one help??
I think the best option would be to change LinearLayout.LayoutParams of the root view dynamically. When the RecyclerViewhas a low amount of children, then set LinearLayout params to:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
layout.setParams(params);
otherwise, leave as it is.
It is very easy to detect if RecyclerView should be wrapped. Obtain LinearLayout height:
int height = layout.getTop() - layout.getBottom()
If this height is lower than the expected maximum height (screen height or other predefined value).
A simple approach would be using RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/recyclerView" />
</RelativeLayout>

two views with match_parent in linear_layout in scrollview

Is it possible to have two views that are the same height of the activity screen inside of a linear_layout inside of a scrollview? I tried achieving this like so:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
The only thing that appears one button with the height of the screen. The other button seems to have disappeared.
I suppose it is paradoxical to have two views to with the attribute match_parent.
However, I was hoping to get two views the same size of the available screen using xml, and having the scrollview make both views accessible. I am aware that it can be done via java, but I want an answer for xml.
In Linear Layout you have to define two things...
1 .android:orientation="vertical"
2 .android:weightSum="2"
weightSum is sum of all element in it's parent layout.It Enable you to define the proportion of width/height a element should take in a layout..
For further details go to weightSum
<ScrollView 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:layout_below="#+id/textView1"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2" >
<Button
android:id="#+id/but1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
<Button
android:id="#+id/but2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
</LinearLayout>
</ScrollView>
output
You cannot achieve this in XML only.
As android support multiple screen sizes, At runtime you need to check for each device , the height for each device can be calculated like this
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
With above code you will get the height of screen and you need to set this height in dp to your view at runtime.
Do this in your activity for both the buttons:
// get view you want to resize
Button but1= (Button) findViewById(R.id.but1);
LinearLayout.LayoutParams listLayoutParams = new LinearLayout.LayoutParams(
height , LinearLayout.LayoutParams.MATCH_PARENT);
but1.setLayoutParams(listLayoutParams);

Categories

Resources