Develop Reference

Why can't I set the elevation on a view that I add programmatically?

Disclaimer: I am using Xamarin.Android.
I created a view, set its elevation, and then add it to my main layout. The view successfully gets added to the layout when I trigger the event, but there is no elevation shadow whatsoever.
Here is what I am working with:
View that gets added programmatically:
public class TooltipTest : FrameLayout
{
private Context context;
private ShapeDrawable box;
private View carrot;
private string message;
public TextView TooltipText
{
get;
private set;
}
public TooltipTest(Context context, string message) : base(context)
{
this.context = context;
this.message = message;
Initialize();
}
private void Initialize()
{
CreateText();
}
private void CreateText()
{
int paddingTopBottom = 30;
int paddingLeftRight = 27;
TooltipText = new TextView(context);
TooltipText.Text = message;
TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));
AddView(TooltipText);
}
Event to add the view:
ButtonTest.Click += (sender, e) => {
var tooltip = new TooltipTest(this, Resources.GetString(Resource.String.test_text));
var tooltipParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
tooltip.Elevation = 20f;
ParentLayout.AddView(tooltip, tooltipParams);
};
Any ideas on why the shadow doesn't show? I've tried setting SetClipToPadding(false) and SetClipChildren(false) on the tooltip, but that had no effect.

Use the AppCompat method ViewCompat.SetElevation(View, int) to set the elevation as desired. But on a pre-Lollipop devices, the method appears to do nothing.
The only way I found to render shadows to pre-Lollipop UI elements was using a background instead:
android:background="#android:drawable/dialog_holo_light_frame"
If you want do dig more on this topic, go to this reddit topic and search for elevation. There are really good updated information there.

I have discovered why setting the elevation wasn't working on my custom TooltipTest view. The problem was that that view itself didn't have any background set, and according to Android's documentation, there needs to be some sort of resource in the background property, whether it be a color or some drawable.
As you can see from my original post, within my TooltipTest class, which inherits from a FrameLayout, I create a TextView (TooltipText) and add it to the layout. Then, within my Activity class, I set the elevation on that TooltipTest class. Since I didn't explicitly set a Background resource for the TooltipTest Layout class, Android didn't know what to draw a shadow for.
All I had to do to fix my problem was add Elevation to the TooltipText object, not the TooltipTest object.
private void CreateText()
{
int paddingTopBottom = 30;
int paddingLeftRight = 27;
TooltipText = new TextView(context);
TooltipText.Text = message;
TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));
TooltipText.Elevation = 21f; //(or whatever value you want)
AddView(TooltipText);
}
If you want a shadow on the TooltipTest class, you would need to set the Background property:
private void CreateText()
{
int paddingTopBottom = 30;
int paddingLeftRight = 27;
TooltipText = new TextView(context);
TooltipText.Text = message;
TooltipText.SetTextColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipText)));
TooltipText.SetTextSize(ComplexUnitType.Sp, 14f);
TooltipText.SetPadding(paddingLeftRight, paddingTopBottom, paddingLeftRight, paddingTopBottom);
TooltipText.SetBackgroundColor(new Color(ContextCompat.GetColor(context, Resource.Color.tooltipBackground)));
SetBackgroundColor (new Color (ContextCompat.GetColor (context, Resource.Color.white)));
AddView(TooltipText);
}
Doing it the latter way would give you an ugly white background with a shadow under it. However, you can use any sort of drawable you want for the Background property. Instead of using SetBackgroundColor(Color color), you can do Background = (some drawable);

Custom view not getting drawn in GridLayout

