Resize or hide Button and EditText placed on the screen for each page

Introduction

device.gif

I want to change the size of EditText, buttons, etc. for each screen like this! I want to create with the ratio of the screen! : clap_tone2:

Way of thinking

To change the layout for each screen, I thought that I should create a layout file for each Fragment by tablayout and place items (EditText and Button this time) for each layout file, but this time it is a different method. .. This time, we will implement these in the main Activity, which is the source of calling Fragment. Here, I would like to introduce two merits that I have considered.

The first

The first advantage is that it can be fixed by the parent layout, right? ?? : point_up: (In my implementation, when I implemented ListView, RecyclerView, etc. in Fragment, item (EditText and Button this time) moved by scrolling.)

The second

The second merit is that it doesn't become redundant because it doesn't have to be described in each Fragment layout file. ?? : clap_tone2: I think this is a good thing. : sunny:

Implementation

Cooperation between tablayout and viewpager

First, link tablayout and viewpager. This time, we will implement it with 5 tabs. Then, prepare 5 Fragments and 5 layout files to be included in them.

5 layout files

layout/layout1.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView1" />
</LinearLayout>

layout/layout1.xml layout/layout2.xml layout/layout3.xml layout/layout4.xml layout/layout5.xml Please prepare 5 layout files like this.

5 Fragment files

Fragment1.java


package jp.app.oomae.hisaki.dynamic_button_sample.Fragment;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import jp.app.oomae.hisaki.dynamic_button_sample.R;

public class Fragment1 extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState){
        View view = inflater.inflate(R.layout.layout1, container, false);//R.layout.Please change to layout1-5
        return view;
    }
}

Fragment1.java Fragment2.java Fragment3.java Fragment4.java Fragment5.java Please prepare 5 in this way.

adapter

Attach tablayout and 5 Fragments with adapter.

Viewpager_Adapter.java


package jp.app.oomae.hisaki.dynamic_button_sample;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import jp.app.oomae.hisaki.dynamic_button_sample.Fragment.Fragment1;
import jp.app.oomae.hisaki.dynamic_button_sample.Fragment.Fragment2;
import jp.app.oomae.hisaki.dynamic_button_sample.Fragment.Fragment3;
import jp.app.oomae.hisaki.dynamic_button_sample.Fragment.Fragment4;
import jp.app.oomae.hisaki.dynamic_button_sample.Fragment.Fragment5;

public class Viewpager_Adapter extends FragmentPagerAdapter {
    int numberOfTabs;

    private String tabTitles[];

    public Viewpager_Adapter(FragmentManager fm, String[] tabTitles){
        super(fm);
        this.tabTitles = tabTitles;
        numberOfTabs = tabTitles.length;
    }

    @Override public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            case 3:
                return new Fragment4();
            case 4:
                return new Fragment5();
        }
        return null;
    }
    @Override public int getCount() {
        return numberOfTabs;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }
}

Let main process the sentences you have written so far

MainActivity.java


package jp.app.oomae.hisaki.dynamic_button_sample;



import android.os.Build;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private ViewPager mPager;
    private TabLayout tabLayout;
    private Viewpager_Adapter pagerAdapter;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String[] tabs_names = getResources().getStringArray(R.array.tabs);//Get array from xml file
        tabLayout = (TabLayout) findViewById(R.id.tabs);//Get tablayout id
        mPager = (ViewPager) findViewById(R.id.viewpager);//Get id of viewpager
        pagerAdapter = new Viewpager_Adapter(getSupportFragmentManager(), tabs_names);//Create an adapter for the created fragment and viewpager
        mPager.setAdapter(pagerAdapter);//Set fragment in viewpager
        mPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));//Make it possible to move even with tablayout
        tabLayout.setupWithViewPager(mPager);//Cooperation between tablayout and viewpager
}

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="jp.app.oomae.hisaki.dynamic_button_sample.MainActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Now that the groundwork is complete, I would like to dynamically change the layout item, which is the purpose of this time.

Main subject

Button and EditText declarations to make dynamic

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="jp.app.oomae.hisaki.dynamic_button_sample.MainActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
<!------------------------Add from here------------------------------->
    <LinearLayout
        android:layout_gravity="bottom"
        android:id="@+id/linear"
        android:gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edittext1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:hint="To comment" />
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="Send" />
    </LinearLayout>
<!------------------------So far---------------------------------->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

The point is that the width and height of default are 0dp. This is because it is not displayed from the beginning. If you want to display from the beginning, set 0dp here to any value.

