How to fill a ConstraintLayout with two radioButtons inside of a RadioGroup? I can't find a way to do it. I post here two images, one is how I want to make it look, and the other is how it looks right now with my code.
This is how it looks right now
This is how I want
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout6">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/radio_selector"
android:button="#color/transparent"
android:elevation="4dp"
android:padding="16dp"
android:text="Paypal"
android:textAlignment="center" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/radio_selector"
android:button="#color/transparent"
android:elevation="4dp"
android:padding="16dp"
android:text="Contrarreembolso"
android:textAlignment="center" />
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
The best thing that I could do after reading some answers on StackOverflow and trying many things is to get to this point:
I have taken this layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RadioGroup
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:background="#193312"
android:elevation="4dp"
android:text="Paypal"
android:textAlignment="center" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#122B33"
android:elevation="4dp"
android:gravity="center"
android:text="Contrarreembolso"
android:textAlignment="center" />
</RadioGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
And used this code to get the height of the screen and put half of it on my views, inside your activity:
#Override
protected void onStart() {
super.onStart();
//Get the height is the screen
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
DisplayMetrics displayMetrics = new DisplayMetrics();
RadioButton radioButton1 = findViewById(R.id.radioButton);
RadioButton radioButton2 = findViewById(R.id.radioButton2);
//Give view half of the screen height
ViewGroup.LayoutParams params = radioButton1.getLayoutParams();
params.height = (height)/2;
ViewGroup.LayoutParams params2 = radioButton2.getLayoutParams();
params2.height = (height)/2;
}
Notice that this layout is not perfect looking, your radio buttons do spread across your device in height but they are not equal, the one thing left to do if you want your button to be equal in height is to calculate the action bar height and take it into account.
Related
The main problem here is that the parent layout is nested scroll view so the height must be wrap content
so the view is like first image
what I want is to make the "don't have an account? register" TextView
to be at the bottom of the screen so I calculate the height of my
phone then the height of layout to subtract to subtract them and
assign the result to the top margin of textview
and here's my code
ViewTreeObserver observer = binding.parentConstraint.getViewTreeObserver();
if (observer.isAlive()) {
observer.addOnGlobalLayoutListener(() -> {
DisplayMetrics displayMetrics = getContext().getResources().getDisplayMetrics();
float parentViewHeightInDP = (int) (binding.parentConstraint.getHeight() / displayMetrics.density);
if (getContext() != null) {
float heightInDP = displayMetrics.heightPixels / displayMetrics.density;
float distanceBetweenLayoutBottomAndParenBottom = heightInDP - parentViewHeightInDP;
if (distanceBetweenLayoutBottomAndParenBottom > 32) {
if (topMargin == 0) {
topMargin = 1;
ConstraintLayout.LayoutParams layoutParams = (ConstraintLayout.LayoutParams) binding.loginTextDontHaveAccount.getLayoutParams();
layoutParams.topMargin = Math.round(distanceBetweenLayoutBottomAndParenBottom);
Handler handler = new Handler();
handler.postDelayed(() -> {
binding.loginTextDontHaveAccount.requestLayout(); },
50);
}
}
but that the result I got
so my real question here is why there still some space here, I mean
the TextView should be exactly at the bottom
What I would suggest you to make NestedScrollView as a child instead of parent.
Make RelativeLayout as your parent and use layout_alignParentBottom to set TextView at bottom. Something like this.
<?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">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:clickable="true"
android:fillViewport="true"
android:focusable="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="650dp"
android:background="#mipmap/ic_launcher" />
<ImageView
android:layout_width="match_parent"
android:layout_height="650dp"
android:layout_below="#+id/img1"
android:background="#color/colorPrimary" />
</LinearLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Try this:
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/emailtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:hint="Email"
android:inputType="textEmailAddress"
android:textColorHint="#80000000" />
<EditText
android:id="#+id/passwordtext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:hint="Password"
android:inputType="textPassword"
android:textColorHint="#80000000" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<Button
android:id="#+id/enter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Enter"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="This is my app"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/enter" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use constraint layout. Pay attention to layout_constraintBottom_toTopOf button and layout_constraintTop_toBottomOf textview.
I am trying to add Text views programmatically to Relative layout parent one below other. However, the first view is not aligning correctly while the rest of the view got aligned correctly. See attached image.
My code:
private void setupQuestionChoices(int position) {
question.setText(questionList.get(position).question());
choicesTextViewsList.clear();
for (int i = 0; i < questionList.get(position).choices().size(); i++) {
TextView textView = new TextView(getActivity());
textView.setBackgroundResource(R.drawable.qa_button_background);
textView.setMinWidth(300);
textView.setGravity(Gravity.CENTER);
textView.setText(questionList.get(position).choices().get(i));
textView.setId(i);
RelativeLayout.LayoutParams layoutParams =
new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i == 0) {
layoutParams.addRule(RelativeLayout.BELOW, question.getId());
} else {
layoutParams.addRule(RelativeLayout.BELOW, choicesTextViewsList.get(i - 1).getId());
}
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
layoutParams.setMargins(20, 20, 20, 20);
relativeLayout.addView(textView, layoutParams);
choicesTextViewsList.add(textView);
choicesTextViewsList.get(i).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
answerSelected = true;
}
});
}
}
Relative layout xml where I add my views to:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<RelativeLayout
android:id="#+id/relative_parent" //here is where I add views to
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:textColor="#color/colorPrimary"
android:textSize="30sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:gravity="center">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_back"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="30dp"
android:background="#drawable/rectangle_border"
android:text="Back"
android:textColor="#android:color/darker_gray" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_next"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="30dp"
android:background="#drawable/rectangle_border"
android:text="Next"
android:textColor="#android:color/darker_gray" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
I read some posts related to this issue and followed the guidelines from them but that did not help.
How to lay out Views in RelativeLayout programmatically?
Create a new TextView programmatically then display it below another TextView
I was using the index of the for loop as id for the textViews which I changed to make Android generate Id for it as below and it is working fine now as expected.
I changed the line
textView.setId(i)
to
textView.setId(ViewGroup.generateViewId())
Thanks.
I've set my buttons to be arranged from top to bottom in order of Facebook, Instagram, Twitter and Reddit but it's not doing that, it's only showing Facebook and Reddit and I don't know why.
I've got my buttons to automatically resize on Activity creation with this code:
public void getScreenRes() {
DisplayMetrics display = this.getResources().getDisplayMetrics();
int screenwidth = display.widthPixels;
int screenheight = display.heightPixels;
double buttonheight = screenwidth / 2.66666667;
int buttonheightint= (int) Math.round(buttonheight);
ImageButton fbLogin = (ImageButton) findViewById(R.id.facebookLogin);
ViewGroup.LayoutParams fb = fbLogin.getLayoutParams();
fb.width = screenwidth;
fb.height = buttonheightint;
fbLogin.setLayoutParams(fb);
ImageButton instaLogin = (ImageButton) findViewById(R.id.instagramLogin);
ViewGroup.LayoutParams insta = instaLogin.getLayoutParams();
insta.width = screenwidth;
insta.height = buttonheightint;
instaLogin.setLayoutParams(insta);
ImageButton twitLogin = (ImageButton) findViewById(R.id.twitterLogin);
ViewGroup.LayoutParams twit = instaLogin.getLayoutParams();
twit.width = screenwidth;
twit.height = buttonheightint;
twitLogin.setLayoutParams(twit);
ImageButton redditLogin = (ImageButton) findViewById(R.id.redditLogin);
ViewGroup.LayoutParams reddit = instaLogin.getLayoutParams();
reddit.width = screenwidth;
reddit.height = buttonheightint;
redditLogin.setLayoutParams(reddit);
}
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="16dp"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.eren.valour.FirstTimeLogin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/getStarted"
android:id="#+id/getStartedText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/facebook"
android:id="#+id/facebookLogin"
android:onClick="facebookLogin"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/instagram"
android:layout_below="#+id/facebookLogin"
android:id="#+id/instagramLogin"
android:onClick="instagramLogin"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/twitter"
android:layout_below="#+id/instagramLogin"
android:id="#+id/twitterLogin"
android:onClick="twitterLogin"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/reddit"
android:layout_below="#+id/twitterLogin"
android:id="#+id/redditLogin"
android:onClick="redditLogin"
/>
What it looks like now:
You need to get the corresponding Layoutparams.
ViewGroup.LayoutParams reddit = instaLogin.getLayoutParams();
should be
ViewGroup.LayoutParams reddit = redditLogin.getLayoutParams();
the same with the Twitter Login:
ViewGroup.LayoutParams twit = twitLogin.getLayoutParams();
What youre doing is taking the instagram layoutparams and applying it to 3 buttons so they all get placed on top of another, so only the last shows. Probably just a copy+past error on your side, but that should fix it.
If that does not fix it, the problem should be in the layout file. Try using a LinearLayout or setting the correct attributes for your RelativeLayout.
Try to change your Layout from RelativLayout to LinearLayout. That should do it.
You can put it into a LinearLayout with a weightsum Like so. Without the java method.
<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="match_parent" android:orientation="vertical"
android:paddingTop="16dp" android:weightSum="5"
tools:context="com.eren.valour.FirstTimeLogin">
<TextView
android:id="#+id/getStartedText" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" android:layout_weight="1" android:padding="50dp" // you can tweak this figure here
android:text="getStarted\nhere" android:textAppearance="?android:attr/textAppearanceLarge"/>
<ImageButton
android:id="#+id/facebookLogin" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:background="#drawable/fb" android:onClick="facebookLogin"/>
<ImageButton
android:id="#+id/instagramLogin" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:background="#drawable/insta" android:onClick="instagramLogin"/>
<ImageButton
android:id="#+id/twitterLogin" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:background="#drawable/twit" android:onClick="twitterLogin"/>
<ImageButton
android:id="#+id/redditLogin" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:background="#drawable/reddit" android:onClick="redditLogin"/>
</LinearLayout>
Update your XMl..
Instead of RelativeLayout ,I Think you should you should use LinearLayout and Weight propert like this ...
<LineaLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingTop="16dp"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.eren.valour.FirstTimeLogin"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/getStarted"
android:id="#+id/getStartedText"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:background="#drawable/facebook"
android:id="#+id/facebookLogin"
android:onClick="facebookLogin"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/instagram"
android:layout_below="#+id/facebookLogin"
android:id="#+id/instagramLogin"
android:onClick="instagramLogin"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/twitter"
android:layout_below="#+id/instagramLogin"
android:id="#+id/twitterLogin"
android:onClick="twitterLogin"
android:layout_weight="1"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/reddit"
android:layout_below="#+id/twitterLogin"
android:id="#+id/redditLogin"
android:onClick="redditLogin"
android:layout_weight="1"
/>
Also you don't need this method getScreenRes() anymore.
Been switching from linear layout and relative layout, because I wanted to attain the centering of the image.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:scrollbars="none"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/itemItem"
android:src="#drawable/content_picture"
android:tag="image_item_grid_image"
android:layout_width="wrap_content"
android:background="#drawable/layout_bg"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center|center_horizontal"
android:adjustViewBounds="true"
android:contentDescription="Desc"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout >
</ScrollView>
Display Image:
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.height = height / 2;
params.width = width / 2;
params.setMargins(0, 50, 0, 0);
//mImageView.get().setImageBitmap(bitmap.get());
if(bitmap!=null){
Log.d("#ImageValue: ", ""+bitmap.toString());
mImageView.get().setImageBitmap(bitmap.get());
mImageView.get().setLayoutParams(params);
}
The image is not centering for some reason, and I tried as much as I know but seems there is lacking.
Try this..
Remove gravity add android:layout_centerHorizontal="true" and android:layout_centerVertical="true"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/itemItem"
android:src="#drawable/content_picture"
android:tag="image_item_grid_image"
android:layout_width="wrap_content"
android:background="#drawable/layout_bg"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:contentDescription="Desc"
android:scaleType="fitCenter" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout >
</RelativeLayout>
EDIT:
add below lines also in your params
params.addRule(RelativeLayout.CENTER_VERTICAL,RelativeLayout.TRUE);
params.addRule(RelativeLayout.CENTER_HORIZONTAL,RelativeLayout.TRUE);
Your Relative Layout is set to:
<RelativeLayout
android:layout_width="wrap_content" // will not fill parent so children will centre in relative layout, not the whole view
android:layout_height="wrap_content"
android:orientation="vertical" >
you should either set the Relative Layout to fill parent for width and height or set the Scroll Views layout_gravity to center so that the Relative Layout centers within the scrollview.
Try using
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
instead of
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
And comment out the logic to centre image view programmatically.
I would like to make an activity with this structure:
The idea is to put some text in the top, a banner allways in the top, the button OVER the banner and my canvas in the center of the view, using all the possible space.
I'm subclassing View to draw my canvas and overloading the onMeasure() method:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Calculate the size of the board
this.squareSize = MeasureSpec.getSize(widthMeasureSpec) / BOARD_NUM_ROWS;
this.leftMargin = (MeasureSpec.getSize(widthMeasureSpec) - squareSize*BOARD_NUM_COLUMNS) / 2;
this.topMargin = this.leftMargin;
// Set the size of the board to full width and aspect ratio height
int desiredWidth = MeasureSpec.getSize(widthMeasureSpec);
int desiredHeight = this.topMargin + (BOARD_NUM_ROWS * this.squareSize) + this.topMargin;
this.setMeasuredDimension(desiredWidth, desiredHeight);
}
And this is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".DrawLevelActivity"
android:background="#color/activity_background">
<TextView
android:id="#+id/instructionsText"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<com.mycanvas.BoardCanvas
android:id="#+id/boardCanvas"
android:gravity="center"
android:layout_below="#+id/instructionsText"
android:layout_centerVertical="true"
android:padding="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/solveButton"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="30dp"
android:paddingRight="30dp"
android:layout_below="#+id/boardCanvas"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<com.google.ads.AdView
xmlns:googleads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/adView"
android:gravity="center"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
googleads:adSize="BANNER"
googleads:adUnitId="#string/admob_id" />
</RelativeLayout>
Unfortunately the button appear under the banner and I think that the reason is that the canvas is very large.
The set value in onMeasure() is always smaller than MeasureSpec.getSize(heightMeasureSpec)
The key here is to use a LinearLayout setting a layout_weight value just for your canvas. This way, the top and above views will wrap their content, and the canvas will fill the free space. The layout xml would look like this.-
<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="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_vertical|center_horizontal"
android:background="#990099"
android:text="Some text here" />
<RelativeLayout
android:id="#+id/canvas"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#999900"
android:layout_weight="1">
<!-- The canvas -->
</RelativeLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<RelativeLayout
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#009999">
<!-- The banner -->
</RelativeLayout>
</LinearLayout>
Notice I set some hardcoded heights and colors so that you can easily see the results. This layout will render a view like this.-