Расположение кнопок Android - 5 кнопок и значок

Question

Я использовал много часов, пытаясь не допустить моего xml-дизайна, поэтому он будет работать на телефоне и планшете с горизонтальной и вертикальной ориентацией.

Picture of current layout

На 4 первых пунктов это TableRows, а последний RelativeLayout из-за пропуска, Может кто-нибудь помочь мне переделать его, так что все они выглядят одинаково, и это хорошо выглядит на телефон и планшет. Каков наилучший способ организации кнопок без использования фиксированной ширины и т. Д.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 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:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@color/backgroundColor" 
    android:weightSum="5.3" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context=".MenuActivity"> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="30sp"> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 

     <Button 
      android:text="@string/painter" 
      android:id="@+id/btn_painter" 
      android:background="@drawable/painter_button_bg" 
      android:textColor="@color/white" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="0.70" 
      android:textStyle="normal|bold" 
      android:textSize="40sp" /> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="20sp"> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 

     <Button 
      android:text="@string/workman" 
      android:id="@+id/btn_workman" 
      android:background="@drawable/workman_button_bg" 
      android:textColor="@color/white" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="0.70" 
      android:textStyle="normal|bold" 
      android:textSize="40sp" /> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="20sp"> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 

     <Button 
      android:text="@string/vvs" 
      android:id="@+id/btn_vvs" 
      android:textColor="@color/white" 
      android:background="@drawable/vvs_button_bg" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="0.70" 
      android:textStyle="normal|bold" 
      android:textSize="40sp" /> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 
    </TableRow> 

    <View 
     android:layout_height="3dp" 
     android:background="@android:color/darker_gray" 
     android:layout_width="match_parent" 
     android:layout_marginTop="10sp" 
     android:layout_marginBottom="10sp"/> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:layout_gravity="center_horizontal"> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 

     <Button 
      android:text="@string/edit_list" 
      android:id="@+id/btn_editlist" 
      android:background="@drawable/edit_button_bg" 
      android:textColor="@color/white" 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="0.70" 
      android:textStyle="normal|bold" 
      android:textSize="40sp" /> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 
    </TableRow> 

    <View 
     android:layout_height="3dp" 
     android:background="@android:color/darker_gray" 
     android:layout_width="match_parent" 
     android:layout_marginTop="10sp" 
     android:layout_marginBottom="10sp"/> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:layout_gravity="center_horizontal"> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 

     <RelativeLayout 
      android:id="@+id/badge_layout3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"> 

      <RelativeLayout 
       android:id="@+id/relative_layout_item_count2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"> 
       <Button 
        android:id="@+id/btn_sendlist" 
        android:text="@string/send_list" 
        android:background="@drawable/send_button_bg" 
        android:textColor="@color/white" 
        android:layout_width="300dp" 
        android:layout_height="match_parent" 
        android:layout_weight="0.70" 
        android:textStyle="normal|bold" 
        android:textSize="40sp" /> 
      </RelativeLayout> 

      <TextView 
       android:id="@+id/badge_notification_3" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignRight="@id/relative_layout_item_count2" 
       android:background="@android:drawable/ic_notification_overlay" 
       android:text="5" 
       android:textColor="#FFF" 
       android:textSize="12sp" 
       android:textStyle="bold" /> 
     </RelativeLayout> 

     <Space 
      android:layout_width="0dp" 
      android:layout_weight="0.10" 
      android:layout_height="wrap_content" /> 
    </TableRow> 

</LinearLayout> 

Answer 1

1.) add this in gradle file 
compile 'com.wefika:flowlayout:0.4.1' 

2) add this in layout file 

<?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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 

    <com.wefika.flowlayout.FlowLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/myFlowLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="start|top"> 
     <EditText 
      android:id="@+id/myEditText" 
      android:layout_width="wrap_content" 
      android:layout_height="40dp" 
      android:minWidth="100dp" 
      android:layout_margin="10dp" 
      android:paddingLeft="24dp" 
      android:paddingRight="24dp" 
      android:background="@drawable/edittext_bg" 
      android:inputType="text"/> 
    </com.wefika.flowlayout.FlowLayout> 

</LinearLayout> 

3) add this in main activity 
public class MainActivity extends AppCompatActivity { 

    EditText myEditText; 

    FlowLayout myFlowLayout; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     myEditText = (EditText)findViewById(R.id.myEditText); 

     myFlowLayout = (FlowLayout)findViewById(R.id.myFlowLayout); 

     myEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() { 
      @Override 
      public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { 
       if(actionId == EditorInfo.IME_ACTION_DONE){ 
        createBadget(myEditText.getText().toString().trim()); 
        myEditText.setText(""); 
        Toast.makeText(MainActivity.this,"DONE",Toast.LENGTH_SHORT).show(); 
       } 
       return false; 
      } 
     }); 
    } 


    private void createBadget(String str) { 

     FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(FlowLayout. 
       LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT); 

     final View child = getLayoutInflater().inflate(R.layout.text_badget, null); 

     params.setMargins(14, 14, 14, 14); 

     child.setLayoutParams(params); 

     final TextView tv = (TextView)child.findViewById(R.id.badge_tv); 
     tv.setText(str); 

     ArrayList<String> mylist = new ArrayList<String>(); 
     mylist.add(str); 

     myFlowLayout.addView(child,myFlowLayout.getChildCount()-1); 
     System.out.println("arraylist ::"+mylist); 

    } 
} 

Answer 2

Вот пример, с которым вы могли бы работать. Это прямая копия макета моего приложения, где у меня есть кнопка воспроизведения, паузы и остановки, которая равномерно заполняет всю ширину любого дисплея, независимо от размера. `

<LinearLayout 
    android:id="@+id/ll_buttonBar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="5dp" 
    android:orientation="horizontal" 
    > 
    <ImageButton 
     android:id="@+id/ib_play" 
     android:src="@drawable/ic_play" 
     android:contentDescription="@string/play" 
     android:background="@drawable/image_border" 
     android:layout_weight="1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     /> 
    <ImageButton 
     android:id="@+id/ib_pause" 
     android:src="@drawable/ic_pause" 
     android:contentDescription="@string/pause" 
     android:background="@drawable/image_border" 
     android:layout_weight="1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     /> 
    <ImageButton 
     android:id="@+id/ib_stop" 
     android:src="@drawable/ic_stop" 
     android:contentDescription="@string/stop" 
     android:background="@drawable/image_border" 
     android:layout_weight="1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     /> 
</LinearLayout> 

Вы можете добавить это между каждой кнопкой, если вы хотите разрыв строки

<View 
     android:layout_height="match_parent" 
     android:layout_width="2dp" 
     android:background="@color/background" 
     />