Adjust size and gap between FancyButton placed on LinearLayout

Question

I have placed programmatically generated FancyButtons on LinearLayout. But, the generated buttons are placed too compactly, in other words, there is no separation between two successive buttons. Also, I want the buttons to stretch entire with of the layout. I tried btnWordList.setMinimumWidth(MATCH_PARENT) without any result. Please find the code below.

FlexDict.java

package in.dipanjan.flexdict;

import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.graphics.Color;
import android.content.Intent;
import android.widget.LinearLayout;
import android.graphics.PixelFormat;
import mehdi.sakout.fancybuttons.FancyButton;
import android.support.v7.app.ActionBarActivity;

public class FlexDict extends ActionBarActivity implements View.OnClickListener {

    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        Window window = getWindow();
        window.setFormat(PixelFormat.RGBA_8888);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        int listCount, wordLists = 5;

        /* http://stackoverflow.com/questions/19078461/android-null-pointer-exception-findviewbyid */
        setContentView(R.layout.activity_flex_dict);
        LinearLayout container = (LinearLayout)findViewById(R.id.container);

        for(listCount = 1; listCount <= wordLists; listCount++)
        {
            /* https://github.com/medyo/fancybuttons */
            FancyButton btnWordList = new FancyButton(this);
            btnWordList.setId(listCount);
            btnWordList.setText("WordList " + listCount);
            btnWordList.setBackgroundColor(Color.parseColor("#3b5998"));
            btnWordList.setFocusBackgroundColor(Color.parseColor("#5474b8"));
            btnWordList.setTextSize(20);
            btnWordList.setIconResource("\uf04b");
            btnWordList.setRadius(10);
            btnWordList.setOnClickListener(this);
            container.addView(btnWordList);
        }

        setContentView(container);
    }

    @Override
    public void onClick(View view) {
        int wordList = view.getId();

        /*
        * http://www.java-samples.com/showtutorial.php?tutorialid=1525
        * http://stackoverflow.com/questions/7980627/pressing-back-button-did-not-go-back-to-previous-activity-android
        */
        Bundle params = new Bundle();
        params.putInt("WordList", wordList);
        Intent intent = new Intent(this, ShowList.class);
        intent.putExtras(params);
        startActivity(intent);
    }
}

activity_flex_dict.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@drawable/radialback">
</LinearLayout>

UI

http://s26.postimg.org/rkb0r4ys9/Fancy_Button.png

score 1 · Accepted Answer · answered May 17 '15 at 13:22

1

You need to setLayoutParams on your View.

i.e. btnWordList.setLayoutParams(new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT));

You need to set layout params for any view even if instantiated in XML or Programatically.

http://developer.android.com/reference/android/view/View.html#setLayoutParams(android.view.ViewGroup.LayoutParams)

Set the layout parameters associated with this view. These supply parameters to the parent of this view specifying how it should be arranged. There are many subclasses of ViewGroup.LayoutParams, and these correspond to the different subclasses of ViewGroup that are responsible for arranging their children.

answered May 17 '15 at 13:22

Blundell

75,855
30
208
233

But now the problem is that the text is automatically right-aligned. I tried `btnWordList.setTextAlignment(FancyButton.TEXT_ALIGNMENT_CENTER);`, but it does not seem to work. – sherlock May 17 '15 at 14:38
look into `View.Gravity` – Blundell May 17 '15 at 15:16
`lp.gravity = Gravity.CENTER` or `btnWordList.setGravity(Gravity.CENTER)` doesn't work either. – sherlock May 17 '15 at 15:59
you need to combine, Gravity, LayoutGravity and View width / height (http://www.slideshare.net/PaulBlundell2/android-jam-week-7-udacity-lesson-5-rich-responsive-layouts-manchester slide 12) – Blundell May 18 '15 at 07:54

score 1 · Answer 2 · answered May 17 '15 at 13:26

You need to set a margin between your buttons to make a gab between your buttons. and set your width to match_parent to make the button stretch to the width of the layout

int marginBottom = (int) TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    5, 
    r.getDisplayMetrics()
 );

for(listCount = 1; listCount <= wordLists; listCount++)
{
      /* https://github.com/medyo/fancybuttons */
      FancyButton btnWordList = new FancyButton(this);
      btnWordList.setId(listCount);
      LayoutParams params = new LayoutParams(
            LayoutParams.MATCH_PARENT,      
            LayoutParams.WRAP_CONTENT
      );
      params.setMargins(0, 0, 0, marginBottom);
      btnWordList.setLayoutParams(params);
      btnWordList.setText("WordList " + listCount);
      btnWordList.setBackgroundColor(Color.parseColor("#3b5998"));
      btnWordList.setFocusBackgroundColor(Color.parseColor("#5474b8"));
      btnWordList.setTextSize(20);
      btnWordList.setIconResource("\uf04b");
      btnWordList.setRadius(10);
      btnWordList.setOnClickListener(this);
      container.addView(btnWordList);
}

score 1 · Answer 3 · answered May 17 '15 at 13:40

1

You can use LayoutParam with margin

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
lp.bottumMargin = 2;

// or lp.setMargins(0,0,0,2);

btnWordList.setLayoutParams(lp);

answered May 17 '15 at 13:40

Yohannes Ejigu Ademe

84
5

Adjust size and gap between FancyButton placed on LinearLayout

3 Answers3