Make it dynamic with MainActivity

MainActivity.java


package jp.app.oomae.hisaki.dynamic_button_sample;



import android.os.Build;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private ViewPager mPager;
    private TabLayout tabLayout;
    private Viewpager_Adapter pagerAdapter;
    private LinearLayout linearLayout;
    private int linear_width;
    private EditText editText;
    private Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      
        String[] tabs_names = getResources().getStringArray(R.array.tabs);//Get array from xml file
        tabLayout = (TabLayout) findViewById(R.id.tabs);//Get tablayout id
        mPager = (ViewPager) findViewById(R.id.viewpager);//Get id of viewpager
        pagerAdapter = new Viewpager_Adapter(getSupportFragmentManager(), tabs_names);//Create an adapter for the created fragment and viewpager
        mPager.setAdapter(pagerAdapter);//Set fragment in viewpager
        mPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));//Make it possible to move even with tablayout
        tabLayout.setupWithViewPager(mPager);//Cooperation between tablayout and viewpager
/*-------------------------------------Add from here-----------------------------------------------------*/
        mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {//Enter when page switching comes
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {//Start when the page reaches the position number
                button = (Button)findViewById(R.id.button1);//get id
                editText = (EditText)findViewById(R.id.edittext1);//get id
                if (position == 0) {
                    editText.setLayoutParams(new LinearLayout.LayoutParams(0,0));//Vertical and horizontal settings
                    button.setLayoutParams(new LinearLayout.LayoutParams(0,0));//Vertical and horizontal settings
                } else if (position == 1) {
                    editText.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*0),getActionBarHeight()));//Vertical and horizontal settings
                    button.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*10),getActionBarHeight()));//Vertical and horizontal settings
                } else if (position == 2){
                    editText.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*5),getActionBarHeight()));//Vertical and horizontal settings
                    button.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*5),getActionBarHeight()));//Vertical and horizontal settings
                } else if (position == 3){
                    editText.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*8),getActionBarHeight()));//Vertical and horizontal settings
                    button.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*2),getActionBarHeight()));//Vertical and horizontal settings
                } else if (position == 4){
                    editText.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*10),getActionBarHeight()));//Vertical and horizontal settings
                    button.setLayoutParams(new LinearLayout.LayoutParams((int)((linear_width/10)*0),getActionBarHeight()));//Vertical and horizontal settings
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }

        });
    }

    @Override//Get the size of the LinearLayout(* Cannot be done with onCreate)
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        linearLayout = (LinearLayout)findViewById(R.id.linear);
        linear_width = linearLayout.getWidth();
    }

    private int getActionBarHeight() {//Get fixed value(This time it gets the default height of the actionbar and returns it)
        int actionBarHeight = getSupportActionBar().getHeight();
        if (actionBarHeight != 0)
            return actionBarHeight;
        final TypedValue tv = new TypedValue();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
                actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
        } else if (getTheme().resolveAttribute(jp.app.oomae.hisaki.dynamic_button_sample.R.attr.actionBarSize, tv, true))
            actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
        return actionBarHeight;
    }

/*---------------------------------------------------So far----------------------------------------------*/
}

When the page number changes, the horizontal length of the acquired screen is acquired, divided into 10, and 7 are assigned to EditText and 3 are assigned to Button. And if you substitute 0, Button and EditText itself disappear.

References

viewpager, Fragment and Tablayout http://notebook-t-0731.hatenablog.com/entry/2015/12/20/ViewPager%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8BActivity%E3%81%AEToolbar%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92Fragment%E3%81%94%E3%81%A8%E3%81%AB%E5%A4%89%E6%9B%B4 Get screen size http://qiita.com/a_nishimura/items/f557138b2d67b9e1877c http://tokin-kame.hatenablog.com/entry/2015/03/25/203907 Set the size of Button and EditText https://stackoverflow.com/questions/20964597/how-to-set-height-and-width-of-the-dynamic-button-created https://stackoverflow.com/questions/12301510/how-to-get-the-actionbar-height

Summary

This is the code for this time. https://github.com/hisakioomae/Dynamic_Button_size_sample Perhaps this is not the case, but if you have any concerns, please give us your opinion.

Recommended Posts

Resize or hide Button and EditText placed on the screen for each page
Change the processing when the button on RecyclerView is pressed for each list
[rails] Hide navbar and header only on TOP page
Import the instance and use it on another screen
[Android] Change the app name and app icon for each Flavor