I've an activity that fill with some buttons dynamically base on TableLayout and TableRow like this:
private TableLayout buttonTableLayout;
//-----
for (int row = 0; row < buttonTableLayout.getChildCount(); ++row)
((TableRow) buttonTableLayout.getChildAt(row)).removeAllViews();
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
for (int row = 0; row < 5; row++) {
TableRow currentTableRow = getTableRow(row);
for (int column = 0; column < 5; column++) {
Button newGuessButton = (Button) inflater.inflate(R.layout.my_button, currentTableRow, false);
newGuessButton.setText(String.valueOf((row * 5) + column + 1));
currentTableRow.addView(newGuessButton);
}
}
}
//----
private TableRow getTableRow(int row) {
return (TableRow) buttonTableLayout.getChildAt(row);
}
I want to make a 5*5 list of buttons that 1:All of them has the same width and height and 2: make them fill of screen.
In my code I have a layout that named my_button, like :
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newButton"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/button_style"></Button>
or
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/newButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_style"></Button>
and results is:
I have change the gravity but it doesn't works.Is there any way to make them exactly square and fill the width of screen.
Updated 2022:
Now we can do it easily with ConstraintLayout and app:layout_constraintDimensionRatio="1:1". This is the google guide link.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="My Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Previous answer:
You should sub-class Button view and override below function:
public class SquareButton extends Button {
public SquareButton(Context context) {
super(context);
}
public SquareButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size); // make it square
}
}
Edit: Ok, you need to customize your button as above. Then, instead of using the default button, you can use the above SquareButton.
<com.kingfisher.utils.SquareButton
android:id="#+id/btnSearch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="100"
android:text="Downloaded"/>
you have to dynamically get the width of screen like this:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
And after getting this you have to divide the width by 5 so that you will be having width of one button on the basis of width of screen.
int buttonWidthAndHeight = width/ 5;
Now when you are adding button to your table layout set the width and height of button as well like this:
TableLayout.LayoutParams lp= new TableLayout.LayaoutParams(buttonWidthAndHeight ,buttonWidthAndHeight ); // width,height
newGuessButton.setLayoutParams(lp);
Happy Coding!!!!!
Please Try this code, place the button_rect_shape.xml on drawable folder.
button_rect_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
/>
<solid android:color="#fc5117"/>
<!--<stroke
android:width="1dp"
android:color="#ffffff" />
-->
<!--<gradient android:angle="270"
android:centerColor="#fc5117"
android:endColor="#fc5117"
android:startColor="#fc5117" />-->
</shape>
SampleLayout.xml
<?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="200dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/button_rect_shape"
/>
</LinearLayout>
Related
I have opened a bug report at https://bugs.chromium.org/p/chromium/issues/detail?id=1144713
When I rotate the webview it does not fill the screen.
I want to rotate the webview because AndroidTV requires landscape mode... but we are gonna have the TV in a portrait setting.
i use fill_parent && match_parent but it does not work in either case.
here is a screen shot of Android Studio preview.
Also to note when i test it like this it seems like the webview matchs the screen size but doesn't adapt to the rotation... it just rotates the webview and does not resize it to the new dimensions
<?xml version="1.0" encoding="utf-8"?>
<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:layout_centerInParent="true"
android:background="#drawable/game_bg"
android:orientation="vertical"
tools:context="com.surveyswithgames.app.wheel.KeypadActivity">
<FrameLayout
android:id="#+id/frameParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_marginLeft="2dp"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
android:background="#android:color/transparent"
android:foregroundGravity="center"
android:keepScreenOn="true">
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keypadWebView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="-90"
/>
</FrameLayout>
</RelativeLayout>
UPDATE:
Based on the answer https://stackoverflow.com/a/64672893/1815624 I used a custom WebView class, yet it seems like setMeasuredDimension is not functioning...
public class CustomWebView extends WebView {
public CustomWebView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomWebView(Context context) {
super(context);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int desiredWidth = MeasureSpec.getSize(heightMeasureSpec);//getMeasuredHeight();
int desiredHeight = MeasureSpec.getSize(widthMeasureSpec);//getMeasuredWidth();
Log.e("CustomWebView", "desiredWidth: "+ desiredWidth);
Log.e("CustomWebView", "desiredHeight: "+ desiredHeight);
setMeasuredDimension(desiredWidth, desiredHeight);
}
}
UPDATE 2:
I had to use the code and layout suggested by the answer https://stackoverflow.com/a/64672893/1815624 and then it worked...Cheers
The issue that you are having is that rotation occurs post-layout. This means that the measurements occur for the landscape mode (width > height) then the view is rotated but the new width is the old height and the new height is the old width. That is what you are seeing and it is not a bug.
One way around this is to create a custom view that swaps the width and height and pivots at the origin -90 degrees then translates the whole view down by the desired height.
Here is the code for the custom view:
RotatedWebView.kt
class RotatedWebView #JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : WebView(context, attrs, defStyleAttr) {
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val desiredWidth = MeasureSpec.getSize(heightMeasureSpec)
val desiredHeight = MeasureSpec.getSize(widthMeasureSpec)
translationY = desiredWidth.toFloat()
setMeasuredDimension(desiredWidth, desiredHeight)
}
}
RotatedWebView.java
public class RotatedWebView extends WebView {
public RotatedWebView(Context context) {
super(context);
}
public RotatedWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RotatedWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int desiredWidth = MeasureSpec.getSize(heightMeasureSpec);
int desiredHeight = MeasureSpec.getSize(widthMeasureSpec);
setTranslationY(desiredWidth);
setMeasuredDimension(desiredWidth, desiredHeight);
}
}
The layout will look something like this:
activity_main.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="vertical"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/frameParent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp"
android:background="#android:color/transparent"
android:foregroundGravity="center"
android:keepScreenOn="true">
<com.example.webviewrotation.RotatedWebView
android:id="#+id/keypadWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rotation="-90"
android:transformPivotX="0dp"
android:transformPivotY="0dp" />
</FrameLayout>
</RelativeLayout>
And this is the result as seen in an emulator:
It would probably be better to place all the view manipulation into the custom view instead of splitting it between the code and the XML. I assume that you will physically rotate the TV so the web page shows as you want.
I build customView extending LinearLayout and having simple 3 childrens(2 TextView and ImageView). I create this view dynamically in code and adding it to parent LinearLayout. This view has background, so I can easily spot on the screen, that it is inflated correctly in its place, but any of child is not visible. I checked LayoutInspector and it shows that everything is setted correctly(text values to TextViews and picture to ImageView), but somehow when I try to locate them on inspector they are shown as little dot over my customView:
My CustomView is called DayTileView and this is square with gray background. As you can see on inspector on the left childrens are filled with content. Layout of View:
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<merge>
<TextView
android:id="#+id/day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/dayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#android:color/white"
/>
<ImageView
android:id="#+id/padlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_padlock"
/>
</merge>
</layout>
And its code:
public class DayTileView extends LinearLayout {
private DayTileBinding mBinding;
public DayTileView(Context context) {
super(context);
init();
}
public DayTileView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public DayTileView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mBinding = DataBindingUtil.inflate(LayoutInflater.from(getContext()), R.layout.day_tile, this, true);
setOrientation(VERTICAL);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(width, width);
}
public void setDay(int day, int month, int year) {
DateTime settedDay = new DateTime().withYear(year).withMonthOfYear(month).withDayOfMonth(day);
mBinding.day.setText(String.valueOf(day));
String dayName = settedDay.dayOfWeek().getAsText();
mBinding.dayName.setText(dayName);
boolean isWeekend = settedDay.dayOfWeek().get() == 6 || settedDay.dayOfWeek().get() == 7;
setBackgroundColor(ContextCompat.getColor(getContext(), isWeekend ? R.color.weekend_bg : R.color.weekday_bg));
}
}
Its use in another CustomView which is also LinearLayout but wiht horizontal orientation (PlannedDayView on inspector):
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<merge>
<*.customViews.DayTileView
android:id="#+id/dayTile"
android:layout_width="0dp"
android:layout_weight="0.2"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/container"
android:orientation="vertical"
android:layout_weight="1.2"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</merge>
</layout>
Has anyone any idea what could be casuing this (childs out of view)? When I replace merge for LinearLayout with vertical orientation and same background everything in Design mode of layout is visible correctly, so it should work.
EDIT:
I found out, that if I set during View initalization Padding Top to 10px then dot is moving down. So it looks like from some reasons Android didn't made to inflate correctly TextViews and ImageView
I found out what was the problem:
I overrided onMeasure and didn't measure child Views. Earlier I was using such code to make square View not square ViewGroup.
Corrected code:
final int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
setMeasuredDimension(width, width);
super.onMeasure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY));
After setting correct width and height for View I must measure whole view with new MeasureSpec
I have a horizontal RecyclerView in my layout that is populated with a CustomImageView which ensures a rounded drawable inside it. When I add these custom views, their width is zero. This RecyclerView is defined as this:
<android.support.v7.widget.RecyclerView
android:id="#+id/chart_months_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:backgroundTint="#color/saltpan"
/>
Pretty simple. Referring to my CustomImageView, this is the code and their layout:
public class CustomImageView extends ImageView {
public CustomImageView(Context context) {
super(context);
}
public CustomImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
int w = MeasureSpec.getSize(widthMeasureSpec);
int h = w * d.getIntrinsicHeight() / d.getIntrinsicWidth();
double f1 = ((double)w)*0.78;
double f2 = ((double)h)*0.78;
setMeasuredDimension((int)f1, (int)f2);
Log.e("MEASURE", f1+" "+f2);
}
else super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_cell"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/calendar_cell_bg"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="2.5dp"
android:paddingRight="2.5dp"
android:layout_margin="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<org.madebyalex.myperiod.CustomImageView
android:id="#+id/chart_cell_background"
android:src="#drawable/ball"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/chart_month_number"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="AAAA"
android:textColor="#color/saltpan"
android:textSize="35sp"
android:gravity="center_horizontal" />
</RelativeLayout>
</LinearLayout>
This code works properly. I use it in other parts and layout is fully presented. This layout is used in a class with this ctor:
public ChartMonthItem( Context context, RecyclerViewItemClickListener itemClickListener ){
super( context );
this.context = context;
this.itemClickListener = itemClickListener;
selected = false;
View view = LayoutInflater.from( context ).inflate( R.layout.chart_select_option_text_image, this );
CustomImageView backgroundMonth = ( CustomImageView )findViewById( R.id.chart_cell_background );
backgroundMonth.setMinimumWidth( 100 );
drawable = backgroundMonth.getDrawable();
chartMonthNumber = ( TextView )findViewById( R.id.chart_month_number );
}
I forced my ImageView to a minimum width of 100 just for test. Calling invalidate() doesn't work too. after Even with this approach it continues to have a width of zero.
I hoped with this approach I was ensuring a minimum width and the created ImageViews would have proper width based on their parent.
What I doing wrong?
I try to make a grid-layout with square images. I thought that it must be possible to manipulate the GridLayoutManager by manipulating onMeasure to do a
super.onMeasure(recycler, state, widthSpec, widthSpec);
instead of
super.onMeasure(recycler, state, widthSpec, heightSpec);
but unfortunately, that didn't work.
Any ideas?
To have the square elements in my RecyclerView, I provide a simple wrapper for my root View element; I use the following SquareRelativeLayout in place of RelativeLayout.
package net.simplyadvanced.widget;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
/** A RelativeLayout that will always be square -- same width and height,
* where the height is based off the width. */
public class SquareRelativeLayout extends RelativeLayout {
public SquareRelativeLayout(Context context) {
super(context);
}
public SquareRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(VERSION_CODES.LOLLIPOP)
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Set a square layout.
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
Then, in my XML layout for the adapter, I've just referenced the custom view as shown in the following. Though, you can do this programmatically also.
<?xml version="1.0" encoding="utf-8"?>
<net.simplyadvanced.widget.SquareRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/elementRootView"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- More widgets here. -->
</net.simplyadvanced.widget.SquareRelativeLayout>
Note: Depending on which orientation your grid is, then you may want to have the width based off of height (GridLayoutManager.HORIZONTAL) instead of the height being based off the width (GridLayoutManager.VERTICAL).
Constraint layout solves this problem. Use app:layout_constraintDimensionRatio="H,1:1"
recyclerview_grid_layout.xml
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
EDIT
Set ImageView width to 0dp. match_parent is now deprecated for ConstraintLayout.
In case someone would like to scale the view differently - this is how you do it:
private static final double WIDTH_RATIO = 3;
private static final double HEIGHT_RATIO = 4;
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = (int) (HEIGHT_RATIO / WIDTH_RATIO * widthSize);
int newHeightSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, newHeightSpec);
}
Starting API 26 (Support Library 26.0), one can use ConstraintLayout that exposes aspect ratio property to force views to be squared:
https://developer.android.com/training/constraint-layout/index.htm
android {
compileSdkVersion 26
buildToolsVersion '26.0.2'
...
}
...
dependencies {
compile 'com.android.support:appcompat-v7:26.0.2'
compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1' //use whatever version is current
}
Example of layout I'm using in GridLayoutManager:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_margin="#dimen/margin_small"
android:background="#drawable/border_gray"
android:gravity="center">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- place your content here -->
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
app:layout_constraintDimensionRatio="h,1:1" is the key attribute here
A small update for ConstraintLayout for androidx.
Include this line to your build.gradle:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'
I wanted to get a RecycleView with GridLayoutManager with square CardViews and I used such a layout for items:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="0dp"
card_view:cardElevation="4dp"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
>
On the ConstraintLayout
layout_width="match_parent" is important to let the item fill as much space as RecyclerView provides
layout_height="wrap_content" do not let the item to fill all the height given by RecyclerView, but use the constrained height, provided by ConstraintLayout. In my case, when I used FrameLayout or LinearLayout, the items were "tall".
On the child node, in my case CardView
limiting size to zero is important: layout_width="0dp" and layout_height="0dp" it means, that width and height are contrained
layout_constraintDimensionRatio="H,1:1" makes the desired effect, by setting H you define that height is to be constrained 1:1 is the ratio.
See some detailed explanations on the offsite.
Please, try this extension of the FrameLayout. It performs double measuring to improve consistency. It also supports custom XML properties to set-up required aspect ration from layouts
public class StableAspectFrameLayout extends FrameLayout {
private int aspectWidth = 1;
private int aspectHeight = 1;
public StableAspectFrameLayout(Context context) {
this(context, null, 0);
}
public StableAspectFrameLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public StableAspectFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
extractCustomAttrs(context, attrs);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public StableAspectFrameLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
extractCustomAttrs(context, attrs);
}
private void extractCustomAttrs(Context context, AttributeSet attrs) {
if (attrs == null) return;
TypedArray a = context.getResources().obtainAttributes(attrs, R.styleable.StableAspectFrameLayout);
try {
aspectWidth = a.getInteger(R.styleable.StableAspectFrameLayout_aspect_width, 1);
aspectHeight = a.getInteger(R.styleable.StableAspectFrameLayout_aspect_height, 1);
} finally {
a.recycle();
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int newSpecWidth = MeasureSpec.makeMeasureSpec(getMeasuredWidth(), MeasureSpec.EXACTLY);
int newH = Math.round(((float) getMeasuredWidth()) * aspectHeight / aspectWidth);
int newSpecHeigh = MeasureSpec.makeMeasureSpec(newH, MeasureSpec.EXACTLY);
super.onMeasure(newSpecWidth, newSpecHeigh);
}
}
And the content fo the attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- StableAspectFrameLayout -->
<declare-styleable name="StableAspectFrameLayout">
<attr name="aspect_width" format="integer"/>
<attr name="aspect_height" format="integer"/>
</declare-styleable>
</resources>
Once again, I recommend the relatively recent 'percent' layouts. Using the dependency 'com.android.support:percent:25.2.0', you can do something like this:
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
app:layout_widthPercent="100%"
app:layout_aspectRatio="100%"
android:padding="10dp"
android:scaleType="centerCrop"
android:cropToPadding="true"
tools:background="#efdbed"
/>
</android.support.percent.PercentFrameLayout>
It's probably much faster than ConstraintLayout, though someday we probably won't care anymore.
I don't like chosen answer so let me provide mine: Instead of wrapping entire item layout in SomeDammyLayoutWithFixedAspectRatio you can hack GridLayoutManager and rewrite code inside measureChild. I've replaced these lines:
if (mOrientation == VERTICAL) {
wSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
horizontalInsets, lp.width, false);
hSpec = getChildMeasureSpec(mOrientationHelper.getTotalSpace(), getHeightMode(),
verticalInsets, lp.height, true);
} else {
hSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
verticalInsets, lp.height, false);
wSpec = getChildMeasureSpec(mOrientationHelper.getTotalSpace(), getWidthMode(),
horizontalInsets, lp.width, true);
}
to:
if (mOrientation == VERTICAL) {
wSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
horizontalInsets, lp.width, false);
hSpec = wSpec;
} else {
hSpec = getChildMeasureSpec(availableSpaceInOther, otherDirParentSpecMode,
verticalInsets, lp.height, false);
wSpec = hSpec;
}
It seems to work fine.
Don't get me wrong, this is quite messy too, but at least this solution doesn't hurt app performance by extending view hierarchy
I had similar problem and I had to inflate the view which would be square in Grid of recycler view. Below is my way of doing it.
Inside onCreateViewHolder method I used the ViewTreeObserver and GlobalLayoutListener to get the measured width of the layout. The layout has match_parent value in the width attribute. Any my recycler view has layout in center horizontal.
final View view = LayoutInflater.from(mActivity).inflate(R.layout.list_item_deals, parent, false);
view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int side = view.getMeasuredWidth();
ViewGroup.LayoutParams lp = view.getLayoutParams();
lp.width = side;
lp.height = side;
view.setLayoutParams(lp);
}
});
reference image
I want to display TEXT and Icon on a Button.
+----------------------------+
| Icon TEXT |
+----------------------------+
I tried with
<Button
android:id="#+id/Button01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="40dip"
android:text="TEXT"
android:drawableLeft="#drawable/Icon" />
But Text and Icon is not in center.
My Text size varies, according to text size Icon and Text should get adjusted to center.
How should i do it?
You can fake it by making a more complex layout, but I'm not sure whether it's worth it. Here's something I hacked together:
<?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="wrap_content">
<Button
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/foreground"
android:layout_alignBottom="#id/foreground"
android:layout_alignRight="#id/foreground"
android:layout_alignLeft="#id/foreground"
android:onClick="clickedMe" />
<RelativeLayout
android:id="#id/foreground"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/hello" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/button_text"
android:paddingTop="10dip"
android:paddingBottom="10dip"
android:src="#drawable/icon" />
</RelativeLayout>
</RelativeLayout>
There might be a more concise way to do it. I tend to struggle getting RelativeLayout to do what I want sometimes. Note that you need to pay attention to the z-order (Button needs to appear first in the top level RelativeLayout) and you might need to adjust padding to get it to look the way you want.
Similar to some other approaches, I think a good solution is to extend Button and add the missing functionality by overriding its onLayout method:
public class CenteredIconButton extends Button {
private static final int LEFT = 0, TOP = 1, RIGHT = 2, BOTTOM = 3;
// Pre-allocate objects for layout measuring
private Rect textBounds = new Rect();
private Rect drawableBounds = new Rect();
public CenteredIconButton(Context context) {
this(context, null);
}
public CenteredIconButton(Context context, AttributeSet attrs) {
this(context, attrs, android.R.attr.buttonStyle);
}
public CenteredIconButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (!changed) return;
final CharSequence text = getText();
if (!TextUtils.isEmpty(text)) {
TextPaint textPaint = getPaint();
textPaint.getTextBounds(text.toString(), 0, text.length(), textBounds);
} else {
textBounds.setEmpty();
}
final int width = getWidth() - (getPaddingLeft() + getPaddingRight());
final Drawable[] drawables = getCompoundDrawables();
if (drawables[LEFT] != null) {
drawables[LEFT].copyBounds(drawableBounds);
int leftOffset =
(width - (textBounds.width() + drawableBounds.width()) + getRightPaddingOffset()) / 2 - getCompoundDrawablePadding();
drawableBounds.offset(leftOffset, 0);
drawables[LEFT].setBounds(drawableBounds);
}
if (drawables[RIGHT] != null) {
drawables[RIGHT].copyBounds(drawableBounds);
int rightOffset =
((textBounds.width() + drawableBounds.width()) - width + getLeftPaddingOffset()) / 2 + getCompoundDrawablePadding();
drawableBounds.offset(rightOffset, 0);
drawables[RIGHT].setBounds(drawableBounds);
}
}
}
The sample only works for left and right drawables, but could be extended to adjust top and bottom drawables too.
How about this one?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lovely_color"
android:clickable="true"
android:onClick="clickHandler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="no?"
android:textColor="#color/white"
android:layout_centerHorizontal="true"
android:drawableLeft="#drawable/lovely_icon"
android:drawablePadding="10dp"
android:padding="10dp"
android:gravity="center"
android:textSize="21sp"/>
</RelativeLayout>
This should work
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="hello" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
/>
</LinearLayout>
How about using a SpannableString as the text with an ImageSpan?
Button myButton = ...
SpannableString ss = new SpannableString(" " + getString(R.string.my_button_text));
Drawable d = getResources().getDrawable(R.drawable.myIcon);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, DynamicDrawableSpan.ALIGN_BOTTOM);
ss.setSpan(span, 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
myButton.setText(ss);
You can just set a padding depending on button size and image size:
Button button1 = null;
//initialize button….
ViewGroup.LayoutParams params = button1.getLayoutParams();
int btn1Width = ((int) (0.33 * (double)ecranWidth));
params.width = btn1Width;
button1.setLayoutParams(params);
button1.setPadding((btn1Width/2-9), 0, 0, 0);
//where (btn1Width/2-9) = size of button divided on 2 minux half size of icon…
The easy way (albeit not perfect) is to set the paddingRight to the same width as your icon.
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/your_text"
app:icon="#drawable/ic_example"
app:iconGravity="textStart"/>
This is what I did... It can be improved. The text is centered and the icon is to the left. So they both aren't centered as a group.
public class CustomButton extends Button
{
Rect r = new Rect();
private Drawable buttonIcon = null;
private int textImageSeparation = 10;
public CustomButton(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
public CustomButton(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public CustomButton(Context context)
{
super(context);
}
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Drawable icon = getButtonIcon();
if(icon != null)
{
int drawableHeight = icon.getIntrinsicHeight();
int drawableWidth = icon.getIntrinsicWidth();
if(icon instanceof BitmapDrawable)
{
Bitmap bitmap = ((BitmapDrawable)icon).getBitmap();
drawableWidth = (int) AndroidScreenUtils.dipToPixels(bitmap.getWidth());
drawableHeight = (int) AndroidScreenUtils.dipToPixels(bitmap.getHeight());
}
else
{
drawableWidth = (int) AndroidScreenUtils.dipToPixels(icon.getIntrinsicWidth());
drawableHeight = (int) AndroidScreenUtils.dipToPixels(icon.getIntrinsicHeight());
}
float textWidth = getLayout().getPaint().measureText(getText().toString());
float left = ((getWidth() - textWidth) / 2) - getTextImageSeparation() - drawableWidth;
int height = getHeight();
int top = (height - drawableHeight) /2;
int right = (int) (left + drawableWidth);
int bottom = top + drawableHeight;
r.set((int) left, top, right, bottom);
icon.setBounds(r);
icon.draw(canvas);
}
}
private Drawable getButtonIcon()
{
return buttonIcon;
}
public void setButtonIcon(Drawable buttonIcon)
{
this.buttonIcon = buttonIcon;
}
private int getTextImageSeparation()
{
return textImageSeparation;
}
public void setTextImageSeparation(int dips)
{
this.textImageSeparation = (int) AndroidScreenUtils.dipToPixels(dips);
}
}
<LinearLayout
style="#style/Sonnen.Raised.Button.Transparent.LightBlueBorder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:orientation="horizontal"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawableLeft="#drawable/refresh"
android:drawablePadding="10dp"
android:drawableStart="#drawable/refresh"
android:gravity="center"
android:text="#string/generic_error_button_text"
android:textColor="#color/dark_sky_blue"
android:textSize="20sp"/>
</LinearLayout>
I made a custom component to solve this problem.
Component class:
class CustomImageButton #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
defStyleRes: Int = 0
) : RelativeLayout(context, attrs, defStyleAttr, defStyleRes) {
init {
inflate(context, R.layout.custom_image_button, this)
// Load the styled attributes and set their properties
val typedArray = context.obtainStyledAttributes(
attrs,
R.styleable.CustomImageButton, defStyleAttr, 0
)
val src = typedArray?.getDrawable(R.styleable.CustomImageButton_cib_src)
val text = typedArray?.getText(R.styleable.CustomImageButton_cib_text)
val contentDescription = typedArray?.getText(R.styleable.CustomImageButton_cib_contentDescription)
ivIcon.setImageDrawable(src)
tvText.text = text
ivIcon.contentDescription = contentDescription
typedArray?.recycle()
}
}
Component XML:
<?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:toos="http://schemas.android.com/tools"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="fill_parent"
android:layout_height="#dimen/button_height">
<Button
android:id="#+id/bClick"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/foreground"
android:layout_alignBottom="#id/foreground"
android:layout_alignEnd="#id/foreground"
android:layout_alignStart="#id/foreground"/>
<RelativeLayout
android:id="#id/foreground"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#color/textWhite"
toos:text="Some text to test"
toos:ignore="RelativeOverlap"/>
<ImageView
android:id="#+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toStartOf="#id/tvText"
android:paddingTop="1dip"
android:paddingBottom="1dip"
android:src="#mipmap/some_image_to_test"
toos:ignore="ContentDescription"/>
</RelativeLayout>
</RelativeLayout>
The resources attributes, attrs.xml:
<declare-styleable name="CustomImageButton">
<attr name="cib_src" format="reference"/>
<attr name="cib_text" format="string"/>
<attr name="cib_contentDescription" format="string"/>
</declare-styleable>
Component use example:
<app.package.components.CustomImageButton
android:id="#+id/cibMyImageButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:cib_src="#mipmap/my_image_to_put_in_the_button"
app:cib_text="Some text to show in the button"
app:cib_contentDescription="icon description"/>
This is a hack, but worked for me with a negative margin:
<Button
android:id="#+id/some_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/some_drawable"
android:drawablePadding="-118dp"
android:paddingEnd="28dp"
android:text="#string/some_string" />
A better way would probably be doing this in a custom view
android:layout_gravity="center_vertical|center_horizontal|center" >