I've got a custom view that I'm trying to fill a GridLayout with. The custom view consists of a TextView inside of a circle. The problem I'm having is that the onDraw() method of my custom view never gets called so I always end up with a blank screen. When I populate my GridLayout with just regular TextViews it works just fine so I'm guessing the problem lies somewhere with my custom View.
My onCreate:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample_collection);
gl = (GridLayout) findViewById(R.id.grid_sample_collection);
gl.setColumnCount(9);
gl.setRowCount(9);
LayoutInflater inflater = LayoutInflater.from(this);
for(int i=0;i<gl.getRowCount();i++){
for(int j=0;j<gl.getColumnCount();j++){
SampleCollectionView sampleCollectionView = new SampleCollectionView(this);
sampleCollectionView.setLabelText(i + "." + j);
gl.addView(sampleCollectionView);
//Adding the TextViews shown below works just fine
//TextView t = new TextView(this);
//t.setText(i + "." + j);
//t.setTextSize(30f);
//t.setPadding(30, 30, 30, 30);
//gl.addView(t);
}
}
int childCount = gl.getChildCount();
for (int i= 0; i < childCount; i++){
final SampleCollectionView sampleCollectionView = (SampleCollectionView) gl.getChildAt(i);
//final TextView text = (TextView) gl.getChildAt(i);
sampleCollectionView.setOnClickListener(new View.OnClickListener(){
public void onClick(View view){
Log.d("OnClickListener: ", "Clicked text: " + sampleCollectionView.getLabelText());
}
});
}
}
My custom view:
public SampleCollectionView(Context context){
super(context);
init();
}
public SampleCollectionView(Context context, AttributeSet attrs) {
super(context, attrs);
//get the attributes specified in attrs.xml using the name we included
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.SampleCollectionView, 0, 0);
try {
//get the text and colors specified using the names in attrs.xml
circleText = a.getString(R.styleable.SampleCollectionView_circleLabel); //0 is default
circleCol = a.getInteger(R.styleable.SampleCollectionView_circleColor, 0);
circleBorderCol = a.getInteger(R.styleable.SampleCollectionView_circleBorderColor, 0);
labelCol = a.getInteger(R.styleable.SampleCollectionView_labelColor, 0);
} finally {
a.recycle();
init();
}
}
public void init(){
mPaint = new Paint();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int viewWidthHalf = this.getMeasuredWidth()/2;
int viewHeightHalf = this.getMeasuredHeight()/2;
int radius = 0;
if(viewWidthHalf>viewHeightHalf)
radius=viewHeightHalf-10;
else
radius=viewWidthHalf-10;
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setAntiAlias(true);
mPaint.setColor(circleCol);
canvas.drawCircle(viewWidthHalf, viewHeightHalf, radius, mPaint);
mPaint.setTextAlign(Paint.Align.CENTER);
mPaint.setTextSize(20);
canvas.drawText(circleText, viewWidthHalf, viewHeightHalf, mPaint);
}
EDIT: After some testing I found out that the height and weight of my custom views were 0. After using setMinimumHeight and setMinimumWidth they are actually getting drawn and are responding to clicks. The only problem now is that for some reason, all of the custom views are completely invisible...
EDIT 2: Turns out the views weren't visible because I wasn't setting the View's properties like circleCol properly, which caused them to be set to their default value (0).

I managed to figure out what was going wrong. I created my custom Views without specifying a height/width. Naturally, this led to them getting a height and width of 0, with the GridLayout getting the same constraints as it was set to wrap_content.
After giving my views a proper height and width with the setMinimumHeight and setMinimumWidth methods I ran into another issue: The views weren't visible. They were being drawn as the onClickListener was responding to taps on various parts of the screen but I couldn't see them. The cause of this was the same thing that was responsible for the height and width being 0: The custom View's color properties weren't set properly. I was attempting to do this via XML but for some reason it couldn't retrieve the values of the properties I had specified in my XML file. Because the properties weren't specified, they reverted to their default values which resulted in no color being specified and no string getting supplied to the label. I fixed this by programmatically setting the properties.

Create Android subviews like iOS subviews

I'm trying to programmatically (not using XML files) create custom subviews in Android (that's what I call it in iOS) that is a basically a number of basic views (labels, buttons, text fields etc) put together into a reusable subview class so I can use it inside my UIViewControllers or Activity in Android.
I don't know what is the correct terminology in Android. There seems to be a million different terminologies.
Custom View, ViewGroups, Layouts, Widgets, Components, whatever you want to call it.
In iOS this is simply done like this:
CustomView.h
#interface CustomView : UIView
#property (nonatomic, strong) UILabel *message;
#property (nonatomic, strong) UIButton *button;
#end
CustomView.m
#implementation CustomView
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
[self initViews];
[self initConstraints];
}
return self;
}
-(void)initViews
{
self.message = [[UILabel alloc] init];
self.button = [[UIButton alloc] init];
[self addSubview:self.message];
[self addSubview:self.button];
}
-(void)initConstraints
{
id views = #{
#"message": self.message,
#"button": self.button
};
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[message]|" options:0 metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[button]|" options:0 metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[message][button]|" options:0 metrics:nil views:views]];
}
#end
Now I can reuse this custom view in any ViewController (Android Activity) I chose.
How does one achieve something like that in Android?
I've been looking around and from what I gather in Android, to add subviews, I add them to Layouts:
RelativeLayout relativeLayout = new RelativeLayout(...);
TextView textView = new TextView(...);
relativeLayout.addSubview(textView);
Does that mean I need extend RelativeLayout or ViewGroup?
Looking at this page: http://developer.android.com/reference/android/view/ViewGroup.html
It seems like we need to write some really complicated logic to layout the custom view such as:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
// These keep track of the space we are using on the left and right for
// views positioned there; we need member variables so we can also use
// these for layout later.
mLeftWidth = 0;
mRightWidth = 0;
// Measurement will ultimately be computing these values.
int maxHeight = 0;
int maxWidth = 0;
int childState = 0;
// Iterate through all children, measuring them and computing our dimensions
// from their size.
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
// Measure the child.
measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0);
// Update our size information based on the layout params. Children
// that asked to be positioned on the left or right go in those gutters.
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (lp.position == LayoutParams.POSITION_LEFT) {
mLeftWidth += Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
} else if (lp.position == LayoutParams.POSITION_RIGHT) {
mRightWidth += Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
} else {
maxWidth = Math.max(maxWidth,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
}
maxHeight = Math.max(maxHeight,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
childState = combineMeasuredStates(childState, child.getMeasuredState());
}
}
// Total width is the maximum width of all inner children plus the gutters.
maxWidth += mLeftWidth + mRightWidth;
// Check against our minimum height and width
maxHeight = Math.max(maxHeight, getSuggestedMinimumHeight());
maxWidth = Math.max(maxWidth, getSuggestedMinimumWidth());
// Report our final dimensions.
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, childState),
resolveSizeAndState(maxHeight, heightMeasureSpec,
childState << MEASURED_HEIGHT_STATE_SHIFT));
}
All I'm trying to do is use multiple basic android labels, views, buttons in a custom view like the iOS example above, why is it so hard in Android ?
I was hoping for something simple like this:
public class CustomView extends View
{
public RelativeLayout mainLayout;
public TextView message;
public Button button;
// default constructor
public CustomView()
{
...
initViews();
initLayouts();
addViews();
}
public initViews()
{
mainLayout = new RelativeLayout(this);
message = new TextView(this);
button = new Button(this);
...
}
public initLayouts()
{
// --------------------------------------------------
// use Android layout params to position subviews
// within this custom view class
// --------------------------------------------------
}
public addViews()
{
mainLayout.addView(message);
mainLayout.addView(button);
setContentView(mainLayout);
}
}
I'm sorry I am sincerely trying to learn and build a basic Android application and not trying to bash Android's way of doing things.
I know how to add and layout subviews inside an Activity and have been doing so for the past two days but not inside a custom View/View Group/Layout. I don't want to end up constructing the exact same subview for each of my Activity in the Android app, that just goes against good coding practice right ? :D
Just need a bit of guidance here from others who have done both iOS and Android development.
Edit
It seems like what I'm looking for is called a Compound Control: http://developer.android.com/guide/topics/ui/custom-components.html
I'll keep digging and hopefully achieve the result I'm after :D
Just need to work out this Inflater business.

OK, I think I got it, not sure if it's the best solution but it does what I want.
So it goes something like this:
public class CustomView extends RelativeLayout
{
private Context context;
public TextView message;
public Button button;
public CustomView(Context context)
{
super(context);
// ---------------------------------------------------------
// store context as I like to create the views inside
// initViews() method rather than in the constructor
// ---------------------------------------------------------
this.context = context;
initViews();
initLayouts();
addViews();
}
public CustomView(Context context, AttributeSet attrs)
{
super(context, attrs);
// ---------------------------------------------------------
// store context as I like to create the views inside
// initViews() method rather than in the constructor
// ---------------------------------------------------------
this.context = context;
initViews();
initLayouts();
addViews();
}
public initViews()
{
// ----------------------------------------
// note "context" refers to this.context
// that we stored above.
// ----------------------------------------
message = new TextView(context);
...
button = new Button(context);
...
}
public initLayouts()
{
// --------------------------------------------------
// use Android layout params to position subviews
// within this custom view class
// --------------------------------------------------
message.setId(View.generateViewId());
button.setId(View.generateViewId());
RelativeLayout.LayoutParams messageLayoutParams = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT
);
message.setLayoutParams(messageLayoutParams);
RelativeLayout.LayoutParams buttonLayoutParams = new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT
);
button.setLayoutParams(buttonLayoutParams);
}
public addViews()
{
// adding subviews to layout
addView(message);
addView(button);
}
}
Now I can use this custom view in any of my Activity:
public class MainActivity extends ActionBarActivity {
// custom view instance
protected CustomView approvalView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
...
initViews();
}
public initViews()
{
...
approvalView = new CustomView(this);
approvalView.message.setText("1 + 1 = 2");
approvalView.button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Log.d("Logger", "Math formula approved! :D");
}
});
}
}
Inflater is used if we create our layout using XML which isn't something I like to do, so I generated my view's layout programmatically :D
The above "RelativeLayout" in "extends RelativeLayout" can be replace with "LinearLayout" or other layouts of course.

To add a simple answer for the general visitor to this question...
You can't add subviews to an Android View like you can with an iOS UIView.
If you need to add subviews in Android, then use one of the ViewGroup subclasses (like LinearLayout, RelativeLayout, or even your own custom subclass).
myViewGroup.addView(myView);

Android and ios app development are two different concepts, each have its own way to perform your task. Sometimes its difficult to develop a piece of code in android and sometimes in ios.
To create your view screen/design/GUI in android you can create XML file (recommended) or by code (which is somehow difficult to maintain w.r.t XML).
For your question you don't need to create your own ViewGroup or RelativeLayout or LinearLayout e.g. if you want to use RelativeLayout as a parent for your view than by using XML you can use.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some Text"/>
</RelativeLayout>
If you want to create your view pragmatically than use
RelativeLayout parentRelativeLayout = new RelativeLayout(context);
RelativeLayout.LayoutParams parentParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
parentRelativeLayout.setLayoutParams(parentParams);
TextView childTextView = new TextView(context);
childTextView.setText("Some Text");
mRelativeLayout.addView(childTextView);
Its just a sample code both have identical output but with programmatic approach it will be difficult as your view grows.
Looking your code you are creating custom view (why?) in android we only need custom views if default views not are providing some functionally which we need to use/implement in our code.
As far as i understand you want to use custom views for reuse. Its good approach but if android is providing some functionality than why you are trying to invent wheel again, just use different layouts, use only custom views if you want something extra.

How can I style Android tabs to get 3d look?

I want to create an Android tab view to look like this image:
I guess there are many ways to Rome, but I think I still haven't found the ideal one. My idea was to cut out a divider and an active divider and place them between the buttons. However, I don't know if this would be such a good solution because I still would need different styling for the first and last button. I already have a 9 patch for the surrounding (grey) container.
I've also thought about making a red 9 patch for the red bar, and than just style the selected button. The problem with this solution is that I'd still have to place the top diagonal white lines according to the number of buttons.
Does anyone have a better solution for me?

Here's another approach: to separate the header from the tabs. A bit complicated, yes, but the benefits are:
It allows you to define common tabs style;
Supports any number of buttons.
On this picture the buttons are of different width, so in reality an additional ImageView may be needed to the left of the header.
Let's create our header view as a LinearLayout. We can put upper dividers and stretchable gaps with the same layout_weight.
public class HeaderLayout extends LinearLayout {
public HeaderLayout(Context context) {
super(context);
initView();
}
public HeaderLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
public void setNumberOfColumns(int number) {
removeAllViews();
for (int i = 0; i < number; i++) {
addView(getColumnView(), getColumnLayoutParams());
// We don't need a divider after the last item
if (i < number - 1) {
addView(getDividerView(), getDividerLayoutParams());
}
}
}
private void initView() {
setBackgroundResource(R.drawable.header_bg);
}
private View getColumnView() {
return new View(getContext());
}
private View getDividerView() {
ImageView dividerView = new ImageView(getContext());
dividerView.setImageResource(R.drawable.header_divider);
dividerView.setScaleType(ImageView.ScaleType.FIT_XY);
return dividerView;
}
private LayoutParams getColumnLayoutParams() {
return new LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);
}
private LayoutParams getDividerLayoutParams() {
return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
}
}
Where R.drawable.header_bg is a 9patch:
And R.drawable.header_divider is a simple (optionally transparent) bitmap:
For me personally, making different background for the first and the last button is the least difficult solution, but it depends on the actual task.

How can I set font size for all activities in Android programming

I'm building an android application thatI need to have a seek bar in the first activity to use it to change the font size for all texts for all other activities that follow (approximetally 8 activities}.Can someone pls help??

The Solution is: You can't. But there is a work around(not sure though worth a try). You create a base activity and extend the base activity in all your activities (approx. 8 as you say). Then you can use the for loop kind of thing to set fonts to every text in the activitites in the onResume() of the Base Activity.
Something like this:
public static void setViewGroupTypeface(ViewGroup container, Typeface typeface) {
final int children = container.getChildCount();
for (int i = 0; i < children; i++)
View child = container.getChildAt(i);
if (child instanceof TextView) {
setTextViewTypeface((TextView) child, typeface);
} else if (child instanceof ViewGroup) {
setViewGroupTypeface((ViewGroup) child, typeface);
}
}
}
public static void setTextViewTypeface(TextView textView, Typeface typeface) {
textView.setTypeface(typeface);
}
Where you call the setViewGroupTypeface method with rootView of the activity as the viewGroup along with the typeFace.